HTML code

A new website using Eleventy

Estimated reading time: 3 minutes

It has been nearly 5 years since I last updated my site. I recently updated my portfolio with a new design, so figured it was time to update the site too.

When I last designed & built my site I was a front-end developer - how things have changed!

my website idea

Previously I had built it using Wordpress, as I had anticipated blogging fairly regularly (this didn't happen!). I had also built a number of commercial websites using the tool, so I knew it quite well.

my wordpress website

This time round I wanted a far simpler approach, with minimal maintenance. My plans for blogging regularly never really materialised, due to workload & family life.

So I looked to Eleventy (aka "11ty"). I'd heard really good things about it.

Eleventy is a simple static site generator written in Javascript. It works with multiple template languages. You can pick one or use them all together in a single project:

  • HTML
  • Markdown
  • JavaScript
  • Liquid
  • Nunjucks
  • Handlebars
  • Mustache
  • EJS
  • Haml
  • Pug
  • JavaScript Template Literals

I'm most comfortable writing HTML, and I ended up using Nunjucks as the templating language, despite never using it before.

I looked through their Starter Projects, but none really offered what I was looking for. I simply wanted one that used HTML, Nunjucks & SASS. I came across the 11ty Sass Skeleton Starter project. Perfect.

I also used advice from this site to help with setting up the actual blog pages.

Whilst all that was going on, I put together a few ideas in Adobe XD. I already had a rough design I used for my portfolio, so I managed to mock up these prototypes relatively quickly:

Adobe XD website layouts

I was also inspired by a couple of CSS techniques I'd come across on the web:

I was concious I wanted to create a site that didn't rely on Javascript, was mobile-responsive and was as accessibile as possible.

I'm proud of the fact that I can say my site is #axeClean using the Axe dev tools!

I appreciate that it doesn't mean it is accessibility-perfect, but it is a step in the right direction

Designing, building and testing the site took me two weeks in total (whilst also learning Eleventy and Nunjucks from scratch).

However there is plenty more work to do, such as:

  • Enhanced blog features, such as pagination & search;
  • Validating in more browsers & devices;
  • Compressing images more effectively;
  • Improving SEO.

I hope you like my new site, and are inspired in some way to have a play with your own site.

The banner image is originally a photo by Florian Olivo on Unsplash