Previous challenge

One of the reason why I haven't been pushing much content to my blog was because I kept having problems with my previous blogging solution - Hexo. For a long time, my local just wouldn't build due to some npm dependency issues. For months I couldn't publish anything because I simply can't get my local working to push them (If you are interested in how it worked you can find out more in a previous post). It is also a lot of hassel to publish anything even when there were no problems, for example I always had to do it on the same machine or I will need to install Node, Hexo and etc. It is more work than it sounds, especially on some platforms.

When I finally got everything fixed, I was so fed up anyway and I wanted a better publishing experience. For a while I even considered ditching this site and going with Medium. Yep, I was that annoyed!

A new hope

So I have been using Netlify for a while to host my static blog, I was loving it. Then one day I was told there is something called Netlify CMS and I got really excited. All I'm missing from my Hexo set up was literally a place to create and publish content. I also didn't want to make a code change, manage my own image insert every time. It is a pain to say the least.

I tried out Netlify CMS, but it turns out too basic for what I need. I mean there isn't even a draft option, it is either publish blog or no blog. So unfortunate I had to pass on this solution. But this gave me more motivation to deep looking for other alternatives which worked better.

Errr... another new hope

Don't worry, this time it is for real. Someone at work was really impressed by it, so I was curious to find out what the fuss is all about. Then when I did look it up, I realised it is perfect for my blogging solution. If you haven't heard about it already, it is an amazing tool go check it out. But on a high level it is a CMS site, it provides APIs for anyone with access key to request data. The cherry on top is that it support graphQL, amazing right?

So now the CMS site and connect is sorted out. The next step is trying to find a library to do the static site generation based on the data in Contenful. I have always wanted to use Gatsby in one of my projects, and this turns out to be a perfect opportunity. Gatsby uses React, so even less learning curve there, perfect!

So in the past couple of months, I've been finding time here and there to rebuild my blog from scratch using Gatsby. Then I re-implemented the more advanced features I had such as pagination, tag pages and etc. Now it is about 80% done, with some features still missing such as commenting.

The new work flow

With this new set up, which is amazing btw, everything becomes so simple compared to before.

If I want to publish a new blog post, I would write it anywhere using markdown. Then copy and past into Contentful and publish it. I couldn't write on Contentful because when I tried I hit the max request limit due to its auto-save feature. So now I write it using Typora, but since it is markdown you can essencially write it anywhere.

Once the blog is published, it will trigger a webhook on Netlify which will pull the Gatsby source code from my Github repo. Then the entire blogging site will get re-generated based on the lastest data from Contentful. No need to make code change, no need to open an IDE. I can do this on any machine that has a internet connection.

If I ever want to add new features to the Gatsby app, then I just develop it as normal. When the source code is merged to master, it will also trigger a Netlify webhook which also triggars the build. About 30 seconds later I'll get the new feature on the live site.

Final Words

If you are looking to do the same, then apart from Contentful and Gatsby I'd also recommend taking a look at gatsby-source-contentful library which saved me a lot of time.