11分で上がる

There are many static site generators out there and you may wonder what benefits it offers compared to others. The key points which make me really love Eleventy are:

• it is built on node.js
• it does one job and does that well: create markup from content plus templates
• it is completely unopinionated about client-side JS+CSS toolchains: bring your own
• no angular/react/vue knowledge necessary.
• html first approach which makes it great for progressive enhancement.
• easily extendible and combinable with npm packages
• similar to jekyll, but with node.js as a base
• easy to mock data via the data folder.

Additionally, run git init and provide a .gitignore if you are working with git:

node_modules
.DS_Store
Thumbs.db

# Eleventy output folder
public

Configuration is done via a single javascript file named .eleventy.js . Providing a configuration is optional.

My personal preference is to provide src as input folder and public as output folder. Additionally, I use to specify folders that are copied over to the output folder on build. These are also automatically watched by eleventy when starting the development server.

module.exports = (config) => {
  // specify folders to be copied to the output folder
  config.addPassthroughCopy('./src/js/');
  config.addPassthroughCopy('./src/css/');

  return {
    markdownTemplateEngine: 'njk',
    htmlTemplateEngine: 'njk',
    dir: {
      input: 'src',    // default: '.'
      output: 'public' // default: '_site'
    }
  }
};

Create a markdown file and name it like this: src/index.md

---
title: "Hello world"
---
# Hello World

Welcome to my awesome {{title}} site! 

For each markdown content file, eleventy creates a folder with an index.html for nice urls:

index.md            --> /
about.md            --> /about/
faq.md              --> /faq/
blog/hello-world.md --> /blog/hello-world/

Finally, we can start adding the start and build tasks to our package.json file:

{
  "scripts": {
    "start": "eleventy --serve",
    "build": "eleventy"
  }
}

• npm start -> start Development server
• npm run build -> build your website
• npx serve public -> test your build

The development server is using browsersync which automatically keeps track of changes and updates your DOM. Additionally, if you open the page in multiple browsers, events are kept in sync, which is useful for cross-browser-testing.

In the front matter of your markdown file, specify the layout you want to use:

layout: base

Next to your base.njk file, create an article.njk file:

{% extends "base.njk" %}

{% block main %}
  <article class="article">
    {{ content | safe }}
  </article>
{% endblock %}

You can include partial layouts anywhere in your njk or markdown files:

{% include "header.njk" %}

There are several ways to provide data that can be used from inside your templates or content files:

• file specific: in the markdown's front matter
• folder specific: add a json file to a content folder
• globally _data directory: globally available
• _data supports .js , .yaml , .json files

You can tag your content with a keyword and then iterate through these via collections.

This is useful for auto-generating table of contents or listing articles that are related to each other

Filters provide a way to further process your content. You can use these filters from inside your content and template files by using the pipe.

Eleventy provides a rich plugin ecosystem where you can add further magic✨ to your workflow 🙌.

In the article, we used a pass-through-copy command and used CSS and JS without any bundling or further processing. My favorite approach is to use a CSS preprocessor plus ES module JavaScript files. These are not supported in legacy browsers such as IE11. When using progressive enhancement, JavaScript is not required to read
your content.

In the following, I will demonstrate the approach I used (only using a CSS transpiles) and a complete JS+CSS toolchain using parcel as an alternative approach.