How I built this site

This page shares the technology and techniques I used to build and host this website. If you have a specific question drop me a message, I’m always happy to talk websites.

Templating #

The website is built using a static site generator called Hugo. I’m using a custom theme I built on top of Hugo for the front-end.

Asset pipeline #

All assets are processed by Hugo using Hugo Pipes. This means I no longer need a build tool like Gulp to do stuff like compile SCSS to CSS or concatenate and minify JavaScript.

Typography #

Typography on the site is set using system defaults, meaning text will render differently depending on your operating system. Personally I like the way this happens. It’s less of a headache to work with browser inconsistences instead of against them.

I use a fluid type mixin developed by Mike Riethmuller to make it responsive for different screen resolutions. Type sizes are set using 2 modular scales, 5:6 — minor third for smaller devices and 8:15 — major seventh for desktop.

I recently started using Utopia by James Gilyead & Trys Mudford, to create buttery smooth fluid responsive type. The exact config uses the Major Second modular scale for smaller screen resolutions and the Major Third scale for larger resolutions.

CSS methodology #

I follow SuitCSS methodology developed by Nicholas Gallagher when working with components. It’s very similar to how you might use the BEM method, however I prefer the way it looks. Otherwise theres not much in it.

I organise my SCSS partials loosely based on ITCSS in terms of order of specificity, however I opted to use a more conventional system for file naming and folder structure.

Deployment and hosting #

The theme and content which makes up this site is stored in a GitHub repository and served on the Jamstack by Netlify. Netlify is a great CDN which also takes care of TLS certificates for HTTPS, and continuous deployments. That means when I push changes to Github it automatically deploys updates to the live site.

All the code can be found on GitHub. Feel free to use it for your own learning and development.

Form handling #

All form handling is taken care of by Netlify, so when a visitor submits the form, Netlify collects the submission and notifies me via email. If you’re interested in how all this works, I wrote about it in Static Site Form Handling with Netlify.

Media content #

All media on the site (images, GIFs etc) is hosted by Cloudinary, a cloud based storage service. This way I’m not committing large media files to GitHub and can avoid slow build times. Cloudinary provides automatic responsive images and compression with ’transformations’ set in the URL. You can read more about how that works here.

I’ve now switched to a simple responsive image workflow which utilises the power of Cloudinary URL transformations and automatic creation of next-gen image formats. The approach avoids the need for JavaScript and ensures the most optimum format is rendered.