Building A Blog With Gatsby.js

DISCLOSURE: THIS POST MAY CONTAIN AFFILIATE LINKS, MEANING I GET A COMMISSION IF YOU DECIDE TO MAKE A PURCHASE THROUGH MY LINKS, AT NO COST TO YOU. PLEASE READ MY DISCLOSURE FOR MORE INFO.

I have been a big WordPress user for many years and I still have many websites running on WordPress. In fact, WordPress powers 30% of the web. However, for this website, I wanted to try something different.

How I Got Started With Static Site Generators

My first foray into static sites actually started with WordPress. To speed up your WordPress site there are a number of plugins you can download. One of them is called W3 Total Cache, which works by minifying your JavaScript and CSS and then converting posts and pages into static HTML so they can be cached.

This sped up my website significantly giving me an A rating in Pingdom. However, I still had to log on to my WordPress installation to write blog posts. My hosting provider at the time was cheap but it was also slow which meant writing blog posts was painful. (Note, I now use SiteGround for my WordPress sites and they are now a lot faster.)

To solve the speed issue of having to write posts by logging on to my website, I tried a bunch of offline Wordpress editors such as Desk and Blogo. These were ok but I found that I either didn’t like the interface or they didn’t fully work and therefore I still had to log on to publish my posts.

The other issue to bear in mind is security. Even for my small site, I was getting several emails a day with failed login attempts from hackers (little tip, never name your user admin or after the name of your site).

When developing WordPress themes, I run everything inside a Docker container and Wordpress is always responsive then. So I figured why not create a static version of my site and use that. I used the Simply Static WordPress plugin to create a static version of my site and then uploaded it all to S3.

This is true for all static sites but there are a few issues you have to think about if you are going to go static.

Dynamic stuff doesn’t work

Obviously, with a static site, there is no database underneath so anything that would have done calls to it won’t work.

Search is the obvious one. So I had to remove the search box. Most of my traffic comes from search engines and social media so it wasn’t a big loss. Using Google Analytics I found my search box had only been used once in the last year!

Redirection plugins, I had a few plugins that dealt with redirecting URLs and these stopped working too. If you don’t use many plugins then you should be ok.

Comments. With no database, there is nowhere to store plugins. This can be resolved by using something like Disqus.

Overall it worked well but overall I don’t particularly like writing my blog posts in WordPress. Luckily there are a whole host of static site generators available now.

The Rise Of The Static Site Generators

When researching static site generators quite a few came up. These are the main ones:

• Jekyll - This is one of the most widely known static site generators mostly used by developers.
• Hugo - A static site generator written in Go.
• Nuxt.js - If you like using Vue.js then you might want to consider Vue.js. Although you can build a blog with it, it is mainly used for web apps.
• Gatsby.js - Website generator based on React.js.

I wanted a fair amount of control for my website. I not only wanted a great design I also wanted to build custom tools in the future.

Nuxt.js was a candidate but in my opinion, it is overkill for a blog.

Hugo has the ability to write plugins but it is written in Go which isn’t a language I am familiar with.

Jekyll again you needed to write plugins for anything custom.

I finally settled on Gatsby.js as I am familiar with React and this gave me the flexibility to create complex components that could be added into posts and pages.

Getting started with Gatsby.js

The easiest way to get started is with the numerous starter projects that others have created.

Check out the starter library over on the Gatsby website.

I was going to be designing the site from scratch so I only needed the most basic of templates. So I went with the gatsby-starter-blog.

Make sure you pick one based on v2 (or the latest available) as there were quite a few changes since v1 and they aren’t compatible.

I used Bulma for my CSS framework, and although there is a Gatsby Bulma starter it is based on v1 so I didn’t want to use it. However, you can choose whichever framework you want.

To get started you need to make sure you have gatsby installed.

npm install -g gatsby

Then you can simply create a new site with this starter:

gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

To get everything installed run:

yarn install

Then to launch your site:

gatsby develop

This will run a web server on localhost:8000 which will automatically update whenever you make changes.

Once your site is ready you can build a production version with:

gatsby build

Your site will be created in a public folder and can then be uploaded to something like Amazon S3.

If you want to preview the production version simply type:

gatsby serve

Benefits of Gatsby.js

There are a number of great things about Gatsby.js which I think are worth a mention.

Posts written in Markdown

One of the great benefits is you can write all your posts in Markdown. I now write all my posts and code in Visual Studio Code, “One Editor to Rule Them All”.

Not only is writing in Markdown a lot more efficient than writing posts in WordPress it is now all backed up with Git!

Great Plugins

There are a number of great plugins for Gatsby.js for Google Analytics (gatsby-plugin-google-analytics), RSS feeds (gatsby-plugin-feed), site maps (gatsby-plugin-sitemap) and more. One of my favourites is gatsby-transformer-sharp this automatically optimises all the images I use in my markdown files.

Pages written in React

Of course, the best of all is all my pages are written in react meaning I can also use all the great react components that are available.

Conclusion

For developers who love writing in React, I would highly recommend giving Gatsby.js a try. If you aren’t a developer than Gatsby isn’t for you and Wordpress is probably your best choice.