£0/$0/€0 That’s how much it just cost me to get this (sort of) beautiful page to your device, let’s go on an adventure

You can split the journey of this site in to 4 steps; How it’s Made, Stored, Hosted, and Delivered.

Framework (How it’s made)

Hugo is a brilliantly simple static site generator (why static? I’ll answer that later) drop in a theme create some markdown files in the content/posts folder, run the hugo command and you get a folder of html files ready for the browser

Open source software - £0 (I may donate if I use this site a lot though 😊)

Storage (Where it lives)

The developers favourite, github, this site is just a github repo (currently private) and the images are hosted on a second github repo for all the static content. Github’s basic text editor and file upload mean if I’m on my phone or a device without ssh or git or whatever all I need is a web browser and I can upload or edit a post 😁

A second github repo stores static content I don’t want to get mixed in with my hugo files (I like organisation okay!) images are dropped in here at the moment, also seperating this means if I decide I need my images hosted in some more optimised way they’re all in one nice uniform place

Github basic plan (unlimited private repos) - £0 (I actually have pro because my free student stuff hasn’t expired yet)

Hosting (Where it’s built)

I suppose the site kinda lives here too actually 🤔🤔 … anyway whenever a new change is pushed to the master branch on Github Netfily (who if you mispell in google you end up watching season 2 of stranger things) does a load of stuff, enough stuff I’m going to give it to you in list form (this is all done separately for the static.dallasthe.dev site and the blog.dallasthe.dev site)

  • First it grabs the changes to your repo and pulls them down

  • Then it runs the command you’ve setup to build the site (in hugos case the command is hugo --gc --minify)

  • If the build step is successful it, take the contents of the build directory and publishes them to a netifly subdirectory (the one for this site is https://keen-babbage-f7783f.netlify.com/)

Now that subdomain isn’t very… aesthetically pleasing, so we get the option to point our own custom domain at it, which brings us tooooo

Netfily free tier, as many builds as you want one at a time - £0

Delivery (How it gets to you)

Cloudflare who if you ask any of my friends I should be a paid advocate for, Cloudflare do 2 things for this site 1) they handle the dns, which points to Netfily and 2) they cache all the requests for static content on there edge cdn, a simple page rule

Cloudflare page rule

Will cause all the content flowing through cloudflare to be stored nearer you lovely user for at least 12 hours, Another benifit of Cloudflare is they have crazy good peering (What’s peering?) Peering is basically (very basically) the choice of route through the internet from my server to your screen, think of Cloudflare as a very very good satnav 😂

Cloudflare Basic tier - £0

Updating the site

Now some of you may have picked up on an issue, Cloudflare caches for 12 hours, what about when I post something new 😲 it won’t be seen until cloudflare grabs a new copy of my home page, well cloudflare have a lovely cache api now on paid versions of cloudflare we can do some clever stuff to just delete the files we changed, in fact on the free tier with some work we could, but I have better things to do and deleting the whole cache and letting netlify serve up content for a bit is really no skin of my back so we change out build command for running the hugo command to running a little script to wipe out cloudflare cache

#!/bin/bash
set -e 
set -o pipefail

echo "Running Hugo"
hugo --gc --minify

echo "Purging Cloudflare"
curl -X POST "https://api.cloudflare.com/client/v4/zones/${CF_ZONE}/purge_cache" \
     -H "X-Auth-Email: ${CF_EMAIL}" \
     -H "X-Auth-Key: ${CF_API_KEY}" \
     -H "Content-Type: application/json" \
     --data '{"purge_everything":true}'

(You can set those enviroment variables in netlify v cool)

Summary

£0 that how much we’ve spent on this, it cost us some time, about 1~2 hours maybe, but a lot of that was tweaking hugo which you could do for weeks and still think it could look better if you’re me, anyway new shiny cloudflare workers are out on the free plan so I’m gonna go make a view counter for this site…. or I could just hardcode 1 View under all the pages 😍😍😍

Real talk though, the web is great at the moment, people are building stuff to make site smaller and more efficent and others are building products that deliver those sites in crazy fast times, shits looking good man 👍👍

– Dallas out