Create a Blog in Less Than 20 Lines of Code Using 11ty
Tags: beginners, tutorial, webdev, 11ty
Published: 2020-01-10 09:36:45

---
title: Create a Blog in Less Than 20 Lines of Code Using 11ty
published: true
description: In this blog post, I will show you how easy it is to create a personal website with a blog page using 11ty.
tags: beginners, tutorial, webdev, 11ty
cover_image: https://i.imgur.com/rfruTyZ.png
---

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

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.

```bash
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:
```md
---
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:
```md
---
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?
![Preview of result](https://i.imgur.com/qnNYyDm.png)

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).

```md
---
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:

![Preview of result](https://i.imgur.com/ZFt1Zwu.png)

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:

```md
---
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:

```liquid
# 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:

```liquid
# 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`:

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

It's as simple as that!

![Preview of result](https://i.imgur.com/HbzOgi6.png)

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.

```liquid
# 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.

![Preview of result](https://i.imgur.com/WBhmvc6.png)

## 🤔 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).