Create a Blog in Less Than 20 Lines of Code Using 11ty

#beginners #tutorial #webdev #11ty

This was originally posted on my personal blog at https://omarsinan.com/blog/the-eleventy-11ty-hype-explained

In this blog post, I'll go over what's so special about 11ty and why you should check it out. I also hope that this could serve as a motive for you to create a personal website with a blog page using 11ty 😄

🤯 Possibly the simplest installation process

If you open the 11ty website (11ty.dev), the first thing you see is the quick start section. With 3 commands (could be done in 2 as well), you can set up your first website.

npm install -g @11ty/eleventy
echo '# Hello, world!' > index.md
eleventy

You might have to run the sudo npm in order to have the correct permissions to install 11ty.

Finally, to see your website running, run eleventy --serve and magically, you have a running static website made from a single .md file! 🤯

📝 You want a blog? Have a blog.

It's supeeeer easy to set up a blog for your personal website. The first step is probably to create a layout file, layouts are basically templates that are used in other files.

Create a directory called _includes and a file called layout.njk inside _includes and copy-paste the following:

---
title: A blog about cats
---
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }}</title>
    </head>
    <body>
        {{ content | safe }}
    </body>
</html>

Now lets create a directory called blog in the root directory and inside it, create a directory called post-1. Inside the post-1 directory, create a file called index.md. This will serve as our first blog post:

---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
---
# {{ title }}
Hello, world!

You can use the liquid templating language within your .md files!!! (whaaaat?)

Open your browser and go to http://localhost:8080/blog/post-1/ and guess what?

Let's add an image to our blog post. Create a folder inside the post-1 directory called images and inside it place an image of a cat (yes, only cats are allowed).

---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
---
# {{ title }}
Hello, world!

![A picture of a cat](./images/cat.jpg)

Refresh the page annnnd, oh no! It didn't work. 11ty by default will scan for .md files only. So in order to tell it to copy over the images as well, we need to specify which file formats it should scan for.

So in the terminal, run eleventy --formats=md,jpg and then eleventy --serve --formats=md,jpg

Aaaaand viola! Check it out:

Alright that's cool and all, but how do we display a link to all the individual blog posts on our main page? It's very simple. In your index.md file in the post-1 directory, add another attribute in the frontmatter: tags: post. So it should look like this:

---
layout: layout.njk
title: This is my first ever post!!
date: 2020-01-08
tags: post
---
# {{ title }}
Hello, world!

![A picture of a cat](./images/cat.jpg)

The tags attribute will help us create a collection that we can iterate over. Now in your index.md in the root directory, it should have the following:

# Hello, world!

{% for post in collections.post %}
- {{ post.data.title }}
{% endfor %}

So now if you head over to http://localhost:8080/, you can see that our first post shows up. How do we link it though? Easy peasy, just add post.url as a link. So your file should look like this:

# Hello, world!

{% for post in collections.post %}
- [{{ post.data.title }}]({{ post.url }})
{% endfor %}

Perfect, it works! Let's confirm it by creating another post. Again, same drill. Create a directory called post-2 in the blog directory and create a file inside it called index.md:

---
layout: layout.njk
title: Woohoo! My second post
date: 2020-01-09
tags: post
---
# {{ title }}
Hey there!

It's as simple as that!

By default, 11ty will sort in ascending order of dates. Let's sort it so that it shows the newest posts up first. Edit your index.md in the root directory by assigning collections.post | reverse to posts and change collections.post to posts in the for loop. You can leave the rest as is.

# Hello, world!

{%- assign posts = collections.post | reverse -%}
{% for post in posts %}
- [{{ post.data.title }}]({{ post.url }})
{% endfor %}

This will make sure that we reverse the default sorting of 11ty which results in descending order of dates.

🤔 What's next?

There are soooo many more powerful feautures provided by 11ty. This post was only to give you an idea of how easy it is to get a blog up and running. 11ty already provides a blog website base project which you can check out at https://www.11ty.dev/docs/starter/ in case you don't want to build everything from scratch (although if it is your first time using 11ty, I suggest you learn by creating it yourself).

I also suggest you check out the documentation. In my opinion, 11ty has one of the most impressive docs I've seen. The docs provide a lot of content for you to get a proper website up and running.

You could also check out Jason Lengstorf's Let’s Learn Eleventy! (with Zach Leatherman) at https://www.youtube.com/watch?v=j8mJrhhdHWc (it's an amazing video I highly recommend you check it out).