In this tutorial, you will learn about Gatsby, what it is, and how you can use it to create a blog. Most websites you will build are dynamic. Take my career, I have specialized in working with C# content management systems. When you build a website using a CMS, the platform provides some sort of backend editor where content editors can log-in and create pages. After a content editor creates a page and publishes it, the CMS database is updated and the page is made visible on the website.
The Gatsby framework takes a very different approach. Instead of generating pages dynamically via CMS content has to be generated by compiling the site. Gatsby then is a static-site generator, it pre-compiles all the pages into a static website. Yes, you did read that correctly, Gatsby is a static site generator. My first thought when I first heard about Gatsby was "why would anyone want to build a static-site nowadays". Like me, you may be surprised that there are actually loads of good valid reasons.
As a React developer, you have probably heard of Dan Abramov - the dude from the React-core team. If you have heard of Dan it is also likely that you have stumbled across his blog, Overreacted. Overreacted.io is built using Gatsby and the whole site's source-code is free to download and play with.
Just because Gatsby generates a static-site, this does not mean that you will be writing and maintaining all that static HTML yourself. If you look within the src/pages folder within the overreacted repo, you will see a list of articles written in markdown. These articles are the content pages found on the Overreacted site.
Out-of-the-box, Gatsby does not support markdown in this way, but with an additional plug-in and some minimal configuration, you can easily make it work this way. From a developer's perspective managing a site via markdown files makes running and maintaining a site very easy. All you need to is Visual Studio Code and GIT and a supported hosting environment and you can update your website within minutes. To update the site all you need to do is add a file into the correct folder. Commit the code and then push the branch. Gatsby will then generate all the HTML. If you use a Ci/Cd pipeline that code will then be pushed straight into production automatically.
The learning curve to use Gatsby is straight-forward. To get up and running you need to install some packages and run a few commands. A number of hosting providers inter-grate with Gatsby. With some simple configuration, you can build a simple Ci/Cd pipeline that will deploy your code on the web.
The most common hosting-option used with gatsby is Netlify. After creating a Netlify, you can connect it to your Github account, choose the Gatsby repository, then the site will be deployed. There are other hosting options asides from Netlify you could consider using with Gatsby. These include Netlify, Amazon S3, GitHub Pages, Travis and Heroku, Firebase Host, and Google Cloud.
Why Use Gatsby
Gatsby will not be suitable for every project, but it is a great contender for some. The main reason you would consider Gatsby is that you know to react and you want to build a brochureware website that will not need dynamic functionality. As Gatsby is built using react getting to grips with Gatsby is fairly simple. Performance-wise static-sites are very performant. When the site is compiled every page is pre-built and all the HTML is generated. When someone requests a page it can be served very quickly. Pages will not be blocked waiting for an API or database to respond.
Deploying code is also a lot less risky. As all the pages are pre-built and no code is run no hidden code bugs can accidentally take the site down. Aside from having zero-risk of code issues taking your site down it will also be a lot more security and less susceptible to getting hacked. WordPress websites are renowned for getting hacked due to the plug-in architecture. As Gatsby does not use a database then fundamentally there isn’t anything for hackers to hack.
Another cool thing about Gatsby is that it comes with GraphQl pre-configured. This means that you can use the GraphQL server to build and test your site's API calls that will power the pages. If Gatsby sounds good, the last bit of good news is that it is really simple to get started using it.
How To Get Started With Gatsby
Getting started with Gatsby is very simple. First, you need to install the CLI using this command:
To add Gatsby into your project, you use this command:
Within a terminal, navigate to the webroot and then run this command to start the site:
With the site running, you can view the website on
http://localhost:8000. When you view the site for the first time you will see a page with some content on it. The page will relate to a file within the 'pages' folder. If you want to generate pages via Markdown articles, then you will need to install some additional plug-ins and apply some configurations. You can find more information from this article.
I've built a handful of websites using Gatsby and I would pick Gatsby over WordPress any day of the week. If you need to build a brochureware website or blog then give it a go.