Colophon

Colophon

Content management: Hugo

I’ve recently switched to Hugo from vanilla HTML. Why? Mostly to learn a new tool. It’s certainly a bit of overkill for a largely static site.

Frontend layout and styling: Bulma

So, if you’re here, you’re probably a techie and already have your answers. At least, anyone this curious already hit View Source in your favorite browser. What, you didn’t!? OK, I’ll wait…

I actually considered a few choices–there are certainly many and I have my short list of favorites. Most recently, I’ve been using Vue.js with Vuetify to build front-ends. Those would’ve been familiar and excellent choices. Indeed, you can pretty much build any front-end application with those frameworks as a base (or even desktop apps for that matter using Electron).

Let’s face it, though. This is a static portfolio site, not an application. I simply don’t need all that overhead. That brings us to some tried-and-true frameworks like Bootstrap, Foundation, Milligram, Pure, Semantic UI, UIKit, and Bulma, my ultimate choice. All are terrific frameworks, so you can build terrific things with any of these–I just made a personal choice.

  • Bootstrap: popular, but tired
  • Foundation: popular, but I found the default styling a bit unpleasant
  • Milligram: nicely done, but lacks some of the components I wanted to use out-of-box
  • Pure: also nicely done, and again lacking some components I wanted to use out-of-box
  • Semantic UI: very complete, though seemed quite a step up in complexity to get going, and I’m trying to keep it simple
  • UIKit: also very complete and was on my short list
  • Bulma: it’s small, has a simple grid system, easy-to-learn syntax, zero JavaScript required

Honorable mention: Material Components for Web. I simply love the material look–these days–and this was a strong contender. However, this framework is largely in transition from Material Design Lite. The class styles are also very verbose compared to some of the other frameworks.

Hosting: Firebase

Any self-respecting techie interested in this site would have looked up my host provider as the second order of business.

Why did I choose Firebase? Honestly, it’s a great service for static hosting because it’s basically a one-step deploy. I could have chosen to host on a static bucket (GCP or AWS), but those would be extra steps and would require a collection of services to manage. Not hard, but extra. Furthermore, I wanted HTTPS out of the box and Firebase provides that.

Codebase build tools: VS Code + Hugo

Visual Studio Code is a fantastic product. It’s lightweight and loads pretty fast, even with extensions. Oh yes, extensions. It feels like the best hybrid of a full-fledged IDE (see Jetbrains wonderful IntelliJ, Microsoft’s full Visual Studio, or Eclipse) and power text editors like Sublime, Atom, or Brackets.

Lastly, just because it’s a static site doesn’t mean you can’t optimize your code. I recently switched from a modularized Nunjucks & Gulp setup to Hugo. Conceptually, it’s roughly the same, with Hugo being more complicated on setting up your file structure, layouts, etc. but with a robust build tool (versus rolling your own Gulp build file).

You may be wondering why a colophon in the first place. Why give away your secrets?

First of all, it’s no secret–just View Source. Secondly, it’s not having the best pots and pans that makes a great chef, now is it? I’ve seen some great frameworks used in horrible ways, and also seen really fantastic applications constructed with older technologies. Though, I must say, if you’re still writing in Perl, you’re probably well below the limit of even mediocrity these days.

Nevertheless, I hope the above is useful, and if you have suggestions, I’m always looking for a better way, too. Cheers.