JAMstack Playground

๐ŸŽค “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

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!

GoLang GitLab Netlify

Theme Customizations

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:

Adventures in WI-FI, my blog

Ah, my humble homage to R.E.MNew 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

Welcome to my “New” Adventures in WI-FI. Let’s buckle up for the ride !