QC

This website was built using Eleventy, a static site generator. These are some notes on how it was built.

Eleventy has folder-specific defaults.

This allows us to set default layouts and tags. Here is what is currently in posts/posts.json.

layout sets the default layout.
permalink makes the post URLs simpler. It removes posts from the URL path. This is why this page has the URL website.com/eleventy instead of website.com/posts/eleventy.
tags marks every file this folder as a post. This is used for the post feed.

{
	"layout": "base.liquid",
	"permalink": "eleventy/",
	"tags": ["posts"]
}

Eleventy can use Liquid to write the templates.

Liquid looks like HTML, but it uses braces and percentage signs to add data.

Text surrounded by two braces will output a value. Like {{ content }}.
Text surrounded with braces and a percentage sign will call code. Like {% include 'nav' %}.

Ever since Eleventy 1.0, {{ include file }} requires quotation marks around file unless dynamicPartials: false.

Eleventy can also generate post feeds.

Eleventy gives us access to collections, which we can loop through to generate a post feed. The loop in index.md uses collections.posts to get a list of every file with a posts tag. The post's frontmatter is placed inside a data object. Thus, to get our post's title, we use post.data.title.

{% for post in collections.posts reversed %}
  <a href="{{ post.url }}">
    <h2>{{ post.data.title }}</h2>
    <time>{{ post.data.date | date: "%B %d, %Y" }}</time>
  </a>
{% endfor %}

This site is not JavaScript-free!

Eleventy allows us to add javascript configuration files at the root of our directory. In my .eleventy.js file I have added plugins for markdown footnotes and images. In my drafts folder I have added some environment logic as well. See references for the relevant links.

Testing the site locally!

npx @11ty/eleventy --serve

References

Website