JAM Stack is so hot right now. :fire: Like many others, I’m exploring frameworks like Gatsby, Next.js, and Nuxt.js, but not on this blog. My goal for this blog is to get JAM stack performance without the JAM stack.

Instead of Gatsby or Next.js, I’m using a Ruby static site generator (Jekyll) with HTML, CSS, and minimal JavaScript for progressive enhancement. My litmus test for this blog is that you can still comfortably read it if you disable JavaScript1. With JavaScript enabled, this blog should feel very close to a single page app.

Here’s the stack:

  • Jekyll
    • Generates static pages
  • Webpack w/ PurgeCSS
    • Bundles both CSS and JavaScript
  • Turbolinks
  • Font Awesome
    • I’m considering ditching this because it’s a lot of overhead just for the handful of icons I use.
    • Currently using the SVG kit, which remotely loads the individual icons (so not bad performance)
      • This is still dependent on JavaScript which I’m OK with, except there is a flicker on initial page load.
    • Ideally I would like to include a subset of icons via CSS or direct SVGs.
      • Is there an easy way to include a subset of icons via CSS?
        • css.gg has this, but doesn’t have the brand icons I want
        • Fontello doesn’t support Font Awesome 5 (and is missing a few icons I use)
  • Netlify
    • Web host
  • OpenGraph image generation API deployed as Netlify function
  1. Idea: add an option to disable all JavaScript.