Alt: Cybergate9.Net

Cybergate9.Net

Online ramblings, current & historic, by just another human bean

Restyle and Rebuild

1st Notes from this 2021 rebuild..

ShaunO

3-Minute Read

Banner Image

Having built this web site a few times over the past 20 years (statically, on my own framework, on Wordpress etc.) I mused for a while before yet another rebuild in 2021.

Even though using server side technology to dynamically render everything is even simpler these days than in the past, one of my desires for this build was to keep ‘the moving parts’ to a minimum - the easiest way to do this is to use one of the static site generators. My choice is Hugo as I’ve used it before, it’s fast, and I have a soft spot for Go.

Requirements

So, having chosen Hugo everything will be rendered ‘at home’ and FTP’d up to the webserver. The hope is to fulfil these requirements:

  • server side requirement is just a web server
  • modern look and features (must be fully responsive on any device)
  • able to degrade elegantly (i.e. no javascript)
  • all writing in markdown with flexible page metadata
  • blog structure primarily, but with flexibility to structure otherewise if desired
  • ability to showcase photos in banners, articles, galleries
  • ability for me to develop full EXIF displays for galleries

Modern & Reponsive

Don’t reinvent the wheel - use a template, I’ve chosen Future Imperfect as my base.

But even this template can be a bit ‘heavy’ in parts, so I’ve chosen to off-load, or alter:

  • all the language translation stuff
  • academicons, I don’t need them
  • needed to replace Google Analytics script with new one for GA4

Another thing about this template that is good is that you can showcase your photos as banners on every post, the bad of course is that for that to look good you’re going to have to create all these banners. For lightroom the simplest way to handle this is:

  • to create an banner export preset with long edge pixel count at 840px (other settings as you choose, me - jpg at 85%, rename to B-filenumber etc.)
  • create a virtual copy of your original image and crop the virtual copy to a 3.2:1 aspect ratio (lightroom will remember this so in future you can just choose 3.2:1 from your develop-crop&straighten list)
  • export using your banner preset
  • suggest saving banners in /static/img/banners

Tweaks and Twiddles

  • do some font efficiency as per this article
  • do some basic efficiency testing via google insights
  • offering your website via https:// is pretty much a given these days - depending on your hosting this may be hard or easy. My web hosting can apply and cycle https:// certificates automatically so pretty easy, just needed to check all is working

Recent Posts

Categories

About

Online ramblings, both current and historic, by just another human bean