Start a Blog with Eleventy
Create a no fuss blog using Eleventy, Liquid and Markdown.Aug 22, 2020
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".
- 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
blogfolder in Visual Studio Code (or your preferred code editor).
- Inside the
_includesfolder, 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
- At the top of the
blog-postfile, 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 blogto make sure you are in the folder where we created the blog post.
- Then, run
eleventyto generate your blog files. You should see a folder called
_siteis created, which contains a folder with the same name as your blog post markdown file (in our case,
- If you look into this folder, you should find an
index.htmlfile, 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!
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
_includesfolder (where we created our layout file), and add a new file called
- Add the following code (similar to the layout file):
- Then, create an
index.htmlfile inside the main
- 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!
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!