New Website! (2021)
For what feels like the millionth time, I’ve redesigned my website. In this blog post I’ll discuss some of the changes and the reasoning behind them.
A Blog
I’ve made a few attempts at keeping a blog, and every time so far I’ve failed. I can’t promise that I’ll be more successful at writing regularly this time around, but I’m going to give it a try. A word of warning for potential followers: I make no promises that my blog posts will be focussed on a single subject area. I anticipate that most of my blog posts will be on technology, travel, or countryside walks, but who knows!
Completely Custom
Conventionally I would start building a website from a template of some sort, or at least Bootstrap. While there’s nothing wrong with this approach, in this instance I wanted to start from scratch. I’m not sure if I got this idea because I started a new role as a full stack software engineer or if I did it as a challenge (probably both), but either way it’s been fun getting re-aquanted with CSS layouts and updating my knowledge with the latest technologies that work in all the mainstream browsers.
Aesthetics
I’ve always been a fan of red so I retained the red colour scheme from my previous (2017) website. I also liked the social icons from my previous website so have kept them (using icons from Font Awesome), although I may relegate them from the header to the footer or some other less prominent location. I had some quite specific goals for typography – I wanted a sans-serif font which was lightweight, open source, and properly formed the letter “a” (i.e. single-storey not double-storey) – so I selected Mulish.
I also re-used the background image from the previous version of my website (a photograph of a ThinkPad laptop as I’ve always been a fan of their high-quality keyboards and rugged construction), which I display on the home page. I make it (appear to) load quickly by initially loading an inlined and heavily compressed version of the image weighing less than 3kB and then loading the “proper” version (~50kB) after the rest of the page has loaded. In the future I may use BlurHash as an alternative to the inlined JPEG, although this will add an additional JavaScript library.
Still Static
While this website has more content than the previous version it’s still fundamentally a bunch of static HTML pages. I used to be a strong advocate for WordPress and while it still has its place I think that static, pre-generated websites are generally better from a technical perspective (e.g. they’re much easier to cache). This version of my website is generated by Jekyll, globally deployed on Netlify, and (as always) 100% open source on GitHub.
I use the Jekyll Minibundle plugin to manage the assets for the website. Specifically, at build-time it:
- adds an MD5 digest to the file name of each asset (image, CSS file, JavaScript file, PDF, etc.) as a “fingerprint” so that assets can be cached indefinitely
- bundles CSS into a single file
- minifies the CSS using UglifyCSS
For additional performance I place Cloudflare in front of Netlify as a cache. This should slightly improve performance as Cloudflare use more datacentres than Netlify, especially given my fingerprinted assets can be cached indefinitely. In future I may migrate this website to Cloudflare Pages, but I think Cloudflare pages is missing a few features which I’d want before leaving Netlify. Ordinarily Cloudflare would break Netlify’s HTTPS, but I get around this by using a wildcard Cloudflare origin certificate.
Closing Thoughts
I’ve learned a lot developing my personal website from scratch, and I’m looking forward to learning more! I’m hoping that I’ll succeed in regularly writing on this blog, so please stay tuned via Atom or subscribe to email updates for future posts. At this stage there’s no comment facility on the blog, although readers are welcome to send me comments or feedback via my contact page. It looks like there are numerous ways to add comments to a Jekyll blog, so perhaps this will be the next major technical update?