Version 1.0
published: Nov 2, 2016 | last modified: Nov 2, 2016
estimated reading time 6 minutes

The initial release of bytes and bards is ready to go live. This first post in the series presents my goals and boundaries for this site.

[Goals and Boundaries](#goals-and-boundaries) | [Implementation](#implementation) | [Summary](#summary)

Way back in the early days of the World Wide Web, when WordPress didn’t exist and FrontPage was a viable option for getting a site up and running, I dabbled as webmaster for a site representing a guild in EverQuest. This was exciting as this was my first foray into both MMOs and the construction of web pages.

I remember taking great joy (and at times pulling out hair) in setting up and administering the site (the guild was Gryphon Alliance on Seventh Hammer). Other than the forums, the entire site was static and handcrafted by myself.

I now want to establish a web presence for myself and my interests, and in this desire remembered the fun I had building that site. I also remember some of the trials and tribulations associated with maintenance of the site. I again want to handcraft a simple static site. Though minimal, it should take advantage of wisdom gleaned over the years.

This may seem a contradiction; I do not want the maintenance of this site to be a second job, but I also want it to be useful (at least to me):

Goals and Boundaries

The purpose of this blog is to provide a central place I can get to from just about anywhere that organizes my many interests and projects. It will also provide a place for information dumps and possibly conversations with those of like interests.

For the actual generation and maintenance of the blog I will be using Hugo. After looking at several different static site builders, I settled on Hugo for what I felt was a good balance between simplicity of use and flexibility of control.

The conversation part will be difficult, as I am not (initially at least) including any commenting facility. Many will balk at this, but I am trying to start out 100% static with no reliance on outside resources (other than the web-server and the consuming browser). The email for the site is available (see About), and any comments, suggestions, gripes, and conversations using that email may get fed back into the site content.

Not relying on any outside resources includes any linked javascript libraries. Any code highlighting will probably be done offline and embedded before publishing. To do this I probably will be setting up and using Pygments.

Above all of this though, I am looking for readability, leaning heavily on the wisdom of Matthew Butterick and his book Practical Typography. In summary, typography for the modern age — taking advantage of modern technology to provide a satisfying reading experience on modern devices. I highly recommend the book; free online as a try-before-you-buy. Matthew is a typographer and the book is a great advertisement for the fonts he has designed.

The general framework of bytes and bards will include a blog and a few static pages (home page, About, etc.). Some posts will include meta-data allowing grouping and presentation specific to a defined series of posts — a prime example being the series this post is in.

The taxonomy for the site will include:

Visiting the taxonomy page (any meta-data link — one of the category, series, or tag links — will take you there) should display all category, series, and tag labels with their associated posts in excruciating detail.


I am using the block model Hugo provides — a single monolithic page that has one or more call-outs in place for content. Then in the supporting files (single.html, list.html, etc.) the call-out is defined, thereby replacing the call-out in the baseof.html page. I did this to maintain a better big picture of the layout in my mind, and face it, the layout of the site is nothing extravagant. An interesting thought — can Hugo do a call-out from a call-out? Have to look into that.

I love tweaking the look-and-feel of the site, but really dislike changing every single color that is the same in the various places in the style sheet. Because of this, I have unconventionally created the main style sheet for the site as a “partial” template. this allows me to define names for the colors in the config.toml file, use the names in place of colors in the style-css.html partial, and then change the specific colors in a single place in the configuration file; no more search and replace. Yes, I know there are several macro facilities available for preprocessing source. I want to keep the work-flow and processing requirements to a minimum. Remember, no second job, just play.

Shortcodes are where it’s at. Only a few at the moment, but I like it! Though I will still be playing around with this and that, I am publishing the site.

Lastly, I added an @media print entry to the main style sheet and made appropriate adjustments to the templates. Now if a page is printed (right-click to PDF for example, which I do quite often) the metadata — categories, tags, navigation links, etc. — are not included in the final printing.


The initial site now conforms to my lofty goals and self-imposed boundaries, and playing around in the site from the desktop using Hugo as the server appears to work fine 1. The next step is to create a post or two for each category and publish the site to test it live.

If I change anything about the tag name — “ever-quest” or “everquestt” for instance — it then works fine. I’ve even tried changing the order of tags in the post and the order of elements in the page with no change in the behavior (currently using Hugo v0.21). I will be investigating this further.

  1. Curious thing, marking a post with the tag “everquest” results in the link generated for that tag seeming to point to the correct place in the taxonomy page, but, with the Hugo desktop server, actually points to a page with nothing for content except:


This is a post in the "building-bytes-and-bards" series.
Other posts in this series:

tags:  bytes-and-bards  ever-quest  hugo 
series:  building-bytes-and-bards 
categories:  hack