This is a series of Blog posts that follow me as I learnt about using Gatsby . There will be a focus on all the landmines I step on along the way to make sure they can be learnt from!
The main font of knowledge comes from Wes Bos' Master-Gatsby course. Is it any good? I don't know yet but lets see if I figure it out as I progress through.
In this post we will:
- Learn why we care about Gatsby
- Touch on its drawbacks
- Install prerequisites
- Install CLIs
- Create a new Gatsby App
- Make our first page
Prologue - What is so great about Gatsby?
It's the latest hotness (as of 2020 anyhow) but what makes it good?
It's a framework that lets us make use of many of the latest developments in Web Dev without having to, well, know much about them. Gatsby uses React but builds upon it.
Mostly Its fast. Loading pages is real quick with little effort. It does this:
By being a static site generator building what is needed before someone asks for it. Kinda how websites used to be back in the day. This means Gatsby has a build step where all the HTML is ready to go.
By calculating CSS required at build time.
Rehydration - It can use the static page to then leverage that, rehydrating to be a React app. So things can be changed.
Lazy Loading - Don't need to load things till they are ready to be seen Gatsby makes this easy to activate as well as other smart ways of handling images efficiently.
Routing built in - Allows loading to be handles within Gatsby, caching content as needed.
It also has a whole bunch of plug-ins to expand the functionality. This makes it easy to use other's contributions for doing things rather than having to roll your own. This, along with templates and built in stuff just makes it quick to get sites up and running!
Drawbacks
What doesn't it do? It doesn't have anything for the backend so we need a CMS of some sort. For that we will be using Sanity which is worth its own post later
And since it is static and sometimes dynamic.. it does have a little weirdness we need to look at at a later point.
Episode 1 - Setting up for Gatsby
We are using Gatsy for the Front End and Sanity for the backend. To get started there are a bunch of things that require setting up.
The Terminal Stuff
They both need an up to date version of Node, so make sure you do that. Else it will fail.
The Gatsby CLI and Sanity CLI tools are very useful and can be installed with: npm install gatsby-cli @sanity/cli -g. However this led me to some issues:
On the gatsy-cli I got the following error:
cannot read property 'matches' of undefined
Searching on Slack, this turned out to require a combination of upgrading HomeBrew, MacOS and XCode as well as not using node version 14. Fun!
The sanity CLI also errored out till I installed a new version of XCode (which I did to fix the gatsby cli)
Other Issues not really related to Gatsby
The course comes with a configured ESLint which came up with the following error: eslint: createrequire is not a function referenced from:
This turned out to be due to an old version of VS Code which was inexplicably running from the Downloads folder on Mac. When I moved to Applications I was able to update and the error went away.
Phew! Nothing a few heavy googles can't fix.
When setting up for a new project, its really important to pay attention to the output to stop these errors as that can give you headaches down the line!
Our first Gatsby Environment
With the Gatsby cli installed we can build a new starter site with the following command:
gatsby new SITE_NAME https://github.com/gatsbyjs/gatsby-starter-hello-world
Where, in case it wasnt obvious, it will create a folder called SITE_NAME. So probably you can think of a better name for that. If you leave off the URL it will grab a default template
So a new Gatsby site consists of:
Node Modules - If you don't know what it is, for now assume it is behind the scenes stuff.
Static, simple static stuff like favicons and logos. You don't want to use this for other static stuff as there is a better place for it for Gatsby to work on it properly.
Src, where Gatsby will live.By default you get Components, Images and Pages folders. Pages is fixed by Gatsby otherwise we can add other folders as needed. The basic structure will do for the time being.
When you build you will also get a public folder which contains the built version of the site.
Pages
Most of what we care about lives in Src and pages is a good place to start.
We can have dynamically created pages or created by file system routing. We can have a 'index.js' file to start with, though this is actually provided by default. The basic idea is as follows:
import React from 'react';
function HomePage() {
return (
<div>
<p>This is the homepage woohoo!</p>
</div>
);
}
export default HomePage
If you know React, that should not be too shocking. Now that you got a shiny page lets see how it looks! But how...?
Handily Gatsby has a develop script in npm which we can start with npm run develop. This runs the server that llows us to see our work and also reloads when we make changes. So far so good. You should get a localhost address referenced in the terminal to connect to.
Note it also talks about GraphiQL as something to view. I'll talk about that in another post!
Anyhow you have your first Gatsby page up and running!
Bonus: 404 Pages
So if you type in any page that doesn't exist. You will currently get a clever Gatsby Development 404 page which has some helpful info to debug things. You can make you own 404 page to replace this for production in a similar way to the Index.js but calling it.... 404.js.
Wrap Up.
So hopefully that gives a good sense of how to hit the ground running, next time we can see how we can do more than just a homepage and a 404 page.
Top comments (0)