This is post number 5 in my 100 Days To Offload challenge. View all posts or subscribe via RSS.

I recently wrote about shortcodes, describing a way to avoid duplicating text all over the place.

Delving into shortcodes got me thinking about static rendering. In an ideal world, this site would be completely static, it wouldn’t call out to third-party sites to fetch data.

I’ve done a reasonable job of removing analytics, external fonts, and embeds. However, there are still cases where I do want to embed something from a third-party. It would be nice to bake these embeds into static output, so we’re only loading from external sources at build time. If someone visits this blog, they’ll still see the embedded content, but it won’t be fetched from a third-party.

Scanning through my post archive, I’ve mostly been embedding tweets. Static rendering and tweets reminded me of a neat Next.js demo. This demo renders tweets on first load and subsequently stores them statically at the edge.

Inspired by this, I’ve attempted to replicate that functionality on this very blog.

The tweet below might look like it’s embeded via Twitter, but it’s actually not. I’ve written a very hacky shortcode that fetches tweets as JSON via a local web server. Unfortunately, Hugo (the static site generator) doesn’t support adding authorisation headers to requests, to facilitate calling the Twitter API directly, although there is discussion about making it a feature. For now, I have to proxy requests, add the authorisation header, and then forward the request to Twitter.

I’ve spent the last few hours deploying Grafana, InfluxDB, and Telegraf, along with a job to run a speed test every 10 minutes.

The graphs turned out great! 📊

h/t to @cwmyers for the idea of using Grafana/InfluxDB at home ⭐️

— Hugo 🧙‍♂️ (@hugojmd) September 28, 2020

Here is what the shortcode looks like:

{{< statictweet "1310553323527745537" >}}

This shortcode is still experimental, and doesn’t do nice things like rendering links in tweets, so let me know if you see anything funky.