General

Building a Bot to Fetch Discord Scheduled Events with 11ty and Netlify

Published Oct 3, 2022

Updated Feb 13, 2023

9 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

If you haven’t heard of 11ty (Eleventy) yet, we are here to share why you should be excited about this new-ish static site generator on the block!

For clarification, a static site generator (SSG) is a tool that generates a static HTML website based on raw data and a set of templates.

11ty is an SSG with a small bundle size and no runtime, which means it only ships your code to the browser. It supports multiple templating engines providing flexibility to use templating languages like njk, .html, .md, and more. For this article, we will be using nunjucks (.njk) templating.

It’s worth pointing out that 11ty is NOT a javascript framework.

This article is a recap of the JS Drop training by Domitrius Clark where he showed us how to build a Discord Scheduled Event List with 11ty and Netlify.

In this workshop, you will learn how to build a static generated site for a list of scheduled events fetched from a Discord server using 11ty and Netlify.

A Notion document outlining the steps for this workshop. (Thanks Dom!)

👋 Before getting into the steps, make sure you have:

A GitHub account and a repo created to house your workshop code
A Discord account & a server for us to connect your bot to
A Netlify account to deploy your application at the end

Initial Project Scaffold and Install Dependencies

npm init -y to init a package.json with default values yarn add -D @11ty/eleventy @netlify/functions tailwindcss node-fetch@2 dotenv npm-run-all Open the new project in your favorite code editor Edit the script property of the package.json file:

"scripts": {
	"dev:css": "npx tailwindcss -i src/styles.css -o dist/styles.css -w",
"dev:11ty": "eleventy --config=_eleventy/config.js --serve --watch",
 	"dev": "node_modules/.bin/run-p dev:*",
"build:css": "NODE_ENV=production npx tailwindcss -i src/styles.css -o dist/styles.css -m",
"build:11ty": "eleventy --config=_eleventy/config.js --output=dist",
"build": "node_modules/.bin/run-s build:*"
}

The above scripts are the build commands for 11ty production, CSS build for Tailwind, and also to run the dev server for testing our application.

Now that we have our packages and scripts defined, let’s scaffold out the folders and files we’ll need for the site.

First edit the .gitignore:

yarn.lock
/node_modules
/dist
.env
# Local Netlify folder
.netlify

Next, define the 11ty configs:

Types of templating files (Nunjucks)
Directories to use include build output, where get components, layouts, and includes.
Defining plugins

Edit the _eleventy/config.js file with the following:

const {EleventyServerlessBundlerPlugin} = require("@11ty/eleventy")

module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
    name: "events",
    functionsDir: './netlify/functions',
    redirects: "netlify-toml-builders"
});

	return {
		templateFormats: ['njk'],
		dir: {
			input: "src",
			output: "dist",
			includes: "_includes"
		},
		htmlTemplateEngine: "njk",
		dataTemplateEngine: "njk"
	}
}

Next, we edit the netlify config file netlify.toml to config Netlify deployment with the following:

Build commands
Path to Netlify functions

[build]
command = "npm run build"
publish = "dist"

[functions]
directory = "/netlify/functions"

Creating base layout and setting up Tailwind

We created the _includes folder with two sub-folders, for our components (or macros), simply named components and layouts, which is where we’re going to be focused in this lesson.

11ty exposes the _includes folders so that we have access to our layouts and components inside of our pages and inside of each other (for example using macros inside of other macros).

Let’s go ahead and create the HTML scaffold for our pages. Inside of /src/_includes/layouts/ we’ll create the base.njk file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css" />

  <title>{{ title }}</title>
</head>
<body class="w-screen h-screen bg-slate-400 flex flex-col text-gray-800 align-center justify-center">  
  <div class="flex flex-col w-screen h-screen">
    <main>
      {{ content | safe }}
    </main>
  </div>
</body>
</html>

The layout will be used to wrap all of our pages. We can also create sub-layouts and new layouts depending on the needs of the page. For this tutorial we will need only this base layout.

For the base.njk we:

We made the Tailwind styles visible to our page by adding a link tag for /styles.css
We are using the title variable, because of 11ty’s data cascade, and we’re able to pull variables in from our pages frontmatter. In our files, we’ll need to define a title to ensure our layout doesn’t break.
Notice the {{ content | safe }}. The content variable is the page content itself. So, in our case, this will be our .njk page and components. the safe variable is a builtin filter to nunjucks, to make sure it will not be HTML escaped.

