Creating a blog with Eleventy - Ana Martins

Last week, I decided that I want to have a technical blog again. I had one some time ago, when I studied SEO, and it helped me to understand everything better. Now that I am a frontend developer, it's time again.

So I was looking for a simple way to publish my posts. I found some options, but Eleventy drew my attention: it is simple, has a big community online, and the documentation is good. So I have found this video in Eleventy's Get Started and it seemed very simple so I decided to give it a try.

I am going to list here what I did to create this humble little blog, mixing the Get Started with the content from the video. The editor I used is the VS Code.

Step-by-step

Create a new folder where you want to keep the blog in your computer.
Open the folder you just created on terminal and start a new project by running the command npm init -y in terminal.
Install Eleventy typing npm install @11ty/eleventy.
Create an index.html file. At 0:10 in the video, we can see a very nice Visual Code trick: after creating the empty html file, type ;html:5 and press enter. The whole basic html structure will appear for you. Add some text in the html.
Run Eleventy typing npx @11ty/eleventy --serve in the terminal. Click in the link in the terminal (it will be something like http://localhost:8080/). You will see the text there (this is called a code snippet).
Now it's time to create the posts. Create a folder called posts and a file called post1.md. You can change the file name after with the right name of the post. Type something in the file and save. Add /posts/post1 in the URL to see you post there. Every file you create in this folder will be a different post on your blog.
Now it's time to create a layout file for the posts. Create a new folder called _includes. This is the default name of the folder and apparently you can rename it in the configuration file (as said in 1min30seg in the video). Then you create a new file in _includes folder called layout.html. In the video you have to remove the content from index.html and paste it on layout.html, but I personally just copied the content from index in layout. The index file is the home page from the blog, so it has a different layout. Here, only the posts have the template.
You also need to add where the content will appear in the template. For this just add the word
```
{{ content }}
```
inside the main tags:

<main>
  {{ content }}
</main>

Then you have connected this layout to the posts. So create a file called posts.json in the posts folder. Note that the .json file should have the same name of the folder. Add this to the file.

{ 
    "layout": "layout.html"
}

In this way, all the files in this folder will have the same layout. 10. Now it is time to add a title and date to your posts. Add this at the top of post1.md:

---
title: Post 1 title
---

Go back in layout.html and add the title in title tag:

<title>{{ title }}</title>

11. We are now going to create a list of all posts on the home page. So go to posts.json and change it to this:

{ 
    "layout": "layout.html",
    "tags": "post"
}

Now go to index.html and add this:

{% for post in collections.post %}
    <h3 class="latest-posts-item">
        <a href="{{post.url}}">{{post.data.title}}</a>
    </h3>
{% endfor %}

This will make all the posts in the collection post appear in a list.

And that's it! After this you will have a very simple blog to start having some fun. Eleventy recommends that we go to tutorials page to take a look in what we can do and install some plugins to add other features. I am excited to start improving this blog. Let's see what I can do. :)

Latest posts

Step-by-step