For those interested in how I built this site, here’s a quick overview. If you don’t find the answers you’re looking for or 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 the code can be found on GitHub. Feel free to use it for your own learning and development. If you have any questions drop me an email or a tweet. I’d be more than happy to help.
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.
The content on this site is published under a Creative Commons Attribution 3.0 licence.