← back

Start a Blog with Eleventy

Create a no fuss blog using Eleventy, Liquid and Markdown.

Aug 22, 2020 A stacked pile of assorted books with a peach coloured coffee cup on top.

Photo by Ella Jardim on Unsplash

You've made the decision to start a blog, but where do you go from there? Do you use Wordpress, or Medium? or should you create it yourself from scratch?

When I started my blog, I knew I didn't want the hassle of learning Gatsby from scratch to create a blog, and I was certain I wanted something clean, simple, and mobile-friendly. I ended up choosing Medium, but I kept in mind that I eventually wanted to migrate to my own site.

After some contemplation, I came across this article by Iain Bean that explained exactly what I was struggling with. I didn't need all the unnecessary complexity of a Gatsby site, so I decided to give Eleventy a go.

Eleventy describes itself as a beginner-friendly static site generator (a program that combines templates with data to create HTML pages) that can be used to take markdown files, and turn them into blog posts. Like magic. Eleventy encourages you to build your site how you want to, and while that may seem like a little too much control, in my experience, this means you can make using Eleventy as simple, or as complicated, as you wish.

I, for one, wanted to find the simplest way possible to migrate my blog from Medium, and create my own site, and I found it. So, I am going to share how I added a blog to my website in the easiest way possible, using Eleventy, so that you can too!

Eleventy Set Up

To start with, you will need at least Node version 8 or higher installed on your computer. If you haven't downloaded Node before, head to https://nodejs.org/en/, and if you're not sure, open up your terminal / command line and run node --version. Mine currently returns v13.2.0, as long as its above v8, we are good to go!

Now we need to install Eleventy, and we do this by running npm install -g @11ty/eleventy in the command line. Thats it. We now have Eleventy installed and we are ready to get working.

Create The Blog

There are three "things" we need to create to get our blog up and ready: a post template, a blog post, and a blog "home page".

The Template

Create a folder to contain your blog, preferably named something like blog (I know, so creative).
Create another folder inside this folder, called _includes, and then open the blog folder in Visual Studio Code (or your preferred code editor).
Inside the _includes folder, create a file called layout.liquid, and open this file up and add the following code:

This is a mixture of HTML and Liquid Templating Language. If you are unfamiliar with Liquid, take a look at the Shopify Liquid guide. What we have done here is create the basic HTML structure for each of our posts, and we have used Liquid variables to tell Eleventy where we want our post's content to go. This code is just the bare bones, and you can add as much HTML as you want. This template is created to simplify the post creation process, so that every post for our blog has the exact same underlying structure, the only thing that changes is the content.

Our next step is to create a blog post for our blog!

The Blog Post

Back in our blog folder, we are going to create a Markdown file (.md) that contains our actual blog post.

Create your blog post markdown file (For the sake of this tutorial, name it something along the lines of blog-post.md).
At the top of the blog-post file, add this:

In-between the to dashes here is something called 'YAML Front Matter' - we are using this to store data associated with our blog post so that we can use this data in our templates as liquid variables (in our case, the blogTitle that we added in the template is stored here, alongside some other data we will use later).

Now that we have a post, and a template, we can run Eleventy to do its magic and combine the data (markdown) with the template, and turn this into a blog post.

Open up the command line / terminal again, and run cd blog to make sure you are in the folder where we created the blog post.
Then, run eleventy to generate your blog files. You should see a folder called _site is created, which contains a folder with the same name as your blog post markdown file (in our case, blog-post).
If you look into this folder, you should find an index.html file, and that should look just like your layout file, but with the content from the blog post replacing the liquid variables. MAGIC! That is our first blog post created👏

Before we go any further, you can run eleventy --serve to locally host your blog at http://localhost:8080/blog-post, so that any further changes we make will be automatically applied without having to run Eleventy again. If you don't use eleventy --serve, remember to run eleventy after making any changes!

The Blog

So, we know how to create a blog post ✅, and we have our post template laid out ✅. The next thing we need to do is create a blog "home page" / archive. This page will be, in essence, a list of all the posts ever created on our blog.

To do this, go into your _includes folder (where we created our layout file), and add a new file called homepage.liquid.
Add the following code (similar to the layout file):

Then, create an index.html file inside the main blog folder.
Add this code to it:

What we are doing here is utilising the blog tag we included in the YAML Front Matter of the blog post. If we tag every post we create with a common tag, we can use the collection of posts with this tag (collections.blog) as a list of all our posts that can be looped through using a Liquid for-loop. n the code above, we are going through every post tagged blog, and generating a list (not an actual list, but kind of) that shows the title of every post, with a link to the post, and the date the post was created.

To get the posts to be listed in 'newest first' order, we add reversed to the end of the for loop.

Now, if we look back in the browser at our site, specifically at http://localhost:8080/, we should be able to see our blog post title on the home page, and if we click it, it will take us to the post itself. It may not look like much, but this is the bare bones of our blog finished!

What's Next?

As I said, what have have created here really doesn't look like much, but this is where the creativity comes in. With a little bit of customisation and some styling, this can be as extravagant or as simple as you want it to be.

You can add more data to your YAML Front Matter. Maybe you want to add a blog subtitle, or a thumbnail image to your posts? The more you add here, the more you can use in your templates.

If you are creating a blog to add to your personal website (like me), or even a blog to act as a personal website itself, add some more HTML into your templates to flesh them out a bit (I added in the navbar from my website, and a footer for each of my posts). Don't forget to link in your CSS file too!

As you create more blog posts (In the same way we created our blog-post.md), all you need to do is run eleventy when you're done, and Eleventy will do the rest of the work for you!