Design for this Blog

Published: | Updated: | by Julian Knight Reading time ~4 min.
📖 About | 📎None | 🔖None

Outlines key design elements, things left to do and testing links.

Basic Site Design for Much Ado About IT 🔗︎

This blog is a convenient place for me to dump thoughts, ideas, moans, etc. related to Information Management (IM, IMT) and Information Technology (IT). It will also occasionally get postings about other subjects mainly, at least vaguely related to technology and information but sometimes about politics, religion and other musings. These may include subjects such as censorship, so called “intellectual property”, patents, copyrights, etc.

The site has gone through several redesigns over the years.

Originally it brought together some previous sites using Wordpress on Dreamhost. That was too slow and I moved to my own VPS. However, WordPress is just to hard both to maintain and to secure. Also, I really didn’t need much of what WordPress actually does and it always ended up being really slow no matter what I did to try and improve things.

So I ultimately took the plunge and migrated to a Static Site Generator. Initially using Jekyll and GitHub pages but that proved a lot less than satisfactory. Then I stumbled upon Hugo & Netlify with a little extra help from Cloudflare. That seems an almost perfect combination for a blog style site - or indeed many other types too.

So the site is now super-fast, it is privacy-minded as I don’t use any trackers and it is secure, following best practices for web security as well as being rebuilt from secure source-code on each update.

In terms of the look, I borrowed from WordPress’s Twenty-Sixteen and Twenty-Eleven themes and created my own Hugo Theme from scratch.

Key features of my theme 🔗︎

  • Simple, clean layout.
  • Split into general blog posts and specific knowledgebase articles.
  • Header image (my own photo).
  • Uses Bulma.css for styling.
  • Accessible design. Lighthouse audit: Home page 100%, Example page 93% (reading time is low contrast)
  • Simple, clean, common site menu (Generated automatically by Hugo and Styled using Bulma.CSS).
  • Shave/Save page icons that don’t leak personal information to 3rd-parties.
  • Follow-me icons that don’t leak personal information to 3rd-parties.
  • Extensive micro-format and metadata for every page.
  • Active JavaScript kept to an absolute minimum.
  • Google Analytics - limited to non-identifying data only.
  • Disqus - for user engagement. Can leak some identifying data though I’ve minimised it. I’ve not found anything better than this for ease of engagement.
  • Simple search - using Google Site Search. This needs replacing really - still looking for a workable alternative. Targetted advertising is turned off for enhanced privacy.

Features from Hugo 🔗︎

  • Auto-generated menu.
  • Auto-generated category & tag lists.
  • Auto-generated Knowledgebase sections.
  • Uses custom theme.
  • Uses asset feature allowing minimising and merging of css/js assets.
  • Auto-generated Google sitemap.
  • Auto-generated feed.rss.
  • Auto-generated indexes of categories and tags.
  • Auto-generate related pages indexes for each article/post.

Features from Netlify 🔗︎

  • Rebuild and automatically redeploy whenever the source repository is updated.
  • Fix outdated page URL’s using redirects.

Features from Cloudflare 🔗︎

  • Enhanced page caching.
  • Protection of web assets.
  • Denial of Service impact reduction.
  • Alternative page analytics.
  • Enhanced TLS.

To Do 🔗︎

  • Improve look of previous/next paging.
  • Add default article/post image.
  • Replace (or add to) default header images with my own, add an auto-rotate - or maybe assign randomly from a set of images on every rebuild.
  • Find a way to create year/month archive pages - currently no easy way to do this in Hugo.
  • Add W3C and WAI compliance logos.
  • Create a better search feature.
  • For CODE, on hover, expand width for better view (probably need to change z-order too).
  • Find a way to include lists of backlinks for each page.
  • Add my Feedly links to “follow me”.

Site Tests 🔗︎

Security Testing 🔗︎