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 by routing a page request to the CMS, pages are generated by compiling the site. Gatsby.JS 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. 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.
When I first heard about Gatsby, my first thought was "why would anyone want to build a static site nowadays"?!?!? If you are like me and you are wondering the same thing, you may be surprised that there are a number of really great reasons. 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 is Visual Studio Code, 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 straightforward. To get up and running you need to install some packages and run a few commands. A number of hosting providers. The most common hosting option being Netlify. After creating a Netlify account, 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 Amazon S3, GitHub Pages, Travis, 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 ReactJS and you want to build a brochureware website that will not need dynamic functionality. As Gatsby is built using ReactJS, getting to grips with it for experienced developers 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 on demand, no code bugs can accidentally take the site down. Aside from having zero-risk deploys, you also need to think about security. A static site will be a lot 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. If Gatsby sounds good and you are still on the fence, the last bit of good news is that it is really simple to get started using it and its FREE!
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, 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 URL will relate to a file within the 'pages' folder. If you want to use Markdown to write content, you will need to install some additional plug-ins and apply some configurations. You can find more information on how to do this 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.