Next, we will modify tailwind.config.js to make our Tailwind work as expected:

// tailwind.config.js

module.exports = {
	content: [
		"./src/**/*.{njk,md,html}",
		"./src/_includes/**/*.njk"
	]
}

And modify the styles.css file to import Tailwind utilities, base, and components:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then we edit the index.njk file with the default content and frontmatter:

---
title: Homepage
layout: layouts/base.njk
---

<h1>Welcome</h1>

Now to test that everything works, start the dev server:

yarn dev

Everything should work!

Now navigate to http://localhost:8080 in your browser.

Let's create a Navbar component for our layout with Nunjucks, in the src/_includes/components/ add a navbar.njk:

{% 
  set linkList = [
    {'text': 'Home','url': '/'},
    {'text': 'Events','url': '/events/'}
  ] 
%}

<nav class="h-10 w-full">
  <ul class="flex p-7 gap-4 under items-center w-full h-full bg-neutral-800 text-gray-300 ">
    {% for link in linkList  %}
      <li class="hover:text-purple-600">
        <a class="{{ 'underline underline-offset-2' if link.url === page.url }}" href="{{ link.url }}">{{ link.text }}</a>
      </li>  
    {% endfor %}
  </ul>
</nav>

Next, we modify the index.njk file to include the navbar in our pages and add:

 {% include "components/navbar.njk" %}

Now the final document should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css" />

  <title>{{ title }}</title>
</head>
<body class="w-screen h-screen bg-slate-400 flex flex-col text-gray-800 align-center justify-center">  
  <div class="flex flex-col w-screen h-screen">

    {% include "components/navbar.njk" %} 

    <main>
      {{ content | safe }}
    </main>
  </div>
</body>
</html>

Initialize a Discord BOT from the Discord server

Now that we have the template and base file set up, next we should connect the Discord bot to the page.

Before we start to initialize a discord bot, we need to put some things in place, so head over to your discord.

Go to the User Settings, navigate to the Advanced tab and enable the Developer Mode.

Head over to the Discord Developer Portal and click on New Application to create an application.

Fill in the necessary details and click on create.

On the sidebar menu, navigate to Bot and click on add bot.

We will need a few details for our app to connect with the Discord server.

Let’s copy them to the .env file.

Add environment variables DISCORD_BOT_TOKEN & DISCORD_GUILD_ID and assign the value for discord token from the Bot page by clicking reset token.

For the DISCORD_GUILD_ID, head over to a Discord server that you manage, or create one for this tutorial, side-click on the server and click on Copy ID.

Now paste the ID to set the value for the DISCORD_GUILD_ID environment variable. Next, add the bot to your server https://discordapp.com/api/oauth2/authorize?scope=bot&client_id=YOUR_CLIENT_ID

Find the client ID from the 0Auth2 tab and click on copy.

Now we are all set and connected to the server.

Using global data files in 11ty to fetch scheduled events from Discord

In 11ty, data is merged from multiple different sources before the template is rendered. The data is merged in what 11ty calls the Data Cascade.

We will be fetching data from discord from a javascript function in the global data file. Inside of src/_data, create a new file named events.js.

Previously, we created environment variables called DISCORD_BOT_TOKEN & DISCORD_GUILD_ID. Now, we can fetch our events endpoint, grab our events, and inject them into our templates.

Our file will look like this:

// src/_data/events.js

const fetch = require('node-fetch');
require("dotenv").config();

module.exports = async function () {
  const res = await fetch(`https://discord.com/api/v9/guilds/${process.env.DISCORD_GUILD_ID}/scheduled-events`, {
    method: "GET",
    headers: {
      "Authorization": `Bot ${process.env.DISCORD_BOT_TOKEN}`,
    }
  })

  const data = await res.json()

	console.log({data});

  return data
}

Creating the events page

In the src directory, create an events.njk file:

