Static sites are getting very popular, and for a good reason: they are performant and you can build one for free.
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:
- Node.js 12.18.0 installed
- 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
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
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
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:
- 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
Once finished, Netlify should show you a URL like this https://vibrant-shockley-4733f1.netlify.app/ with your finished website. Congratulations!