With so many options to create a blog or a website in 2021 out there, there’s this new thing called Gatsby – the youngest player to the game that might just be a viable alternative to the classic paths of WordPress, Joomla and the lot. Or is it? What is Gatsby, anyway? How easy is it to set up and deploy a site on Gatsby? How does Gatsby compare to WordPress? That’s a lot of questions to answer.
This is a step by step guide to getting started with Gatsby plus how it compares vs WordPress. By the end of this post, you should be in a position to answer whether Gatsby suits your website needs.What is @gatsbyjs? Is it a #WordPress competitor? 🤔 Click To Tweet
What is Gatsby?
The simplest answer to the “what is Gatsby” question is this: Gatsby (aka. GatsbyJS) is a static site generator that is built on ReactJS.
In its simplest definition, a static website is a group of HTML pages, which does not pull any data from a database when a viewer visits it. Thus, a static site looks the same to every visitor. Static sites are faster to load too, as the server sends the same response to every visitor. However, you can not customize content for visitors.
On the other hand, a website hosted with WordPress is dynamic, meaning that the content showed is dependent on the visitor. The server analyses each request and decides how to respond.
💡 The idea of a “static WordPress website” is something we explored in one of the previous posts on this blog – aka. headless WordPress. Gatsby is another technology that makes static WordPress or a static alternative to WordPress possible.
Getting started with Gatsby
Okay, now that we know what Gatsby is, let’s learn how to best get started with it:
Before you create the development version of your site on Gatsby, The first step is to get your system ready for installing Gatsby. Since Gatsby is built with React, the package management is done through npm, which is a part of any NodeJS installation.
If your development machine runs on Windows or MacOS, you can simply use one of the installers on the NodeJS download page. In a Linux environment, you can use a package installer like yum or apt to install it.
sudo apt update sudo apt install nodejs npm
Additionally, Gatsby requires you to install Git, a version control tool, as a prerequisite to create a development website. Head over to the download page of git to get the installer. Note that if you already use a GUI agent for Git, such as GitHub Desktop or SourceTree, you may still need to install Git separately to use it as a command on the terminal.
With the requirements installed, you are finally ready to install Gatsby! Here’s a quick start guide from the Gatsby documentation.
Open up the NodeJS command prompt that comes as a part of the application in Windows, which you can run from your start menu. In a Unix based system such as Linux or MacOS, you can type the command nodejs in the terminal to start the NodeJS command prompt. To install GatsbyJS, use the npm installer. The -g option makes the package available to all users in your system.
npm install -g gatsby-cli
The installer takes care of all dependencies for the package. Once the installation is successful, you are ready to create your first GatsbyJS site.
Create your first Gatsby site
To create a Gatsby site, you need to run the following command in the NodeJS command prompt.
gatsby new my-site
This is the step that requires Git. When you create a new Gatsby instance, it clones data from the default starter theme of Gatsby, and stores it in a directory my-site. We will discuss Gatsby starter themes in the next section.
To preview the development version of the website, change the active directory to the newly created my-site directory and run the development server.
cd my-site gatsby develop
When you get a success message, head over to http://localhost:8000 to check the current version of your website. It’ll most likely look something like this:
Before we make any changes to the content, let us go through the process of creating a production build for the website. To start the build of static pages for your website, use the following command:
You will notice that the static files are created in a public directory within my-site. To start a local HTML server to display your website in a static, production-ready form, you need to use the following command. Note that you need to use the build command before you run serve.
As indicated in the success message, you can head over to http://localhost:9000 to check the static version of your newly created website.
Gatsby starters and themes
When you installed your blank Gatsby site, it cloned the default starter template from GitHub. Starters are fully functional Gatsby sites that can be cloned and reused through the Gatsby CLI. You can think of a starter like an initial template to build your website on. The GatsbyJS community has built many starters keeping in mind various needs such as blogging, e-commerce, and documentation.
Gatsby maintains a starter library to document all starters that one may use. As of April 2019, there is a choice of over 150 starters!
While starters provide a great platform for users to build a website in practically no time, they aren’t really a great idea in the more serious development scenarios. The primary reason for this is the inability of updating starters over time.
In late 2018, Gatsby introduced the concept of themes. It enabled the use of the gatsby-config.js file to create a reusable theme. This is a huge change in what is Gatsby and what’s it capable of, particularly when compared to WordPress.
There is a community of developers for Gatsby themes, however, much needs to be done to get to production-ready themes – something that’s not a problem at all with WordPress.
Migrating to Gatsby
The easiest way to ingest posts into Gastby is through Markdown. Irrespective of the blog that you may have, you need to export your results to the Markdown format to then migrate everything to Gatsby.
That being said, most website platforms, including WordPress don’t offer Markdown exports out the box, so you will need to export your content to HTML or XML first, and only then convert everything to Markdown. Once your Markdown pages are ready, here’s a guide to adding a list of Markdown posts to Gatsby.
If you have WordPress and Gatsby both installed on your development machine, you may want to explore the gatsby-wordpress-migrate package on npm. The package page contains instructions on how to migrate from WordPress.
Additionally, migrating from a recent version of WordPress might be easier with the help of the WordPress REST API. Here is a step-by-step guide on how to use GraphQL and WordPress Rest API to get posts from your WordPress blog to Gatsby.
Gatsby’s pros and cons
There are certain advantages to using Gatsby, which may appeal to potential users. A site built with Gatsby is essentially a single page application. This means that clicking on an internal link doesn’t create the need to load a completely new resource, which in turn saves a lot of HTTP requests. In WordPress, you need to follow certain best practices to make sure your site is optimized for speed, or that your images are optimized as well.
In Gatsby, for instance, image optimization is automatic. For starters, Gatsby removes all metadata from images, resizes and compresses them, and also implements lazy loading! In WordPress, we suggest using a service like Optimole for image optimization.
Further, Gatsby also does other tasks like bundling and minification of resources in your website before serving them. Finally, as the website is static, any update reflects in the production version as soon as a push arrives.
Overall, static sites are also more secure since there’s essentially nowhere a hacker can break into – apart from breaking the server itself. With WordPress, everyone gets access to what’s basically raw PHP files that can be vulnerable to multiple different attacks. With many WordPress sites using more than 20 plugins at the same time, there’s a reasonable chance one of those plugins will be exploited and used as a gateway to break into your site. Like it happened not that long ago with the P3 plugin.
Gatsby vs WordPress
The core difference between Gatsby and WordPress is that Gatsby is a static website generator while WordPress is a fully-fledged dynamic website engine and CMS, but let’s have a deeper look into individual aspects of each:
The ease of creating a new site with Gatsby vs WordPress
As compared to WordPress, I would say that installing Gatsby requires a similar level of skill. In WordPress, you need a web server (Apache), PHP, and a database installed before you can get around to installing WordPress.
This is especially valid if we’re discussing installing WordPress for development purposes – meaning that you’ll most likely need to install WordPress by hand, and not take advantage of your web host’s ready-made WordPress installation.
The ease of creating a blank site with Gatsby vs WordPress
In terms of what Gatsby is, as compared to WordPress, creating a blank site with Gatsby is a bit more difficult, as it involves using the terminal.
In WordPress, you have a nice installation wizard that gets you through the steps nicely, and the only thing you have to do by hand is prepare a database.
How do Gatsby themes compare to WordPress’?
Given the maturity of the WordPress project, there is a huge collection of WordPress themes to choose from. If you switch to Gatsby, your options are very limited, unless you want to develop a theme from scratch.
Not to mention, installing and switching themes in WordPress is super simple, and customizing them isn’t that much more difficult either, even if you have absolutely zero programming knowledge.
Overall, in the theme department, it’s a no-contest. WordPress dominates.
Okay, I hope you’ve found your answer to the “what is Gatsby?” question here. Overall, Gatsby presents a really interesting alternative for people tired of WordPress or simply wanting to test what else is out there.
While WordPress is the clear winner in terms of popularity, community, ease of use and overall functionality of the whole platform, Gatsby in its native form provides some excellent features as well.
Additional resources: best React UI component libraries and frameworks.What is @gatsbyjs? Is it a #WordPress competitor? 🤔 Click To Tweet
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%: