# Add a Comments Section to an Eleventy Website with MongoDB and Netlify

I'm a huge fan of static generated websites! From a personal level, I have The Polyglot Developer, Poké Trainer Nic, and The Tracy Developer Meetup, all three of which are static generated websites built with either Hugo or Eleventy. In addition to being static generated, all three are hosted on Netlify.

I didn't start with a static generator though. I started on WordPress, so when I made the switch to static HTML, I got a lot of benefits, but I ended up with one big loss. The comments of my site, which were once stored in a database and loaded on-demand, didn't have a home.

Fast forward to now, we have options!

In this tutorial, we're going to look at maintaining a static generated website on Netlify with Eleventy, but the big thing here is that we're going to see how to have comments for each of our blog pages.

To get an idea of what we want to accomplish, let's look at the following scenario. You have a blog with X number of articles and Y number of comments for each article. You want the reader to be able to leave comments which will be stored in your database and you want those comments to be loaded from your database. The catch is that your website is static and you want performance.

A few things are going to happen:

- When the website is generated, all comments are pulled from our database and rendered directly in the HTML.
- When someone loads a page on your website, all rendered comments will show, but we also want all comments that were created after the generation to show. We'll do that with timestamps and HTTP requests.
- When someone creates a comment, we want that comment to be stored in our database, something that can be done with an HTTP request.

It may seem like a lot to take in, but the code involved is actually quite slick and reasonable to digest.

## The Requirements

There are a few moving pieces in this tutorial, so we're going to assume you've taken care of a few things first. You'll need the following:

- A properly configured MongoDB Atlas cluster, **free** tier or better.
- A Netlify account connected to your GitHub, GitLab, or Bitbucket account.
- Node.js 16+.
- The Realm CLI.

We're going to be using MongoDB Atlas to store the comments. You'll need a cluster deployed and configured with proper user and network rules. If you need help with this, check out my previous tutorial on the subject.

We're going to be serving our static site on Netlify and using their build process. This build process will take care of deploying either Realm Functions (part of MongoDB Atlas) or Netlify Functions.

Node.js is a requirement because we'll be using it for Eleventy and the creation of our serverless functions.

## Build a static generated website or blog with Eleventy

Before we get into the comments side of things, we should probably get a foundation in place for our static website. We're not going to explore the ins and outs of Eleventy. We're just going to do enough so we can make sense of what comes next.

Execute the following commands from your command line:

```bash
mkdir netlify-eleventy-comments
cd netlify-eleventy-comments
```

The above commands will create a new and empty directory and then navigate into it.

Next we're going to initialize the project directory for Node.js development and install our project dependencies:

```bash
npm init -y
npm install @11ty/eleventy @11ty/eleventy-cache-assets axios cross-var mongodb-realm-cli --save-dev
```

Alright, we have quite a few dependencies beyond just the base Eleventy in the above commands. Just roll with it for now because we're going to get into it more later.

Open the project's **package.json** file and add the following to the `scripts` section:

```json
"scripts": {
    "clean": "rimraf public",
    "serve": "npm run clean; eleventy --serve",
    "build": "npm run clean; eleventy --input src --output public"
},
```

The above script commands will make it easier for us to serve our Eleventy website locally or build it when it comes to Netlify.

Now we can start the actual development of our Eleventy website. We aren't going to focus on CSS in this tutorial, so our final result will look quite plain. However, the functionality will be solid!

Execute the following commands from the command line:

```bash
mkdir -p src/_data
mkdir -p src/_includes/layouts
mkdir -p src/blog
touch src/_data/comments.js
touch src/_data/config.js
touch src/_includes/layouts/base.njk
touch src/blog/article1.md
touch src/blog/article2.md
touch src/index.html
touch .eleventy.js
```

We made quite a few directories and empty files with the above commands. However, that's going to be pretty much the full scope of our Eleventy website.

Multiple files in our example will have a dependency on the **src/_includes/layouts/base.njk** file, so we're going to work on that file first. Open it and include the following code:

```html

    
    
        {{ content | safe }}
        

            

COMMENTS

            
                
            

        
        
            
            
            
            
            Create Comment
        
        
    

```

Alright, so the above file is, like, 90% complete. I left some pieces out and replaced them with comments because we're not ready for them yet.

This file represents the base template for our entire site. All other pages will get rendered in this area:

```
{{ content | safe }}
```

That means that every page will have a comments section at the bottom of it.

We need to break down a few things, particularly the `