How to build a website with Eleventy and deploy it on Netlify

Static sites are getting very popular, and for a good reason: they are performant and you can build one for free.

Eleventy is a new static site generator that you can use to build a website and host it on Netlify.

In this post I’m going to show you how to build a (simple) website with Eleventy and deploy it on Netlify.

Prerequisites

I will assume you have:

Node.js 12.18.0 installed
A little knowledge about JavaScript and its environment (npm, npm scripts)
Git installed and a little knowledge about how to setup a git repository, switching branch, etc.
A little terminal knowledge
A code editor installed. I will use Visual Studio Code, but you can use whatever you like

Commit often

I suggest you to commit often, to keep track of the changes you’re making. Whenever you see this symbol, I’m making a git commit ✅.

Installation

To install Eleventy, create a folder eleventy-playground

mkdir eleventy-playground && cd eleventy-playground

Create a package.json file

npm init -y

Then install eleventy

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

That’s it.

Project setup

Then open the project in your editor

code .

Before going forward, now it’s a good moment to initialize our git repository

git init .

And create a .gitignore file to exclude the node_modules folder ✅

touch .gitignore

# .gitignore file
node_modules/

Creating and deploying your first website with 11ty

Now’s the moment to build and deploy our first (even if super-simple) website.

When solving complex problems I usually try to connect all the dots with the most simple version of the problem. (This is what Nat Pryce and Steve Freeman authors of Growing Object-Oriented Software, Guided by Tests call Walking Skeleton).

So our plan is this:

Create a one-page website with eleventy
Deploy it on Netlify

Once we have the deploy pipeline for this simple website, we will simply evolve it, deploying continuously without having to worry. Let’s start

Create a file index.md in the root folder

touch index.md

Then, add some content to it ✅

# My website

This is my website, built with Eleventy.

Let’s see our masterpiece. Run this command in your terminal

npx @11ty/eleventy --serve

This will compile your website and run a local server for you. By default Eleventy stores all the website files in a folder named _site.

You should see something similar in your terminal:

Just click on the Local link and voilà, here’s your first website built with Eleventy!

It’s not fancy, but it works. I always follow this principle when working:

Make it work
Make it right
Make it fast

Now let’s deploy this website and make it public.

We’ll use Netlify to host all of our websites. Create an account, and just after that you’ll see this dashboard

See the drop zone? That’s where we’re going to drag and drop our website files. Like this

Conclusion

Once finished, Netlify should show you a URL like this https://vibrant-shockley-4733f1.netlify.app/ with your finished website. Congratulations!