Moving My Blog to the Moon 🌘, Beyond 🚀 & Back Again 🌍
There is a ongoing joke about developers and their blogs, which goes something like this:
What do developers do, if they want to write a blog post, but don't have anything to write about? - They rebuild their entire blog with some new tech stack and write about "How I rebuilt my blog with [fill in the name of the new tech stack]".
This is one of those blog posts.
For many years, I maintained a Wordpress blog, which ran on my Hetzner server. The server costed ~12 Euros a month and I wasn't doing much else with it. Things regularly broke after updates (if I had time to do updates). I didn't enjoy writing with the text editor WP provided. - It was too small, had too many buttons, reminded me too much of Windows Office Word and felt all-in-all uninspiring. I dreamt about doing fancy things with it, but the underlying PHP stuff was complex. So finally, I decided to get rid of it.
Wordpress → Jekyll + GitHub Pages
First, I tried to move my blog to github.io.
I used an importer to turn all of the WP posts into Markdown files and assets into Jekyll supported folder structure. I added a handful of plugins to support the media files, the embedded elements and the syntax highlighting. I then did bundle exec jekyll serve on my laptop and got some acceptable results! ✨
OK, that was easy! I committed the whole thing to GitHub - and nothing happened. GitHub itself didn't give me any clue about what was going on. But because I didn't get my computer science diploma for nothing, I googled! - And found out that most of the plugins I used with Jekyll were not supported by GitHub Pages due to general security concerns.
So I removed all of the fancy plugins, and finally, the site became live under a github.io subdomain. But it now appeared to be mostly broken, since none of the fancy media stuff worked.
By then, all of my motivations were used up. So instead of fixing it, I watched the Gilmore Girls. ☕️☕️
Jekyll + GitHub Pages → Jekyll + Netlify
A couple of months later, I decided to connect that Jekyll site with Netlify. I had worked with Netlify before, so I knew that it played very well with static website generators.
I re-installed all of my fancy Jekyll plugins, connected that GitHub repo with Netlify and configured Netlify to run the command jekyll build after every change to the master branch. And this time, it worked! 🥳 (And more importantly, Netlify displays the build command's logs, which made debugging easier.)
Clicking through my new site for the first time under a netlify.com subdomain, I saw that the WP to Markdown converter wasn't able to deal with many of the custom tags I had used for the WP plugins. As a result, many of my posts (especially those with embedded elements) were still broken and needed manual fixing. So I did that for a while.
This ate up all of my motivations for that day, so instead of writing about "How I rebuilt my blog with Jekyll and Netlify", I watched The Man in the High Castle. 📽🌍🌎
Wordpress → GatsbyJS + Contentful + Netlify
I am on Twitter. And most people I follow on Twitter are developers. Which let Twitter categorize me as male at some point. 🙄 Not only do developers love to experiment with new tech stacks and write about it, but they also like to tweet about it.
So somebody tweeted about this amazing new static website generator GatsbyJS. - Buzzwords like ReactJS, GraphQL and Headless CMS were dropped. The GatsbyJS website itself looked great and showcased some cool websites. A massive #FOMO hit me immediately and I decided to also try it out. - And my blog seemed to be the perfect candidate for this.
Gatsby follows the JAMstack architecture, which means that it uses Javascript (in this case Node) to request data from an API, and to pre-render those data into Markup (it uses React for this). Gatsby also supports Markdown files, but I was at the same time involved in a project at work, which used Contentful and GraphQL, so I also threw those into the mix. #WhyNot?
Migrating all the posts from my still running WP database to Contentful with scripts Contentful provided on GitHub went surprisingly easy (the scripts became deprecated since then, so I'm not linking them here).
Running gatsby new with one of the provided starters and connecting it to Contentful (after I worked through some of their very well written tutorials) was also not too complicated and worked mostly during the first try. (I think, I spent more time updating Node and fixing its dependencies.) I connected the GitHub repo with Netlify and configured Netlify to run the command gatsby build, and the site became live under a netlify.com subdomain.
Now I saw that the WP to Contentful migration scripts weren't able to deal with many of the custom tags I had used for the WP plugins. As a result, many of my posts were still broken and needed manual fixing. So I did that for a while.
This ate up all of my motivations for that day, so instead of writing about "How I rebuilt my blog with GatsbyJS, Contentful and Netlify", I watched The Marvelous Mrs. Maisel. 🎙
Wordpress → Wordpress on Digital Ocean! 🌊
Remember that one of my motivations for getting rid of WP was to stop paying for my mostly unused server? Well, the first thing I had done before I even had started this odyssey, was to terminate my contract with Hetzner. So while I was binge-watching tv-series with strong female leads, I was also slowly running out of time.
A couple of weeks before the end of the contract, I panicked. The easiest thing I came up with was to grab a Droplet on Digital Ocean with pre-installed WP and dump the database of my self-hosted WP on it. I reconfigured my domain to point to that droplet and then spent some time to properly backup my server.
Afterwards, all of my motivations were used up. So instead of contemplating what to do next, I watched The Handmaid's Tale. 🍇
Wordpress → NuxtJS + Contentful + Netlify
One-and-a-half years ago, I joined Blinkist. The frontend of Blinkist uses VueJS, but since I'm mostly doing backend work, I haven't had opportunities to touch the frontend code very often. Guess what? I decided to use my blog to learn VueJS!
The most recommended static website generators using Vue back then were Vuepress and NuxtJS. To be honest, I don't remember exactly why I decided to use Nuxt and not Vuepress. Maybe it had better tutorials, maybe I liked the website more or maybe I found a nicer starter theme ...
Anyway, replacing GatsbyJS with NuxtJS was quick. And since I already had Contentful and Netlify up and running, all I had to do is to push the changes to GitHub. Netlify ran nuxt generate - et voilá!
It worked so surprisingly well, that I lost all of my motivations for that day. So instead of starting to customize it, I watched The Bold Type. 📕👗📱
Everything → Gridsome + Markdown + Netlify 🤘
So here we are. Two-and-a-half years later! I have created many GitHub repos with mostly working websites in it. I have forgotten about the majority of the reasons why I started or abandoned those repos. I haven't written a single blog post about "How I rebuilt my blog with X". In fact, I have stopped writing about anything altogether.
I missed writing. I missed GatsbyJS. I tried but wasn't very productive with Contentful's text editor. - It was too small, had too many buttons, reminded me too much of WP and felt all-in-all uninspiring. And speaking of WP, I still had a WP blog on a Digital Ocean droplet. 🤣
When I stumbled upon Gridsome two months ago, everything just fell into its place. Gridsome is an OSS static website generator created 2018 by Hans-Jørgen Vedvik and Tommy Vedvik. It uses Vue and is heavily inspired by Gatsby.
This time, deciding whether to use Markdown files or Contentful was easy, because I wanted to concentrate more on writing and I knew that I am most productive in the editor I use for coding.
I already had all my posts exported from WP to Markdown (and cleaned up 🧹) for my Jekyll site. I was able to find most of the fancy plugins I used for my Gatsby site also for Vue. I've become very familiar with the development workflow of JAMstack frameworks. And Connecting the GitHub repo to Netlify and configure it to run gridsome build was something I am now able to do while watching tv series with strong female leads.
I could keep writing about more things I learned while moving my blog to the moon, beyond and back again, or things I'm planning to do next with it (fancy things, great things, it might even involve some CSS - which is a backend developer's Kryptonite), but I've used up all of my motivations for today and will now watch Fleabag 🐹 instead.