This blog is a web page

JAM Stack is so hot right now. 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 JavaScript¹. 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
- I’ve also added a script to prefetch pages for Turbolinks when you hover on the links for longer than 400ms (greatly improves Turbolinks experience).
  - This script is similar to instant.page and InstantClick.
  - To see it in action, try hovering over this link right before clicking it, and see how fast it loads:
    - F*ck-That Money
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
- source code
- egghead course
- I’m planning to check out this approach by Jason Lengstorf
  - It also uses Cloudinary but with fewer dependencies afaict

Idea: add an option to disable all JavaScript. ↩

0 likes and retweets

otakugrey

2020-05-28 07:12 PM PDT

Jekyll still being amazing just shows how good it is.

brainbag

2020-05-28 07:17 PM PDT

I don't know if inline_svg is Rails-only but it's worth a look to avoid the font awesome imports: https://github.com/jamesmartin/inline_svg/blob/master/README.md

I generally navigate with JavaScript off, and I think it's ridiculous how many blogs and documentation sites I come across that can't load without JavaScript. I love Vue, but using it for what should be simple static pages is dumb.

AnimeFanOnPromNight

2020-05-29 02:09 AM PDT

Why you would go to the trouble of making something like that to generate your OG image when you can just use a static picture of something?

strzibny

2020-05-30 02:30 AM PDT

I agree.

I just moved to Jekyll for my personal blog this year as well. I just don't use any JavaScript libraries. Why?

- Using Turbolinks is great if people click many links (not my case), otherwise it slows things down.

- Pre-fetching pages that users might not open uses their data without their knowledge (not cool!). I guess the authors 400 ms covers it though.

All in all, static is fast.

If someone is interested I put together an article on testing static sites with Ruby.

Anonymous

2020-05-31 09:49 AM PDT

Nice!

Next and Gatsby are great for people who work full time with React and want to stay on top of things, often in larger companies with a dedicated frontend team, or youtubers/teachers who benefit from being able to teach new features.

People there don't mind if they have to rewrite their site after new React or framework features appear, it's how they learn and teach. Jekyll otoh is stable and won't change in drastic ways, perfect for small businesses.