Making a static site using 11ty

This site you're reading right now was originally a WordPress site. I had to give up the hosting of the WordPress site and find an alternative.

The problem with WordPress

Well, there's not really a problem with WordPress, it's a perfectly good platform - albeit a little bloated and faffy!

Another issue, especially within a cyber-security conscious University hosting, are the vulnerabilities of hosting a dynamic website that uses php scripts and a MySQL database. While WordPress is definitely a lot better security-wise, I do remember the days of constant bot bombardment and spam commenting, not to mention the occasional site hack!

Database-driven sites can be a little slow due to the database being queried in order to load the content.

While it's nice to have a content management system, it's not a great deal breaker.

Other solutions

While discussing closing down hosting, it was suggested to use Google Sites. While Google Sites is actually quite a good platform for non-web developers, it's not really the solution I - as a seasoned developer - was looking for.

Static website builders

I've been toying with static website builders for a while now. I first cut my teeth learning to build static websites in Dreamweaver, then coding HTML and CSS pages, far too many years ago!

Then a few years ago, I stumbled on static website generators. I played with Ruby-based Jekyll and a few others and recently got interested in Eleventy - I just found it's name quiet funny and reminded me of The League of Gentlemen's Tubbs:

Twelvety Eleventy

Eleventy is a Node.js based framework that takes markdown files and generates a static website for you.

I won't go into Node.js (because I don't really understand it enough to explain), but Node and all the packages do all the hard work for you. There's a bit of work to be done setting up the template files - using the Nunjucks templating language, but it's not too hard!

I was helped along the way by following this excellent tutorial (there are more on the 11ty website) where I created a simple site from scratch, then modified this Eleventy boilerplate site (also available off the 11ty site)- modding the template files and CSS.

You can look at the code for this site on Github.