At first, when I wanted to start my portfolio site and blog, I was a little unsure of what tool to use to get me up and running. I thought about going down the CMS path with Squarespace because, let’s be honest, there are some pretty cool pre-made templates, and the UI is super user-friendly. However, I wasn't keen on paying a monthly premium and not having the flexibility to style my site. Medium could have worked, but another subscription? My wallet didn’t think so.

I know it’s easier to go down the path most travelled, but I had some time on my hands, and my brain was itching to learn something new. It had been a little while since I had opened up my terminal and played around in a code editor. So I thought, 'Stuff it, let’s build something.'

A friend of mine had recently shared her new developer blog with me and told me that it had been built with Eleventy, a static site generator (SSG). It looked good, was simple, fast to load, and used Markdown for the posts. I was intrigued, so I did a little research about SSGs and decided that this was going to give me full control of my design and content, without the constraints of a platform’s templates or subscriptions.

What is a static site generator (SSG)?

A static site generator, which is a tool that automates the process of coding static pages. It takes raw data and templates, compiles them, and generates a full static HTML website.

How does a SSG work?

Raw data: You start with your content in the form of HTML, Markdown, JSON or other data files. This content includes things like templates, your blog posts, images and any info you want to include on your site.

Templates: You create templates using a templating language like Nunjucks, Liquid or Handlebars. These templates help you to define the layout and structure of your site.

Compilation: The SSG combines your raw data with your templates to produce static HTML files.

Output: The SSG outputs a full static site which you can easily deploy to a web server, CDN or a hosting service like GitHub Pages or Netlify.

Why choose Eleventy as your SSG?

There are heaps of other SSGs out there, such as Hugo, Gatsby, Next.js, Jekyll, and they all have their pros and cons. But Eleventy has a pretty good list of benefits:

It’s simple: It offers a minimal setup and easy configuration to get you started.

It’s flexible: Eleventy supports multiple templating languages such as Nunjucks, Liquid, Handlebars, Pug and many more.

It’s speedy: It only outputs static HTML so sites are super fast.

Customisable: Eleventy has a modular approach which allows you to add custom functionality and plugins.

Framework agnostic: Eleventy may use JavaScript for its functionality, but you are not tied to a JavaScript framework. The output has no JS dependencies, however you can intentionally add them in depending on your site's goals.

Markdown support: Eleventy has native markdown support, which makes is easy to quickly write content for your site.

Community: Heaps of online support with detailed documentation, templates, themes and plugins.

Getting started

To get started you will need to have:

  • A basic understanding of Git, HTML, CSS and Javascript.
  • npm and Node.js installed.

Familiarise yourself with the documentation:

This is always the best place to start: https://www.11ty.dev/docs/

Build it yourself

Go to your terminal and install Eleventy using npm:

npm install -g @11ty/eleventy

Create and navigate into project directory:

mkdir eleventy-blog
cd eleventy-blog

From inside your new directory you can initialise a new eleventy project:

eleventy --init

This will set up a basic Eleventy project structure for you to work with. You can then start adding content and templates to build your site.

The quick route

There is an abundance of templates available for you to play around with to quickly get off the ground and running. Some are super simple, while others have a variety of features and plugins. You can view an extensive list of templates on the Eleventy official site here.

Go forth and create!

Eleventy offers a very simple solution for building websites. With its flexibility and ease of use, it’s a great choice for anyone looking to make a fast, efficient, and customisable site.

Coming up next: I'll go into detail on how to get a basic Eleventy blog up and running from scratch.