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.
- Why did I need a site?
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.
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.
- Youtube: Install Jekyll on Apple Silicon (Jamstack)
- Jekyll forums: Jekyll crashes on macOS Monterey
- Jekyll forums: Jekyll crashing on M1 Mac
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 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.
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.
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.
- ImageCompressor.com / Optimizilla has been my go to image compression and optimization service.
- Unsplash for when I just need a free, good looking placeholder or banner.
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.
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.
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.