Harry Cresswell

Imprint.

This page shares the technology and techniques I used to build and host this website. You will also find licensing, privacy and legal information.

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.

Harry Cresswell is the trading name of: Studio HC Ltd, Company No. 9442649, 122a Spa Road, London, SE16 3FF.

Privacy Policy

Here‘s my privacy policy for those interested in what data I collect, what I do with it and how I keep it safe.

If haven’t found the answers you’re looking for or have a specific question drop me a message, I’d be happy to help.

Weekly Newsletter

Braintactics is a weekly roundup of articles, tools and tips for product designers and front-end developers. I send it every Friday morning.