I’ve decided to switch to self hosting my stuff and move away from Tumblr. I like Tumblr, but somehow it doesn’t represent me anymore. As I write this not all articles have been migrated. But what was old is new again (i.e. I edited some of the old ones). Go and read everything again now!
I blog rarely, so there isn’t much longform content to migrate. Unfortunately, I am quite verbose when it comes to microblogging, memes and sharing articles. I treat my blog like Facebook. So I have a bunch of old deprecated posts (e.g. links not working), as well as posts I found cool at some point and now seem lame :) Those I will obviously not migrate, but this is what is taking my valuable quarantine time these days.
Today, the talk of the town are static site generators and since I had it with wordpress, I decided to give these a try. After a bit of research on Google as well as here: https://www.staticgen.com/ , I went and tried the most popular candidates.
Here’s what went into the mix when I had to choose:
- flexibility in modifying things myself
- how big and active is the community
- how easy it is to maintain
- how steep is the learning curve (i.e. how fast I can spin up a working blog)
The runners up were Hugo and Gatsbyjs. NextJS is definitely worth considering, but somehow it didn’t click with me. Felt like there is too much complexity that I have to learn. I was not planning to write my own components and maintain them through upgrades for a simple blog. However, it gives you great flexibility, so if you are building something more complex, it’s probably the right choice.
However after trying both an deciding they are both very respectable products, I realised that speed is not important in generation, because generation is off-line and one time. Following that all that is served is static content. So I went with the evil I knew best: NodeJs - hence Gatsby.
Let me start by saying that if you are happy to read code and use a “starter project”, you’ll be fully in control in about 2 hours, juggling plugins and probably even modifying or writing your own.
But first, please please please don’t make the mistake I made. Don’t install and customise your gatsbyjs, just to find out it is version 1 and the theme migration to version 2 will take you forever. Choose a good compatible theme with GatsbyJs 2.0.
If you have time (what else do you have to do in quarantine after all?), feel free to build your own theme, but that will not fit in the 2 hours time.
Useful commands to be aware of:
gatsby develop- builds your dev version of the static website and starts a server to preview your changes live
gatsby build- builds your production version into the
gatsby recipes- new addition in the past week or so - preforms various tasks like installing plugins, themes, etc. You can also write your own recipe.
Plugins worth installing:
- gatsby-plugin-google-analytics - no explanation needed
- gatsby-plugin-manifest - Web App Manifest allowing website to be installed as an app
- gatsby-plugin-mdx - if you want to include some react components straight ito markdown. You might want to have a nice blog post with a component for voting ot a custom chart
- gatsby-plugin-offline - makes the site available off-line by putting it on the client side in a service worker
- gatsby-plugin-page-creator - this really makes your life easier by creating pages straight from directories - so your posts can be just a folder with some markdown
- gatsby-plugin-react-helmet - pretty much mandatory if you want SEO
- gatsby-plugin-sitemap - great for SEO - you need a sitemap
- gatsby-remark-images - almost mandatory - blur up image technique, putting images in elastic container and loading the correct size in a responsive way
- gatsby-remark-prismjs - syntax highlighting. Great if you add code snippets
- gatsby-remark-responsive-iframe - elastic / responsive iframes with fixed aspect ratio - great for embedding youtube videos
- gatsby-theme-overreacted-toggle - dark mode toggle - you can see this at the top of the page
- gatsby-transformer-remark - pretty much mandatory if you want to use markdown