Easy blog using Eleventy

3 min readMar 6, 2023

I like the idea of using static sites for personal blogs or sites that don’t require frequent updates or a large team to manage content. Although I currently use Jekyll for thebeerbrother.cl, during my search for a JavaScript alternative, I came across Eleventy, which surprised me with its simplicity and the many “automatic” or “conventional” things it does. I’ll be using it for an upcoming project :). Now, let me show you how to install and use it.

Go to Eleventy

Eleventy is a powerful static site generator that can be used to create various types of websites, including blogs. It is built with JavaScript and requires no prior knowledge of any particular web development framework. With Eleventy, you can create fast, simple, and efficient static sites without worrying about setting up a complicated development environment.

Getting started with Eleventy:

Install Node.js and create folder for project

Before you start using Eleventy, make sure that you have Node.js installed on your computer. You can download the latest version of Node.js from the official website and follow the instructions to install it.

Create a new directory on your computer where you want to store your blog files. You can name it whatever you want.

Initialize your project

Open your terminal and navigate to your new directory. Run the following command to initialize your project with npm:

npm init -y

This will create a package.json file in your directory.

Install Eleventy

Run the following command in your terminal to install Eleventy:

npm install --save-dev @11ty/eleventy

This will install Eleventy as a development dependency in your project.

Create your first template

Create a new file in your directory called index.html. This will be the homepage of your blog. Add some basic HTML to this file, like so:

<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <h1>Welcome to my blog!</h1>
  </body>
</html>

Create a configuration file

Create a new file in your directory called .eleventy.js. This file will contain your configuration options for Eleventy. Add the following code to this file:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("assets");

  return {
    dir: {
      input: ".",
      output: "_site",
      includes: "includes",
      layouts: "layouts",
      data: "data"
    }
  };
};

This code tells Eleventy to look for templates in the current directory, output the generated files to a directory called _site, and use the includes, layouts, and data directories to organize your templates.

Build your site

In your terminal, run the following command to build your site with Eleventy:

npx eleventy

This will generate your blog files in the _site directory.

Preview your site

To preview your blog, you can run a local web server in the _site directory. One way to do this is to use the http-server package. Run the following command to install it:

npm install -g http-server

Then, run the following command in your terminal to start the server:

http-server _site

This will start the server at http://localhost:8080. Open your web browser and navigate to this URL to see your blog!