← Back
evelenty gatsby static-generators

Bye bye Gatsby, hello Eleventy

Long years ago (thanks to Internet magic, I can see it was 7 years) I've read a post called "The most over engineered blog ever". If I don't remember bad, was the start of gatsby.

Some years later I got up into Gatsby wagon and now, I give up. I can't agree more with that phrase.

I need something really simple, to log (and remember) things I'm learning. Just a simple tool to give them value, and access them. Gatsby was slow, complex and, above all, stop working at some point that I've tried to upgrade libraries (to make it faster).

So I'm joining the Eleventy wagon now. Hope it lasts longer.

If you start from scratch #

Probably it's better to fork https://github.com/11ty/eleventy-base-blog

Remove Gatsby and add Eleventy #

Basically I've removed all Gatsby specific files (and npm dependencies) along npm scripts. Installed eleventy and added some configuration:


module.exports = function (eleventyConfig) {

  eleventyConfig.addPassthroughCopy("public");

  eleventyConfig.setTemplateFormats([
    "md",
    "jpg",
    "png",
  ]);

  eleventyConfig.addLiquidFilter("fmtDate", (date) => {
    if (!date || typeof date.getMonth !== "function") {
      return "";
    }

    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  });
};

The setTemplateFormats copies all images to _site output folder. I've renamed static/ into more standard public/.

Add a layout and an index.md page #

I've added a layout at _includes/layout.njk:

Notice the {🙏{. It should be just two {

<!doctype html>
<html lang="en" class="dark">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{🙏{ title }}</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet">
    </head>
    <body>
        <article >
            <h1>{🙏{ title }}</h1>
            {🙏{ content | safe }}
        </article>
    </body>
</html>

and created a _data/layout.js to configure default layout:

module.exports = "layout.njk";

And a simple index.md file:

---
title: danigb's coding journal
---

## Blog

{🙏% for post in collections.blog  reversed %}
- {🙏{ post.data.date  | fmtDate }} [{🙏{ post.data.title }}]({🙏{ post.url| url }})
{🙏%- endfor - %}


## Journal

{🙏% for post in collections.journal reversed %}
- {🙏{ post.data.date | fmtDate }} [{🙏{ post.data.title  }}]({🙏{ post.url | url }})
{🙏%- endfor -%}

Rename .mdx into .md and add syntax highlighter #

I wasn't using any mdx feature so :shrug:. I've removed some fancy ``` decorators and added a syntax highlighter:

        <link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">

Add tailwind #

I've added tailwind with tailwind-typography plugin.

And add a simple css script to build:

    "css": "postcss styles.css -o public/compiled.css",

With Gatsby, I used slug to specify url of the post, but it's called permalink with Eleventy (and has slightly different semantics).

Basically I did a VSCode search & replace in files: slug: (.*) to journal/$1/ (in journal folder. The same with blog)

Prefix the things #

Direct links doesnt work. We need to change from this:

!🙏[image](/absolute/link)

to this:

!🙏[image]({🙏{ "/absolute/link" | url }})

The VS regex search & replace again: \]\((\/[^)]*)\) to ]({🙏{ "$1" | url }}) (notice the escape emoji)

Resources: