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:

  1. Create a one-page website with eleventy
  2. 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:

  1. Make it work
  2. Make it right
  3. 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!

Eleventy: React/Vue-like components in nunjucks with macros

I’m experimenting a lot with Eleventy lately, and with nunjucks, since it’s one of the supported template engines.

Today I wanted to create a reusable container macro to avoid repeating the same wrapper over and over. I first tried with a macro like this:

{% macro section(items = []) %}
    <section class="my-section">
            {%- for item in items -%}
                {{ item | safe }}
            {%- endfor -%}
    </section>
{% endmacro %}

It worked. But the downside was that I had to write the HTML in strings. Ugh!

c.section([
      '<p>My first paragraph</p>',
      '<p>My second paragraph</p>'
    ])

So I started reading the official documentation and stumbled upon the call tag. It’s not super-intuitive, but it was exactly what I was looking for.

It allows you to wrap a macro call around some content, so that it’s passed to the macro body. As always an example is worth a thousand words. We change the section definition as such:

{% macro section() %}
    <section class="my-section">
        {{ caller() }} {# This is where the content will be placed #}
    </section>
{% endmacro %}

And we can call it like this:

{% call c.section() -%}
  <p>My first paragraph</p>
  <p>My second paragraph</p>
{%- endcall %}

Much cleaner, and we can also customize the section by passing in some arguments. But this will be the topic of another post.

My highlights for “The Elements of User Experience”

Lately for a project I’m involved on (and about which I’ll talk in a later post) I’m studying and reading a lot about User Experience.

I’m not new to the concepts of good UX and I’ve read a lot of articles in the past ten years. What I’ve missed is a comprehensive overview of the subject. A couple of friends suggested me to give this book a try, and I was glad I did.

You can sense from the screenshots and the examples that this is an “old” book, but if it weren’t for these aging assets, it could have been written yesterday.

I’m often surprised when something is so well written and explained and yet during our days we keep reinventing it and trying to get the buy-in for processes that should be straightforward in web development. It’s like civil engineers had to always reinvent the way you build a skyscraper!

But enough of my ranting, here are my highlights from the book.

Continue reading “My highlights for “The Elements of User Experience”” →

A PHP time-lapse: tools and resources for Modern PHP

PHP has come a long way since its humble beginnings as a simple scripting language and Modern PHP has several peculiar traits (see what I did there?)

But with a simple Google search along with great material about how to write Modern PHP you will find a lot of outdated blog posts or resources that should be ignored.

In this post, I’ve tried to collect a few outstanding resources that have helped me become a better PHP developer.

But first, the time-lapse.

Continue reading “A PHP time-lapse: tools and resources for Modern PHP” →

How to excel as a developer, designer, marketer (or anything else)

Little actions, repeated in time, transform us.

I have always been very curious and since I can remember I was interested to know how to learn better.

Why should we improve ourselves

Obviously, the first question that we have to ask ourselves when we begin a new path should be “Why should I do it?”.

We have already so little time that it would be stupid to waste it with tasks that are not worth to do (and Netflix is coming out with a lot of interesting new series!).

Why should we improve ourselves, then?

Continue reading “How to excel as a developer, designer, marketer (or anything else)” →

Your improvement is your responsibility

Karate at dawn

I really liked the introduction from the book Exercises for Programmers, by Brian P. Hogan:

Practice makes permanent.

A concert pianist practices many hours a day, learning music, practicing drills, and honing her skills. She practices the same piece of music over and over, learning every little detail to get it just right. Because when she performs, she wants to deliver a performance she is proud of for the people who spent their time and money to hear it.

A pro football player spends hours in the gym lifting, running, jumping, and doing drills over and over until he masters them. And then he practices the sport. He’ll study plays and watch old game videos. And, of course, he’ll play scrimmage and exhibition games to make sure he’s ready to perform during the real contest.

A practitioner of karate spends a lifetime doing kata, a series of movements that imitate a fight or battle sequence, learning how to breathe and flex the right muscles at the right time. She may do the same series of movements thousands of times, getting better and better with each repetition.

The best software developers I’ve ever met approach their craft the same way. They don’t go to work every day and practice on the employer’s dime. They invest personal time in learning new languages and perfecting techniques in others. Of course, they learn new things on the job, but because they’re getting paid, there’s an expectation that they are there to perform, not practice.

Brian P. Hogan

Pay me and teach me

Too often software developers complains that their employer should be held responsible for their formation. 

That’s so far from the truth! Your employer is paying you to perform, not to learn.

Of course, a learning-friendly environment is something desirable, but that not a strict requirement to continue learning and improve on your craft.

Back from the holidays: hiking around Monte Bianco

When I was younger, I usually went hiking with my dad.

He had one of those hiking guides that lists all the walks in a certain region; I still remember the name: “Il Cammina Campania. Guida WWF”.

I have wonderful memories of those walks: the early wake-up, me sleeping in the car, the 4+ hours of walking, collecting dead branches to create our very walking sticks…

Since then, though, I didn’t hike so much. Just some random walks in nearby parks, or something like that.

So when I and Valeria were planning our holidays I asked her if she’d like spending a week walking around the mountains. And she said yes!

It was great! 

I feel so refreshed and full of energy, that I’m asking myself how I’ve survived without this for all of these years.

20180817_104606