DEV Community

Cover image for Create a Blog in Less Than 20 Lines of Code Using 11ty
Omar Sinan
Omar Sinan

Posted on

Create a Blog in Less Than 20 Lines of Code Using 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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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

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)
Enter fullscreen mode Exit fullscreen mode

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

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)
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

It's as simple as that!

Preview of result

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 %}
Enter fullscreen mode Exit fullscreen mode

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

Preview of result

πŸ€” 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).

Top comments (6)

Collapse
 
allanjeremy profile image
Allan N Jeremy • Edited

I never knew about this. Really well written blog post to be honest.

Looks really simple too. I love it and I haven't even tried it yet.

Probably gonna try this out for my site revamp. Thanks a tonne for sharing Omar!

Collapse
 
oohsinan profile image
Omar Sinan

Thank you Allan, it really is a great tool. I’m glad you found it useful! πŸ™Œ

Collapse
 
archeelux profile image
Arturs Timofejevs

11ty is great, I've been using it and its so simple.

Collapse
 
oohsinan profile image
Omar Sinan

I completely agree, it’s a great tool πŸ™Œ

Collapse
 
gogorichie profile image
Richard Lewis

This is awesome I've been looking for a really simple static blog tool. This might be my winner. Thanks for sharing!

Collapse
 
oohsinan profile image
Omar Sinan

I’m glad you found it useful! πŸ™Œ