Before I wrote a single line of code for the site you are currently visiting, I asked myself:
“What’s the absolute minimum I need to get the job done?”
That question helped me focus everything: from design decisions to tool selection and building.
I explored several diffent avenues when it came to tooling: I looked into Wordpress, the Jamstack and static site generators.
Since I had built my previous blog from scratch for Wordpress, I researched what Wordpress had to offer in regards to page speed.
I found that Sustainable UX’s website was built on Wordpress. Jack Lenox had built Susty WP, a minimalistic Wordpress theme that built explicitly with sustainability and web performance in mind.
Wordpress has a 60% share of the CMS market. So Susty has such potential for making the Web faster and more sustainable.
So then I thought about some of the pros and cons of using Wordpress to build my personal blog:
|Great blogging experience||Dealing with updates and plugin dependencies|
|App available for blogging||Writing PHP for functionality and templating|
|Post new articles without rebuilding||Updates to website styling and functionality still mean rebuilding|
|A vague feeling of not being in control of the stack|
That last downside – a vague feeling of not being in control of the stack – did it for me. I opted against building this site with Wordpress to see how I could get by with less.
“Should I build my personal site using something like Vue or React?”
In Ming To’s course “React for Designers”, I learned about building sites using Gatsby and React which pulled content from Contentful CMS via GraphQL. I did like how quick and easy it was to work with Gatsby.
Then I downloaded a few starter projects and built a Gatsby site from scratch to see what it was like. Then I weighed the pros and cons of building a personal blog using React + Gatsby:
|“trendy”||quite a big stack|
|Nice dev experience||A bunch of moving parts|
|Performant||Still a lot of front-end JS|
Static Site Generators
After my foray into Gatsby + React, I stumbled upon this excellent overview of static site generators.
I had been building web prototypes or one-pagers for years using the Pug templating language, which – like CoffeeScript – is whitespace delimited (no extraneous characters), minimalistic and super quick to read and write. So I searched for static site generators that work with pug and found Eleventy, which seemed to tick all the boxes:
- works with various templating engines
- lets you write blog posts in Markdown
“That’s perfect!”, I thought, firing up my console and pasting this into it:
npm install -g @11ty/eleventy echo '# Page header' > README.md eleventy
Awesome, I’d generated a super-minimal static site minimum viable product that gets the job done.
Then I cloned some starter projects to see how things worked behind the scenes and was happily surprised to see that Eleventy could also:
- work with Gulp and Sass
- work with Netlify for build automation (and hosting)
- work with Netlify CMS
- be extended with shortcodes
…and much more – optionally. I could determine precisely what minimum development stack I needed and progressively add on a case-by-case basis.
So at the time of writing, my stack for the site you are currently visiting has – aside from Node and 11ty – only four dependencies:
gulp-responsivefor generating various image formats and sizes
clean-cssfor minifying CSS
terserfor minifying JS
Of course, as the whole thing is Node-based, so I’ve got a folder full Node modules. But in terms of developer experience, it’s dreamy 🏝.