Deploying Eleventy and Tailwind CSS to Netlify - Part 2

Last time, we learned how to deploy a simple static Eleventy site to Netlify. Today, we're going to expand our site in to a simple, working blog.

Creating a Collection

In Eleventy, a collection is a group of related content, such as blog posts, product pages, etc. We already created a folder for our blog post collection in the last tutorial - it exists at src/site/blog. The next thing that we want to do is to define some simple parameters about our collection. Create a json file at src/site/blog/blog.json with the following content:

{"layout" : "post","tags" : "post","templateEngineOverride": "njk,md"}

This establishes a post class, which means any file in this directory will take on these attributes (using the post layout and applying a post tag).

We'll create a corresponding post layout in src/site/_includes/layouts/post.njk:

---layout: basepageClass: poststemplateEngineOverride: njk, md---<header><h1 class="title">{{ title }}</h1><h2 class="subtitle">{{ subtitle }}</h2></header>{{ content | safe }}

We'll also need to add a layout alias in our eleventy config. In .eleventy.js, add this line right after the layout alias we previously made for base.njk:

eleventyConfig.addLayoutAlias('base', 'layouts/base.njk');

Now, any markdown file created in the blog directory will create a corresponding page on our side. Let's try it out - create a quick example blog post at src/site/blog/my-first-post.md:

---title: My first blog post!subtitle: Trying some stuff out in Eleventy.date: 2021-01-09---Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis scelerisque fermentum dui faucibus in. Velit dignissim sodales ut eu. Non consectetur a erat nam at lectus. Lacus luctus accumsan tortor posuere ac ut.Morbi tristique senectus et netus. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Nunc vel risus commodo viverra maecenas accumsan lacus. Fringilla urna porttitor rhoncus dolor purus non enim praesent. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Ut sem nulla pharetra diam sit. Et malesuada fames ac turpis egestas integer.Non tellus orci ac auctor augue mauris augue neque gravida. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus.

Yes, I was unoriginal and used lorem ipsum text. You can write your post using standard markdown. At the top, there is a special header section that contains some metadata about the post - this will be used in our template (inserted as {{ title }} and {{ subtitle }}).

Let's see how things turned out - run npm run watch and navigate to http://localhost:8182/blog/my-first-post/ in your browser - you should see some (messy) text indicating that things are working!

Creating an Index

Having individual blog posts is great, but you likely also will want your home page to have a list of your recent posts. We're going to add a loop in your src/site/index.md file that iterates though every item in our post collection:

{% for item in collections.post | reverse %}<article><time value="{{ item.date }}">{{ item.date }}</time> - <a href="{{ item.url }}">{{ item.data.title }}</a></article>{% endfor %}

There you have it! Now, when you go to your index page, you'll see all of your posts listed in chronological order.

I've posted a Part 2 branch on GitHub so that you can see the code for simple-eleventy at the current state. Over the next few days, I'll update with a slightly better template and some simple addons (such as RSS) to get you a working blog framework without the cruft!