BeerMetalPC.com

on Projects, Jekyll
BeerMetalPC.com

A high level explainer as to what services I was using before this site, why I built this one, and the design decisions made in the process.

Updates as of 2024-03-05

Revisiting this post as there’ve been some significant changes in the backend for this site. I’ll provide an update via another post and provide a link here when ready. Here’s a quick summary in the meantime.

  • Friendship ended with Netlify, now Github Pages is my best friend. Turns out Netlify doesn’t cap their free tier and sends you a bill well after you’ve exceeded the limits.
  • Google has sold off their Domains registrar service to Squarespace. I’ve moved over to Namecheap.
  • In conjunction with the abuse/DDOS risk shown with Netlify, I’ve delegated the DNS records to CloudFlare under their free tier services. This is unfortunate; they do have a good product and management interface, but I will not use their paid services and neither should you.

Why did I need a site?

My need for a personal site arose out of frustration with commercial off the shelf offerings in 2022 and a desire for a personal project to obtain more happy brain chemicals. I’ve wanted a (semi-)professional looking site that could be associated with my public facing social media, directly host my own content without added crap to maintain like comments (ffs just @ me on Twitter), and link through to my other public facing accounts.

The habits formed by being raised in an inherently-frugal Pennsylvania Dutch family demanded something I could host for cheap, preferably free, and that I could spend near-zero time maintaining. Static sites came to mind by looking at the personal websites of several persons in infosec Twitter. (@varcharr’s How I Made my Website was an immense help here) So far Jekyll seems to tick all the boxes. ✅ Free. ✅ Relatively easy to build and maintain. ✅ Ample support, documentation, and how-tos. ✅ Did I mention it was free. That’s really nice.

What’s with the name?

I have another unique handle I’ve used for online gaming purposes for years, but as I’ve started doing more public and professional interaction it became clear I needed another that was separate or at least at arms length from games. BeerMetalPC came about as a half-asleep showerthought: you’ve heard of a bare metal computer. What about beer metal? 🍺🤘💻.

I’ve aligned most of my social media to this monicker, and had the BeerMetalPC.com pointed at other services. It’s now associated to this site, and I’ve also pointed FrankHelm.com here as a permanent redirect for the sake of consistency.

What was I using before?

Previously I had made use of About.me, Linktree, and a couple others I’ve forgotten, but eventually settled on Lnk.bio. Lnk.bio was easy to set up, used a wide variety of identity providers, had very good customizations, and had a reasonable one-time payment option for premium features rather than the subscription model most of their competitors use. I’d still recommend them if you need a personal links or landing page easy, cheap, and fast.

image

My Lnk.bio page March 2022 prior to standing up this site.

Setup

Development

Offline Environment

I did most of this work on a 2021 Macbook Pro, M1 / Apple silicon. Admittedly this slowed my progress a bit as I was both learning macOS at the time, and having to fight my way through version weirdness to get all the necessary Ruby and Jekyll tools and dependencies installed. Once I was able to get both Ruby 3.0.x and Jekyll 4.2.x installed, I had some trial and error to get both Bundler and webrick installed and working. I’m including a few links below that I found helpful.

I’ve done all of the first time setup and content creation locally, with Github Desktop for the commit to a private repo once v1.0 was ready to ship.

Hydejack

Hydejack Pro stuck out as a gorgeous Jekyll theme with very good documentation, plus all the features I would need. Admittedly I could easily have gotten by on a free license, but I was jumping in with both feet and wanted to tinker with everything under the hood, and felt that given the means it was only right to duly compensate the theme creator for their time and effort. Being able to start from Hydejack’s prebuilt starter kit was an immense benefit.

Hydejack, or perhaps Jekyll itself does have some frustrating quirks with how categories and tags are handled. Yes you can do some more granular sorting by categorizing posts and then sorting the tags, but at least for the time being this feels unnecessary for the small amount of content I have / will have. I’m proceeding with pretending that the post categories feature does not exist. Similarly, Hydejack’s projects feature has felt like a blog post missing some bits, e.g. projects with tags don’t display in a the tag page/collection. Again, using only tags has largely solved this problem, I just make a distinct tag for projects instead.

Google Fonts is disabled in _config.yml because I don’t want to have to attest or explain anything more in the Privacy Policy than I must. If it causes privacy wailing and gnashing of teeth, and isn’t serving a specific desired feature or function, I threw it in the bin.

I did learn the hard way that Jekyll can be very tempermental about spacing and alignment in the underlying Markdown files. Be deliberate. Work from templates.

Lazy Ren’s Modifications

Another Hydejack user, Lazy Ren, made a blog post on how they modified the Hydejack theme that links through to how to guides. Specifically, I made use of the Applause button, and the Tags List page.

Applause worked out of the box and I would highly recommend it for other Hydejack users. But for the latter, because of my decision to only use tags, I had to remove every reference to categories and cut out the second nested loop in /_layouts/tags.html to get the featured_tags to display on the page semi-correctly. Not a huge problem, just another source of some trial and error; if you know what you’re doing you can make the tags list prettier than the hatchet job I’ve done.

Also: Ren’s description of type might seems a big confusing. Go to /_featured_tags/ or /_featured_categories/ , in your tag/category .md files you need to add the text type: tag or type:category in order for the tag list page to be able to see and list those items.

Images

Going into this project I knew that I would handle images to either extreme depending on selected Jekyll theme. As Hydejack does an excellent job of presenting images, I had to do a little extra legwork in cropping, scaling, and optimizing images and assets.

Operations

Github

I took this project as a bonus opportunity to sit down and get truly familiar with Github. I completed some much overdue learning lab courses and capped it off with their Github Pages course which includes a tutorial on Jekyll. Although I’m hosting this site via Netlify, I’m still using Github to provide version control and CI. Github Desktop made committing the entire project to a private repo easy, plus enforces version control locally so that my tinkering self doesn’t hose the entire project.

GoatCounter

GoatCounter is a free for personal use analytics solution, easily implemented by just dropping a script tag in the /_includes/my-head.html file, and it’s privacy friendly to boot. Users can block GoatCounter by just adding gc.zgo.at to their firewall or adblocker blocklist. I get some basic site analytics, and head off a raft of privacy policy headaches.

Netlify

Netlify provides the hosting and SSL, and integrates with Github so I can publish the site from a private repo. Don’t know what else to say here than OAuth with Github, and go through selecting a repo and first time setup, it’s really simple and straightforward. (Free tier is 100GB / mo in traffic, so we’ll see how that holds up over time)

Also, build command was bundle exec jekyll build, so don’t panic if the default jekyll build isn’t working.

DNS

I use Google Domains as the registrar and DNS, but do so largely out of convenience. Use whatever you like. With everything stood up in Github and Netlify it was just a matter of delegating Netlify the domain, changing the DNS CNAME and NS records in Google domains, and waiting for the records to propogate. Netlify even automates the LetsEncrypt certificate generation.

Admittedly the Google Domains interface does not make it obvious how to change NS records. You have to navigate to yourdomain –> DNS –> and then along the top ribbon of the DNS page select “Custom Names Servers.” It is a part of the loaded view/page, not part of the bordering interface or blue text menus, if that makes sense.