As they say, we “stand on the shoulders of giants”, and this site is certainly no exception.

Two previous iterations are still online here and here, having been built in Octopress 2 (with thanks to Paul Ser) and RapidWeaver, respectively. Ancient history, but my very first blog was on Radio Userland!

Latest release

This release represents a major upgrade to my process and site. After a couple of years of getting used to the basics of git, github and front-end development, I finally took steps to implement a workflow based on node and npm, using gulp.js to optimize, minify and bundle my css and javascript, for use by Hugo.

Go Hugo

Logo - Hugo SSG
Logo: Hugo SSG
Logo - Hugo SSG
Logo: Hugo SSG

Hugo is a Static Site Generator, which makes it simple to use html “templates” to merge your css, javascript, images and content written in the Markdown format, into a publishable website.

About Hugo, we learn:

Hugo is written for speed and performance. Great care has been taken to ensure that Hugo build time is as short as possible. We’re talking milliseconds to build your entire site for most setups.

In fact, it takes far longer to upload the site to your web space, than it does for Hugo to generate it.

Hugo is downloadable as a single binary file, written in Go, which means it will run on just about any platform, just by running the file. There are no complex installations and dependencies to deal with.

Site Look

Logo - Basscss
Logo: Basscss
Logo - Basscss
Logo: Basscss

The look of this site comes from a couple of different components.

First, the stylistic base of the site comes from a fantastic and comprehensive css library called “Basscss”. Basscss is:

A lightweight collection of base element styles and immutable utilities designed for speed, clarity, performance, and scalability.

It allows you to have consistency in your basic styles, responsiveness to support mobile users, and acts as a great starting point for any site.

Screenshot - Exljbris Calluna
Screenshot: Exljbris Calluna
Screenshot - Exljbris Calluna
Screenshot: Exljbris Calluna

As for Type Faces, I had been using the excellent and beautiful Alegreya, but changed to the Calluna Family and Freight Sans faces, because they support more of the OpenType features I wanted to take advantage of. They’re served via Adobe Typekit, and you can see the Adobe Auto-generated Colophon for more info on these.

Custom styles for typography were implemented using Adobe’s recommendations for OpenType, some techniques from Web Typography and, some css from Typeplate.

The icons you see here and there are from sets purchased via Icomoon library, and from Agne Alesiute’s Origami Animals collection at The Noun Project. This time, I tried using all SVG icons. We’ll see how that goes.

The photos on this site are mine, unless otherwise noted. I enjoy photography, and have a whole lot of photos I can use, so I though I would weave them throughout the site, featuring them in banners, accent squares and galleries. My galleries are being displayed by the slick javascript nanoGALLERY.

Hosting

Logo - Webfaction
Logo: Webfaction
Logo - Webfaction
Logo: Webfaction

This and a few other sites I manage, are hosted at the rock-solid Webfaction. Great cost-performance for developers, in my opinion. I have not had trouble in years of use, and they respond very quickly to support requests.

Comments are hosted on Disqus.

DNS is hosted on Amazon Web Services Route53, a really robust and fast DNS service.

The repository for this site is hosted at Github.

Semantic Markup

Logo - JSON-LD
Logo: JSON-LD
Logo - JSON-LD
Logo: JSON-LD

Considering Semantic HTML, I’m using some now-well-accepted Microdata such as the Person Schema, and Microformats 2 such as h-card with some others sprinkled in.

To mark up my About page with the Person Schema, I’m now using the much-easier JSON-LD, because it’s officially supported by Google. It lets you put the markup in a script tag, which you can simply include in the page. No more headaches from interspersed itemscope, itemtype or itemprop.

TL;DR Thanks!

Warm thanks and regards to:

Steve Francia (@spf13) and contributors for the giant amount of work in creating Hugo, and to the Go language team itself. Bjørn Erik Pedersen (@bep) has been a great help on the Hugo discussion forums).

@jaydenseric for “barebones” which taught me a skillful way to organize a site, and helped me modernize my front-end dev workflow.

@ai, @ben-eb, @moox and many others for the massive and important work on “postcss”, “postcss-cssnext”, “cssnano” and other various modules, helping me to use the latest css, and get that transformed and bundled, ready for production.

@jxnblk for the wonderful “basscss” css foundation library.

Jos Buivenga / Exljbris and Joshua Darden / Darden Studio, for the beautiful type faces.

Logo - Humans.txt
Logo: Humans.txt
Logo - Humans.txt
Logo: Humans.txt

Lastly, I even have a humans.txt file. Humans.txt is an attempt to standardize on a way of making a site colophon, in text format. If you click it, you’ll see some of the same information as on this page, in a simple text format.

Now to get down to the content creation!