2020-07-28
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 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.
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/
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
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:
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!