Sezer Ünlü

B.Sc. Computer scientist & front-end web engineer

How to create a website with eleventy

Published on

Eleventy is a static site generator and this website is build with it. A static HTML file is created for each page.

And here is the procedure to create a website with eleventy:

1. Create a folder for your website files

Create a folder and name it what you want. I name it my-website.


$ mkdir my-website


2. Install eleventy

Go into your created folder and install eleventy.


$ cd my-website
$ npm install @11ty/eleventy


3. Split your code

Suppose that this is the index.html file of the website to be built with eleventy:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of my website</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    Hello world!
</body>
</html>


Create a _includes folder in the root directory. Go into the folder and create a main.liquid file with the following content:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    {{ content }}
</body>
</html>


Create a index.liquid file in the root directory with the following content:


---
title: Title of my website
layout: main
---
<h1>Hello world!</h1>


Create a css folder in the root directory. Go into the folder and create a index.css file with the following content:


h1 {
    color: red;
}


4. Include CSS

Create a .eleventy.js file in the root directory with the following content:


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


5. Build static files and run local server

Run the following command in the root directory:


npx eleventy --serve


You should see the following output:


 ...
 Local: http://localhost:8080
 ...


Open http://localhost:8080 and you should see your website.