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

Update (12/09/21): I wrote an update to this post here, which describes a much less hacky way of doing this.

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.

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.