How this site was built

Published:

I wanted somewhere to post about web development. I wanted to use my web development skills, but not have to do too much maintenance (e.g. security updates) or spend much money i.e. it should be efficient, maintainable and secure 🎉

  • A Drupal 11 site running locally, using ddev
  • My own super-minimal theme
  • The Tome module (with some tweaks) to export a static version of the site
  • Hosting in a Google Cloud Storage bucket
  • Here's the code on Github

Local site

I could set up Docker containers from scratch, as we did at my last job. It's good to understand the underlying Dockerfiles, Docker compose, and how that all fits together, but ddev is really convenient for a freelance web developer. Highly recommended and there's specific instructions for Drupal.

Theming

I'm not a front-ender, but I used to write a lot of CSS and it's good to keep up. I didn't want any distractions, tracking, or anything that would slow the site down so there's no JavaScript, no Drupal CSS and currently not even any images.

I created a new theme, learned about flexbox and put some rudimentary CSS together from scratch.

Static site

I export a static version of the site using Tome, adding a way to avoid Twig debugging in the final output. I then push this up to Google Cloud Storage from the command line:

gcloud storage rsync static/ gs://www.andytawse.co.uk -r --delete-unmatched-destination-objects

Hosting a static site on Google Cloud Storage

I've been using Google Cloud for a recent project, so it made sense to make use of my knowledge. The instructions for this are fairly straightforward: Hosting a static website, which includes setting up an SSL certificate.

The gcloud rsync CLI command above is very much like the mighty rsync tool (which I love dearly), it gives a verbose output that's helpful to understand what's just happened, and has the vital --dry-run option if I'm feeling unsure about anything.