🎤 “Hello, is this thing still on?” After a five (!) year hiatus I’ve returned to blogging about my non-day-job technical interestes. I’ll start with the stories of some of my past projects, and pretty soon what I’m currently invested on. Stay tuned 🔥 🔥.
Choice is the enemy Link to heading
For starters, I wanted to self manage my own site and I wanted something new. In 2014 Medium seemed like the go-to choice, but while publishing was a breeze, embedding other content was a PITA ๐, and given their current paywall approach, I just don’t want to deal with it anymore.
Second, I didn’t want to deal with hosting, admin passwords, databases, dynamic themes, etc. This narrowed down my choices to a plain-old static site, static site generators to be specific. So…JAMSTACK! 👊
But which one? Jekyll? Hugo? Gatsby?. Oh no! analysis paralysis…not today, Satan ๐!
Given my interest in Go (more on this later), Hugo piqued my interested the most.
$ brew install hugo
Third, where do I store my code? GitLab it is, I already have public repos in GitHub and my private personal projects are in BitBucket. Fourth? Where do I host it? Netlify seems easy enough.
All systems go!
Theme Customizations Link to heading
Next, I wanted a simple and clean theme, I played with these:
Ended up choosing Hugo Coder with some shortcodes from Cupper, copied into /layouts/shortcodes
. And using hugo
’s built-in emojify
support with labels from Emoji CheatSheet.
I wanted to showcase code samples, updated my site’s config.toml
to contain:
[markup]
[markup.highlight]
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
style = "solarized-dark"
tabWidth = 4
As for typography, I chose the following:
- Libre Franklin for all copy here.
- Jetbrains Mono, all code snippets
- Orator for the splash picture in my blog
Adventures in WI-FI, my blog Link to heading
Ah, my humble homage to R.E.M’ New Adventures in HI-FI ❤️
I re-created the look of their album cover using my own picture of the Nicoya Gulf, Costa Rica, and Orator Std
web-font and the following Sass CSS (Organized following BEM) conventions.
.wifi-album-cover{
&__wifi-album-pic {...}
&__wifi-title-epc {...}
&__wifi-title {...}
}
When viewed in mobile, the blog title becomes a footnote to the image and the ‘E.P.C’ dissapears, thanks to CSS media queries.
End Result Link to heading
Welcome to my “New” Adventures in WI-FI. Let’s buckle up for the ride !