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’d be happy to help.
I’m using Hugo, a Go based static site generator, primarily because it’s flexible and lightning fast. The site uses a custom theme built on top of the Victor-Hugo boilerplate, a great starting point for a Gulp and Webpack assets pipeline. I made a few modifications to include SCSS support and a responsive image build task, which generates both retina and non-retina image sizes.
Type is currently set using system defaults, meaning it will render differently depending on your operating system. I’m using 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.
The CSS is written in SCSS, and follows SuitCSS, a component based CSS methodology developed by Nicholas Gallagher. It’s pretty similar to the BEM method, I just prefer the syntax. 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. I have Sourcemaps set up so go ahead and inspect element to see what’s going on. Alternatively you can head over to github.
Deployment and hosting
The site is hosted directly from a GitHub repository and served on the JAMstack by Netlify. Netlify is an awesome 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 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.
All media on the site (images and GIFs etc) is hosted by Cloudinary, a cloud based storage service. This means I don’t have to commit media to a git repo and suffer from 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.