Harry Cresswell

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’d be happy to help.

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.

CSS naming #

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 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 site is hosted directly from 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 storage #

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.

If you have any further questions drop me an email or a tweet. I’d be more than happy to help.

Monthly Newsletter

Each month I share a roundup of articles, tools and tips for designers and front-end developers. Check out past issues and sign up to get on the list.