How I created my Gatsby blog with WordPress as the backend

Recently, I created my blog again after junking my writings on my other domains. My previous experience with Static Site Generators (SSG) was Hugo. This time I used Gatsby as my primary work deals with JavaScript, so it was a quick development process for me. For the backend, I used WordPress.

I plan to write a multi-post series as I have lots of notes on how I went about it. There are still some CSS polishing required. But overall, the site is ready. This part has loads of rambling, so feel free to skip it.

Why do I use SSGs? - A history.

I don’t know about you, but I love static sites. There are no headaches involved. Just plain HTML and CSS with a dash of JavaScript if required. That is how I learnt about developing websites. It was later that I realised maintaining them is a headache. A single change in the theme required changing and keeping track of all the files. It was 2005 when I discovered WordPress. I was going to start college during the summer, and I wanted to use something for my journal. I stuck with WordPress for the next 8-10 years. My main issue was it was slow even though my blog received barely any traffic. I used the recommended caching plugins, which improved it. But it was always an extra step.

Then I found Hugo. I moved my [Enjoyable Recipes] blog in 2017. It was a mess. I learned Go language, even though it was not required. The build was super fast, and I loved the speed with which the site loaded. However, there were multiple breaking changes in later versions. Shifting mentally from JavaScript development at work to Golang was too much for me at that time. So during the current redesign, I considered a JavaScript-based SSG. I studied Gatsby and Eleventy. Ultimately I decided on Gatsby because I was working on two React projects at that time so this was a natural fit.

The Backend CMS

I started with markdown files, moved to Contentful, finally settling on WordPress. I love writing in markdown. My Hugo blog is entirely in markdown as there is no other option. For the current site, I had the following requirements. These are solely my requirements. YMMV.

1. Markdown Support - Contentful has native Markdown support. WordPress requires a plugin. Advantage Contentful.
2. Image Management - I didn’t want to check-in images to my repository. Also, I wanted automatic resizing wherever necessary. Netlify has support via Large Media. But I did not want to add LFS support. In case I decide to leave Netlify, I wanted the images resized with me. I considered Cloudinary too who have a generous free plan. But I did not want to add another provider. Contentful has automatic image management, which is fantastic. WordPress has Media Management and image resizing options via the plugin system. Advantage WordPress and Contentful.
3. Metadata for Images - Advanced Custom Fields (ACF) plugin for WordPress quickly add custom fields, and metadata support to posts, pages and images. Contentful only allows adding title, description and alt text. We need to create a separate content type for images and add extra fields. Advantage WordPress.
4. Categorization - Contentful supports categories and tags but in a round-about way. Everything needs to have a separate content type. WordPress has in-built support. Just type and press enter. Advantage WordPress.
5. Post Series Support - This is slightly difficult in Contentful and easier in WordPress. In Contentful, you can create references to other posts and then can link them in HTML. WordPress too does not support this natively. But it is easier (for me) using custom taxonomies. Tie between WordPress and Contentful.

Considering the above requirements, WordPress was a better fit for me. However, I loved Contentful. Its interface is a beauty. Their free plan, their image support and no need to manage installations make it an excellent CMS. I also considered Ghost. But they have no image resize support yet, so it was out.

Finally, I write my posts in markdown. I manage these in a private repository so that I never lose them if my WordPress installation gets corrupted.

Conclusion

I know that was loads of rambling. In the next part, I will write about my WordPress setup and finally begin the finale - Gatsby integration. What do you use for your website?

Originally published at Shubho.Dev