Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Developing Websites With Eleventy

Developing Websites With Eleventy

Author: Will Moody

Published:

Reading Time: (approx) 3 min

Tags that this post has been filed under.

My Website Development Process With Eleventy?

For me the development process of any website needs to be straight forwards and quick, my clients are paying for their website and not for me to be learning new methods or dealing with build issues.

Once I had decided on Eleventy as my build tool of choice, I had a look at several of the starter projects available, this seems the most logical way to get any project running quickly.

I decided to start with Eleventastic as this seemed to cover all main points that I was looking for including CSS Pipeline (Sass, CleanCSS), JS Bundling (Webpack), SVG Icon Sprite Generation, Critical CSS and HTML Minification.

So, I downloaded the base files into my folder, copied over my Scss and JS from my existing Gridsome build of the website along with all my content and pages.

Once this was completed it was a case of using the Terminal from within Visual Code Studio (my editor of choice) and getting the site built locally using 'npm start', after a few false starts which was mainly to do with existing code on pages I had copied over I was up and running.

Two main areas that I needed to work on for the change to Eleventy were both related to publishing articles, the first was the need to add categories and the second was that I wanted t have a previous/next link at the bottom of each published article.

To add categories to my articles it was a case of adding a category to the frontmatter like this:-

---
title: Developing Websites With Eleventy
tags: ['Website', 'Developing', 'Eleventy', 'Building']
categories: ['Eleventy']
date: 2022-04-29T12:25:09.064Z
---

The main file you will work with in Eleventy is the .eleventy.js.

So working with .eleventy.js I added

module.exports = function (config) {
  config.addCollection("categories", function (collection) {
    let allCategories = getAllKeyValues(
      collection.getFilteredByGlob('./src/content/posts/*.md'),
      "categories"
      );

      let categories = allCategories.map((category) => ({
        title: category,
        slug: strToSlug(category),
      }));

      return categories;
    });
}

I then created a category.njk file:-

---
layout: default
pagination:
  data: collections.categories
  size: 1
  alias: category
addAllPagesToCollections: true
permalink: '/categories/{{ category.slug }}/index.html'
eleventyComputed:
  title: 'Category: {{ category.slug }}'
  description: 'A collection of posts from our blog sorted by category'
ogType: website
jsonldType: page
keywords:
  - Categories
  - Category
  - Blog
  - Posts
  - Articles
---

<p class="is--bold">Categories:-</p>
<ul class="tags--list">
  {% for category in collections.categories %}
  <li><a href="/categories/{{ category.slug }}">{{ category.title }}</a></li>
  {% endfor %}
  </ul>

  {% set posts = collections.releasedPosts | include("data.categories", category.title) %}
  <ul class="post--list">
  {% for item in posts %}
  <li class="post--list--block">
    <h2>
      <a href="{{ item.url }}" rel="bookmark">{{ item.data.title }}</a>
    </h2>
    <div>
    <p class="is--meta">Author: {{ meta.authorName }}</p>
    <p class="is--meta">Published: <time datetime="{{ item.date | dateToFormat }}">{{ item.date | dateToFormat }}</time></p>
    <p class="visually--hidden" id="tags-desc">Tags that this post has been filed under.</p>
    <ul class="tags--list" aria-describedby="tags-desc">
    <li class="is--meta">Tags:</li>
      {% set tags = item.data.tags %}
      {% for tag in tags %}
        <li>
          <a href="/tag/{{ tag | slug }}/">#{{ tag | title | replace(' ', '') }}</a>
        </li>
      {% endfor %}
    </ul>
    </div>
    <p>{{ item.data.excerpt }}</p>
  </li>
  {% endfor %}
</ul>

As I wanted to display a list of the categories on my journal page I was able to do this by adding:-

<p class="is--bold">Categories:-</p>
  <ul class="tags--list">
    {% for category in collections.categories %}
    <li><a href="/categories/{{ category.slug }}">{{ category.title }}</a></li>
    {% endfor %}
  </ul>

That gave me the result I was after, allowing viewers to select a category from the journal page or from within an article and then be directed to a category page showing only articles related to that category only.

Next was the previous/next link and I must admit this is so easy as the code is available in the official docs, as I prefer nunjucks, this is the code:-

<div class="prev--next">
{% set previousPost = collections.releasedPosts | getPreviousCollectionItem(page) %}
{% set nextPost = collections.releasedPosts | getNextCollectionItem(page) %}
<p>{% if previousPost %}Previous Article: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>{% endif %}</p>
<p>{% if nextPost %}Next Article: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>{% endif %}</p>
</div>

Next Article: Fat Buddha Designs Website Revamp