Harry Cresswell

Imprint

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.

Templating

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.

Typography

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.

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 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.

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 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.

Licensing

The content on this site is published under a Creative Commons Attribution 3.0 licence.

Weekly Brain—tactics

Brain—tactics contains a bunch of useful tools, articles and tips. No spam ever, just good honest content. Unsubscribe with one click, anytime.