Evan Genest's Learning Log

I try to write in a clear way but then I become impatient and just start jotting.

Browse my topics here

This is an Eleventy project created from the eleventy-base-blog repo.

Installing Eleventy

I followed the instructions in the 11ty Github repo.

One bug

I set Apache wrong. I fixed this by making the server point to the _site directory in the project, not to the top level of my project.

How to configure input and output

Eleventy can consume and build to wherever you like. To do this, the root directory should have a file called .eleventy.js. In the example below we set the input and output directories to be src and build:

// eleventy.js
module.exports = config => {

// 11ty defaults
return {

dir: {
input: 'src',
output: 'build'


Normal useage

  1. A single blog post is written as its own markdown file. Save it in the directory posts
  2. After saving it, rebuild the static site: npx eleventy

Using an image

Bryce Wray described how to add the Eleventy module for automatically sizing and generating images for different users viewports.

The business end in your post, once you follow Bryce's instructions, ends up being a line in your post's markdown.

The word image here calls the method for processing that image.


To stay focused, I publicly pledge to not waste time styling this until October 1, 2021.