{# src/events.njk #}

<div class="flex flex-col items-center justify-center mt-10">
  <div class="flex flex-col">
     <h1>Discord Community Events</h1>
     <p class="animate-pulse">Served via On Demand Builders</p>
  </div>
</div>

Currently we’ve just got a page rendering some static content. Let’s use Nunjucks loops to render a card for each of our events.

The data we care about right now from the large event object coming back are:

creator
name
scheduled start time
description
and if it’s not inside of Discord, where is it

We also need to make sure we check the event for any meta data that could point us toward an external link for this event. Thankfully, this is another quick fix with Nunjucks if blocks.

Our final card (should) end up looking something like below.

{% for event in events %}
	<div class="border-4 border-pink-700 rounded-md p-5 mt-5">
    <div class="flex items-center">
      <div class="ml-3">
        <p class="text-sm leading-5 font-medium text-gray-900">Created by: {{ event.creator.username }}</p>
        <div class="flex text-sm leading-5 text-gray-500">
          <time datetime="2020-03-16">{{ event.scheduled_start_time }}</time>
        </div>
      </div>
    </div>
    <div class="mt-3 text-sm leading-5 text-gray-900">
      <p>Title: {{ event.name }}</p>
      </div>
    <div class="mt-3 text-sm leading-5 text-gray-900">
      Description: {{ event.description }}
    </div>

    {% if event.entity_metadata %}
      <div class="mt-3 text-sm leading-5 text-gray-900">
        <a href={{ event.entity_metadata.location }}>Where: {{ event.entity_metadata.location }}</a>
      </div>
    {% endif %}
  </div>
{% endfor %}

Before we test the application, schedule a test event on Discord, restart the dev server, then click on events tab in the navbar:

You should see your newly scheduled events.

Pushing to GitHub and deploying to Netlify

Pushing to Github

Let’s initialize a repo so we can track our changes and deploy live to the web as we go.

Start off with a quick command to initialize the repo:

git init

Then let’s get all of our current changes added and pushed to main, so we can create a repo.

git add .
git commit -m "Initial commit"

Using the GitHub CLI, create a repo and push it,

gh repo create 11ty-events-practice -s=. -r=upstream --public --push

This will create your repo, name it, and push up the commits all in one command.

To confirm that the repo is up, run:

gh repo view -w

Deploy to Netlify

To create a new project on Netlify with the new repo as the base, run:

netlify init

Fill in the prompts. You should be asked the following:

Choosing to create and configure a new site
Choose your team
Set your unique site name

Now, you should have an admin URL and base URL link in the console.

There will be a few more prompts:

Authenticate Github through Netlify
leave build command blank
leave netlify functions folder blank

Once all that is done, we’re going to want to run a few commands:

git push
netlify open

If something was wrong with your initial linking of your code, try to run a new production deploy using:

netlify deploy --prod

Netlify CLI will deploy the local project to the Netlify server and generate a random URL which you can visit to see the live app.

Conclusion

In this workshop, you learned to use 11ty to fetch and display your scheduled events from a discord server and deploy an app to Netlify. That was pretty easy! Did you run into any issues?

There is more! Watch the full training on the ThisDot YouTube Channel

Are you excited about 11ty? What are you building using it? Tell us what excites you!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Hassan Sani
@inidaname @inidaname

State of Deno: A Look at the Deno CLI, Node.js Compatibility and the Fresh Framework

In this State of Deno event, our panelists discussed the Deno CLI, Node.js compatibility for the npm ecosystem, and the Fresh framework. In this wrap-up, we will take a deeper look into these latest developments and explore what is on the horizon for Deno. You can watch the full State of Deno event on the This Dot Media YouTube Channel. Here is a complete list of the host and panelists that participated in this online event. Hosts: Tracy Lee, CEO, This Dot Labs, @ladyleet Panelists: Colin Ihrig, Software Engineer at Deno, @cjihrig Luca Casonato, Software Engineer at Deno, @lcasdev Bartek Iwańczuk, Software Engineer at Deno, @biwanczuk David Sherret, Software Engineer at Deno, @DavidSherret Table of Contents - Exploring the Deno CLI and its features - What is Deno? - Built in support for TypeScript - Built in toolchain - Deno install and upgrade commands - Deno permissions - Upcoming features - Deno products - Deno Deploy - Deno and Node.js compatibility - Future support for npm packages - The Deno to Node Transform library tool - Fresh framework - Conclusion - We look forward to seeing you at our next State of Deno! Exploring the Deno CLI and Its Features What is Deno? Deno is server-side runtime for JavaScript that also behaves similarly to a browser because it supports all of the same browser APIs on the server. This support provides access to existing knowledge, resources, and documentation for these browser APIs. The team at Deno works closely with browser vendors to make sure that new web APIs work well for both server-side runtime and browsers. Built In Support for TypeScript One of the advantages of Deno is that it ships with TypeScript by default. This removes the setup and configuration time, and reduces the barrier of entry for getting started with TypeScript. Deno also type checks your TypeScript code so you no longer have to use tsc. Built in Toolchain The Deno CLI comes with an entire toolchain which includes a formatter, Linter, package manager, vendor remote dependencies, editor integrations, and more. One of those tools is the Documentation Generator, which annotates library function comments, types, or interfaces with JSDocs comments to easily generate documentation. For a complete list of the Deno CLI tools, please visit their documentation page. Deno install and upgrade commands Deno install is another feature that allows you to take a script and install it using a global command. ` If there is a new version of Deno, you can just run the upgrade command and it will upgrade itself, which makes it a version manager for itself. ` Deno permissions Deno by default will not have file, network or environment access unless you grant those permissions by running a script with command line flags. ` Even with permissions granted, you can scope it to certain directories to allow it to only read and write in the directory of your choosing. If you run the program without permissions granted, the program will still prompt you for permission access before accessing a file. To learn more about Deno's permissions, please read through the documentation. Upcoming features Deno is currently working on improving performance in the areas of HTTP, FFI (Foreign Function Interface) and Node compatibility. There are also improvements being made on the Documentation Generator, to make sure that the docs provided are good and removing the need to maintain two separate docs. Deno Products Deno Deploy Deno deploy is a hosted offering that makes it easy to go from local development to production ready. This service integrates well with GitHub, and provides an option to pay only when users make requests to your services. Deno deploy has a dashboard that allows you to automate most of the processes and show you metrics, deployment statistics, CPU utilization, and network utilization. It also allows you to set up custom domains and provision certificates. Deno and Node.js compatibility Deno v1.15 will introduce a Node.js compatibility mode which will make it possible to run some of Node's programs in Deno. Node APIs like the http server will work in Deno as they would in Node.js. When it comes to the NPM ecosystem compatibility, the goal is to support the large number of packages built on Node.js. The Deno team is working on these compatibility issues, because it uses web APIs for most of their operations. All of these Web APIs were created after Node.js was conceived, meaning that Node implements a whole different set of APIs to do certain operations like performing network requests. This new Node.js API compatibility layer will be able to translate API calls to modern underlying APIs which is what the actual runtime implements. Future support for npm packages When it comes to supporting npm packages on Deno, the goal is to have a transpiler server that takes common.js code and translates that into ESM (ECMAScript module) code. The reason for this is because, just like browsers, Deno only supports ESM code. Deno uses the concept of npm specifiers to provide access to the npm package. Deno downloads the npm package and runs it from a global cache. common.js is also supported ,and it runs the code as it is. ` For npm packages, Deno will create a single copy of the downloaded package instead of multiple directories or sub-directories of modules. It is one global hash file, with no node_modules directory by default, and no need for a package.json by default. If a package requires a node_modules directory, then that directory can be created using a specifier flag. The following command will create a node_modules directory in the project directory, using symlink. ` The Deno to Node Transform library tool The Deno team built a tool to allow library authors to transform Deno packages to Node.js packages. Deno to Node Transform (DNT) takes the Deno code then builds it for Node and distributes it as an npm package. This allows library authors to take advantage of the Deno tool chain. This package can also be shipped on npm for Node.js users. Fresh framework Fresh is a new web framework for Deno, that makes use of the Deno toolchain ecosystem. Fresh uses JSX for templating, and it is similar to Next.js or Remix. A key difference between Fresh and Next.js or Remix, is that Fresh is built to be server-side rendered on the edge rather than server-side in a few locations. Another difference is that with Fresh, no JavaScript is shipped to the client by default, which makes it faster. Fresh handles the Server-side rendering, generates the HTML, sends the file to the client, and hydrates only the part of the page that requires JavaScript on the client by default. Here are some products that already use the Fresh framework: - Deno - merch.deno.com - Deno Deploy To learn more about how to build apps with the Fresh framework, please read through this helpful blog post. Conclusion The team at Deno is making great progress to bring more exciting features to the community to make the runtime engine easy to use for building or migrating existing libraries. If you have any questions about the State of Deno, be sure to ask here. What is it you find exciting about Deno? We will be happy to hear about it on Twitter! We look forward to seeing you at our next State of Deno!...

Dec 14, 2022

6 mins

DenoNodeJS

“We were seen as amplifiers, not collaborators,” Ashley Willis, Sr. Director of Developer Relations at GitHub, on How DevRel has Changed, Open Source, and Holding Space as a Leader

Ashley Willis has seen Developer Relations evolve from being on the sidelines of the tech team to having a seat at the strategy table. In her ten years in the space, she’s done more than give great conference talks or build community—she’s helped shape what the DevRel role looks like for software providers. Now as the Senior Director of Developer Relations at GitHub, Ashley is focused on building spaces where developers feel heard, seen, and supported. > “A decade ago, we were seen as amplifiers, not collaborators,” she says. “Now we’re influencing product roadmaps and shaping developer experience end to end.” DevRel Has Changed For Ashley, the biggest shift hasn’t been the work itself—but how it’s understood. > “The work is still outward-facing, but it’s backed by real strategic weight,” she explains. “We’re showing up in research calls and incident reviews, not just keynotes.” That shift matters, but it’s not the finish line. Ashley is still pushing for change when it comes to burnout, representation, and sustainable metrics that go beyond conference ROI. > “We’re no longer fighting to be taken seriously. That’s a win. But there’s more work to do.” Talking Less as a Leader When we asked what the best advice Ashley ever received, she shared an early lesson she received from a mentor: “Your presence should create safety, not pressure.” > “It reframed how I saw my role,” she says. “Not as the one with answers, but the one who holds the space.” Ashley knows what it’s like to be in rooms where it’s hard to speak up. She leads with that memory in mind, and by listening more than talking, normalizing breaks, and creating environments where others can lead too. > “Leadership is emotional labor. It’s not about being in control. It’s about making it safe for others to lead, too.” Scaling More Than Just Tech Having worked inside high-growth companies, Ashley knows firsthand: scaling tech is one thing. Scaling trust is another. > “Tech will break. Roadmaps will shift. But if there’s trust between product and engineering, between company and community—you can adapt.” And she’s learned not to fall for premature optimization. Scale what you have. Don’t over-design for problems you don’t have yet. Free Open Source Isn’t Free There’s one myth Ashley is eager to debunk: that open source is “free.” > “Open source isn’t free labor. It’s labor that’s freely given,” she says. “And it includes more than just code. There’s documentation, moderation, mentoring, emotional care. None of it is effortless.” Open source runs on human energy. And when we treat contributors like an infinite resource, we risk burning them out, and breaking the ecosystem we all rely on. > “We talk a lot about open source as the foundation of innovation. But we rarely talk about sustaining the people who maintain that foundation.” Burnout is Not Admirable Early in her career, Ashley wore burnout like a badge of honor. She doesn’t anymore. > “Burnout doesn’t prove commitment,” she says. “It just dulls your spark.” Now, she treats rest as productive. And she’s learned that clarity is kindness—especially when giving feedback. > “I thought being liked was the same as being kind. It’s not. Kindness is honesty with empathy.” The Most Underrated GitHub Feature? Ashley’s pick: personal instructions in GitHub Copilot. Most users don’t realize they can shape how Copilot writes, like its tone, assumptions, and context awareness. Her own instructions are specific: empathetic, plainspoken, technical without being condescending. For Ashley, that helps reduce cognitive load and makes the tool feel more human. > “Most people skip over this setting. But it’s one of the best ways to make Copilot more useful—and more humane.” Connect with Ashley Willis She has been building better systems for over a decade. Whether it’s shaping Copilot UX, creating safer teams, or speaking truth about the labor behind open source, she’s doing the quiet work that drives sustainable change. Follow Ashley on BlueSky to learn more about her work, her maker projects, and the small things that keep her grounded in a fast-moving industry. Sticker Illustration by Jacob Ashley....

Apr 18, 2025

3 mins

Engineering LeadershipGitHub

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Building a Bot to Fetch Discord Scheduled Events with 11ty and Netlify

Initial Project Scaffold and Install Dependencies

Creating base layout and setting up Tailwind

Creating a Navbar component in Nunjucks

Initialize a Discord BOT from the Discord server

Using global data files in 11ty to fetch scheduled events from Discord

Creating the events page

Pushing to GitHub and deploying to Netlify

Pushing to Github

Deploy to Netlify

Conclusion

Hassan Sani

You might also like

State of Deno: A Look at the Deno CLI, Node.js Compatibility and the Fresh Framework

“We were seen as amplifiers, not collaborators,” Ashley Willis, Sr. Director of Developer Relations at GitHub, on How DevRel has Changed, Open Source, and Holding Space as a Leader

Let's innovate together!

You might also like

State of Deno: A Look at the Deno CLI, Node.js Compatibility and the Fresh Framework

“We were seen as amplifiers, not collaborators,” Ashley Willis, Sr. Director of Developer Relations at GitHub, on How DevRel has Changed, Open Source, and Holding Space as a Leader