Building b-links

Home Baking a Static Site

Whilst I could have used any number of static site generators to build b-links (11ty, Gatsby and Jekyll were all considered), I decided to home bake something with a selection of tools that I was either more familiar with or wanted to learn. In fact, initially I hadn't even planned for it to be a static site, but some kind of SPA with a few static pages that depended on an API for content.

After deciding early on that I wanted to use Pug for my templates, Sass as my CSS pre-processor, and keep JS very light (i.e. framework-less), I really just had to decide how to pull the pieces together. It was here that I discovered Parcel, and immediately fell in love with it. With a really small amount of effort - mostly consisting of adding it with Yarn and pointing my build script at the right place - I had something building that showed real promise, and has laid the foundations for where I am today.

Skip forward several months and I feel that I now have a fairly solid build process for b-links, consisting of a few Node.js tasks to clean out directories and the the following:

• start - a Parcel task that builds and serves the main site from a dist-serve directory (after clearing it out first), and hot-reloads it as I make changes.
• start:management - a Parcel task that serves the management component of b-links, which lets me add and edit content in the browser, rather than in code.
• start:api - a Parcel task that starts an Express-based API - used for adding and editing content (like this post). On adding either a post or link, or editing a blog post, the API takes a JSON model representing the content from the Management page, updates a JSON file containing all of the content¹ and runs a build task that updates and creates the relevant pages within the code base.
• build - a Parcel task that cleans the dist directory and then builds first all content from the JSON data files and then moves on to generating the rest of the site, minifying the code as it goes. All in all this <25 second process creates a site that (as of today) is less that 400KB, and that includes 4 font files to support dyslexic users.
• test - A Jest test task, that runs all of my unit tests - this is run in my CI pipeline before any kind of deployment.

So there you have it, a whistle-stop (very high-level) tour of how the b-links site is built! Feel free to jump into the code and try it out for yourself.

Notes

1. The JSON files containing content - one for blog posts and another for links - are currently stored in code, rather than a db, meaning that a full code deployment is required for every change of content, but that is a small overhead considering the size of the 'experiment' that is b-links. ↑