Web Development

Building A Blog With Eleventy And Netlify CMS – Part 2: Adding Blog Posts


Subscribe On YouTube

Episodes

This is the second part of the Building A Blog With Eleventy And Netlify From Start To Finish series on CodingTheSmartWay.com. In the first part we’ve started with an introduction of Eleventy and Netlify CMS and created a basic Eleventy project which is now the basis to move on. As we’re going to implement a blog example we’re starting to add blog related content to our site in this part.

Creating A Post Layout Template

Let’s start by adding another file to the _includes/layout directory:

$ touch _includes/layouts/post.njk

In the following steps we’ll use this file to implement a layout template which will be used for all of our post pages.

Setting Tags For Posts

Next let’s add another file to our project structure:

$ touch posts/posts.json

The posts.json file is used to set tags for all of our blog post pages that will be located in that folder. To set the tag insert the following JSON code:

{
 "tags": "posts"
}

Creating Posts

Next we need to create a first post for the blog inside the posts directory. Therefore let’s add a new markdown file:

$ touch posts/my-first-post.md

Insert the following content:

---
layout: layouts/post.njk
title: My first post
description: The first post on the Eleventy + Netlify CMS from scratch blog
date: 2020-10-08
featuredImage: /images/uploads/image1.jpg
---

Hello, here is the body of the post.

Please note that we’re using the post layout template (post.njk) for this file. As we have not implemented this layout template yet we need to add the corresponding code in file _includes/layouts/post.njk now as well:

--- 
layout: layouts/base.njk 
---
<h2>{{ title }}</h2>
<img src="{{ featuredImage | url }}" alt="{{ featuredImage }}"></img>
<p>{{ content | safe }}</p>

Here you can see that the Post layout template is making use of our Base template as well, so that we’re ending up with nested layout templates. This makes it easy to implement even complex user interface layouts.

Displaying A List Of Posts

A blog is not only conisting of single post pages but also is displaying a list of post. To implement such a list view we’re adding a new file to the project:

$ touch _includes/postslist.njk

The following code is used to output a list of all posts:

<ul>
    {% for post in postslist %}
        <li>
            <strong>
                <a href="{{ post.url | url }}">{{ post.data.title }}</a>
            </strong>
            -
            <span>
                {{ post.data.description }}
            </span>
        </li>
    {% endfor %}
</ul>

The postslist template is embedded in posts.njk which is created next:

$ touch posts.njk

Insert the following lines of code:

--- 
layout: layouts/base.njk 
permalink: /posts/ 
---
{% set postslist = collections.posts %}
{% include "postslist.njk" %}

This file is associated with the URL path /posts/ and is using the base layout template. The postslist variable is set to what’s available via collections.posts and the previously created postslist template is included.

Now when accessing URL http://localhost:8080/posts you should be able to see an overview page presenting a list of all available blog posts:

10.png

 Clicking on one of the post titles takes you to the corresponding blog page:

20.png

What’s Next

Now we’ve implemented a very simple blog with Eleventy. Based on the implemented templates the output of static sites is fully working. In the next part of this series we’re going to add Netflify CMS to our project to manage the content of our blog post. 

Advertisement: The Complete JavaScript Course: Build Real Projects

Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack

The Complete JavaScript Course: Build Real Projects *

  • Go from a total beginner to an advanced JavaScript developer
  • JavaScript and programming fundamentals: variables, boolean logic, if/else, loops, functions, arrays, etc.
  • Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs
  • A true understanding of how JavaScript works behind the scenes
  • Practice your new skills with coding challenges (solutions included)

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.