This blog, www.tonnguyen.com has been around many years. It was using Wordpress as the CMS. With a bunch of plugin, I had a site up and running quite well, without much effort needed. However, as a developer, it's always exciting to experiment something new, something fancy. Usually when I see a new thing, I ask myself what can this do for me, what can I do with it. Usually the result will be a mobile application that I release under my name, or I apply that to the project that I am working as a full-time job, or just a test project to see how it works.

A few months back, I saw GatsbyJs pops up while surfering on my Twitter account. GatsbyJs, a static site generator, not really sounded interesting to me at the first glance. Static site generator has been around for many years, and honestly I never knew what can I do with the static site without just a boring site with no interation with any service. But then I decided to take a look at it to see why people is talking about it. Some keywords then came up: blazing fast, React, GraphQl, Wordpress and Contentful data sources. I read some discussion on how to handle Comment and Search on static site. Fair enough, then I asked why don't I re-build my blog to be a static site? I have experience in both React and React Native. I like them, building my blog with React sounds very intersting. Also I heard about GraphQL but never have chance to actually use it for a project. So many reasons to force me to do it.

Chossing a stack, make a plan

Here is the stack that I decided to go with:

• Gatsby: as the content generator.
• Contentful: as the headless CMS. By using the Content starter, we can create a web site in a matter of minutes.
• GraphQL: to query data. Trust me, it cannot be easier than query data using GraphQL in Gatsby.
• Search: big question when having a static site: how do I search my content. The easiest and quickest way is to integrate a search service. Algolia is what I choose cause it is free as long as I place their logo on my website. It searches just super fast. It has both plugin for Gatsby and a search component for React. Integrate Algolia's search box and search result to the site? Piece of cake!
• Paginate: another question for the static web site is, how do I add pagination to my site. You know what? We have a Gatsby's plugin to solve that. It is like every time you need something, Gatsby has created a plugin for you.
• Sitemap: what did I tell you? Yes, Gatsby did it again.
• Comment on post: embeding Disqus to the site works just fine. By using disqus-react, I can add the comment box to all posts with a few lines of code.
• Migrate from Wordpress: note that you don't have to move to Contentful to have the static site. Wordpress does it just fine. Wordpress has the Rest API so you can query pages and posts. We have a plugin named gatsby-source-wordpress for doing this. The reason why I wanted to move to Contentful was because I don't want to maintain my own Wordpress hosting anymore, no worry about hacking, spamming. No worry about upgrading my Wordpress and its plugins. I get those for free in Contentful. If you search Google for exporting content from Wordpress to Contentful, there are numbers of articles as well as the plugin. But I never got that work. The fact is I don't have too many posts on my blog, so I did it manually. I am talking about copy/paste. Not too difficult, took me half of an hour.

Glue them

By using Netlify, I have hosting, CI/CD, SSL/TLS certificate, all of them for free. Just connect Netlify to the source repository then we are ready to go. Commits go to master branch would trigger a build in Netlify.

If you want to automatically trigger the Netlify's build whenever you publish a new change in Contentful, to make sure the static site is up-to-date, first create a build hook in Netlify. This gives you the URL. Then set up a Webhook in Contentful to send a POST request to this URL when a content is published.

Result

I am pretty happy with what I can do with Gatsby. The tutorial, the document are excellent. The development experience is super smooth. You get Hot Module Replacement out of the box. Query data with GraphQL is amazing. I am glad I tried Gatsby. If you are interested in React and want to boost your website by having a static site, I highly recommend checking out GatsbyJs!