There and back again

I moved my blog to Next.js from Gatsby.

Why Next.js? I don't really have a good answer for this except that in retrospect, I did not enjoy having to work with graphQL just to display stuff on my blog. Besides that, Vercel has a generous free tier (and comes with serverless functions) and if you're moving to vercel you might as well use Next.js.

Configuring Next.js#

Moving over the blog posts was straightforward since I already had them as .md files. I don't really like how the default way to use mdx in Next is to export your front-matter as a javascript object. I used next-mdx-advanced to get around this (there's also the addded advantage of being able to use custom layouts based on a front-matter key).

Over the last year, I've stopped writing css a lot. This is partly due to my frustration with how easy it is to mess up and partly because I only write javascript at work. Tailwind seemed like a godsend and while I did take some time to get used to it I'm glad there exists something like this.

The only thing I didn't entirely like setting up was syntax highlighting. Getting prism working was a breeze but I'm pretty sure we need a better way to share prism themes than copy pasting entire css files and adding them as a stylesheet. This got messy very fast because I had to get two sets of styles for the dark and light themes and make them look consistent. Note to self: build a library that generates prism theme files from json.

A lot of the configuration for Next.js is direclty based on what Lee Rob does on his site. I haven't thought about adding analytics yet, because fathom is expensive and Google Analytics is a steaming pile of hot mess. I should probably look into building out a way to just track page views.

Link Sharing and Snippets#

I've always wanted a way to publically share links or snippets on the site. I built a telegram bot that creates a small note on my site when I send a link and a description to the bot. Building this out was surprisingly enjoyable thanks to serverless functions.

The code for this is pretty simple. Telegram sends a webhook to my function with the message. The function then creates a new .md file in my repository. Since vercel rebuilds the site for every commit to master, new notes show up in a few seconds. Checkout the code for the function here.

A rather nice side-effect of building this is that I'm now constantly thinking up ways to use serverless functions more. Serverless just let's you skip straight to writing code without spending days on setting things up.

I'm still not entirely sure as to how I want sharing snippets of code to work, so that is something I'll be thinking about in the coming weeks.

What's Missing#

I really want to implement indieweb stuff like webmentions and microformats. I'm defenitely not going to add comments to this site, and webmentions could be a really good way to enable discussions around articles. I love how Max Böck has used webmentions and I'm looking forward to setting that up.

If I ever get around to building out something to track page views I'd also like to work on having a stats page like this.