Why

I choose Eleventy as the static site generator (SSG) for my blog, because it’s really easy to use and learn, and you can enjoy the process.

Today, Eleventy is one of the favorite SSG in the Jamstack community, used by the most trusted and known companies around the globe.

In this post I will try to cover some topics on how I created my blog, and help you create something similar. Here the topics we will cover:

• Why
  • Install 11ty
  • Create the homepage

Install 11ty

We need to fullfill those requirements:

• Install Node.Js
• Basic knowledge of HTML and CSS
• Knowledge of Markdown, Nunjucks, and Javascript can be helpful, but less necessary
• Basic knowledge of if statements, loops, variables and object notation

Then we can procede creating a new project for our blog, with the following files:

blog
|-- README.md
└── .gitignore

Inside the created blog folder initialize the project with the following command:

npm init -y

This will add the package.json for the node packages and project main commands.

blog
|-- package.json
|-- README.md
└── .gitignore

Now we can install Eleventy:

npm i @11ty/eleventy

This will add the node_modules folder containing the dependencies, and the package-lock.json with the references to the installed modules.

blog
├── node_modules
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

With eleventy installed, we can proceed to configure the script inside the package.json file:

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

The start command will run the project in development mode using Browsersync for the hot reload.

The build command will create the HTML files that can be hosted onto a web server.

To continue with the configuration of eleventy we need to create an .eleventy.js file

blog
├── .eleventy.js
├── node_modules
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

We can start defining the input and output folder:

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "public"
    }
  }
}

Create the homepage

Previously, we defined the input folder to be src, after creating the folder, add inside it a Markdown file called index.md

blog
├── src
|   └── index.md
├── .eleventy.js
├── node_modules
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

In index.md, add the title property in the front matter, and some content to the page

---
title: "11ty blog"
---

My blog home page.

We can now run our blog with the command:

npm run start

the command outhput will tell us the address to see the site

> 11ty-blog@1.0.0 start /code/11ty-blog
> eleventy --serve

[11ty] Writing public/index.html from ./src/index.md (liquid)
[11ty] Wrote 1 file in 0.15 seconds (v1.0.2)
[11ty] Watching…
[Browsersync] Access URLs:
 ----------------------------------
    Local: http://localhost:8080
 External: http://192.168.1.1:8080
 ----------------------------------
[Browsersync] Serving files from: public

Opening the browser and pointing to http://localhost:8080 will show us the created home page.