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. The great thing about 11ty (as it's also called) is that it's very lightweight and doesn't impose you anything. You can decide your folder structure, libraries, and way of doing things.
In this post I’m going to show you how to build a (simple) website with Eleventy and deploy it on Netlify.
I will assume you have:
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 ✅.
To install Eleventy, create a folder
mkdir eleventy-playground && cd eleventy-playground
npm init -y
Then install eleventy
npm install --save-dev @11ty/eleventy
Then open the project in your editor
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 ✅
# .gitignore file node_modules/
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:
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
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
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:
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
Once finished, Netlify should show you a URL like this https://vibrant-shockley-4733f1.netlify.app/ with your finished website. Congratulations!