In this Gatsby.js tutorial, we have prepared the local environment to work on, installed the dependencies and created the first Gatsby project framework.
Table Of Contents:
- What is Gatsby.js
- Why it was made
- Use cases
- Prior knowledge requirements
- Setting up your workflow
- Creating your first Gatsby project
What is Gatsby.js
Gatsby.js is a static site generator with some caveats. It creates websites that do not have to communicate with other servers to request new data to update live on the website like is done with dynamic servers. Though the main caveat is that Gatsby.js can do this just in a more roundabout way as that is not the original use case for Gatsby.js
Why it was made
Gatsby.js was made to generate static sites. Static sites are helpful for a couple of reasons.
One reason is that they are more secure.
One other reason is the increased performance of the website, which often causes them to load faster than dynamic sites.
Another reason is that they tend to be easier to manage due to the reduced complexity of most situations.
Finally, static sites take in static data meaning no dynamic updates to the data, which means systems like comments are possible, but Gatsby has some solutions though not perfect.
This is for just static sites. Gatsby.js is a static site generator. It is a tool that creates static sites, specifically the pages and the content behind them, through an abstraction that makes specific tasks much more accessible.
Gatsby lets you do it with a much higher level of control on every fine detail. For example create, when creating a blog, there are many elements of each blog post that are the same; hence you could create a template out of them and then connect it to a content management system (CMS), for example, WordPress, through WordPress you could make the blog posts, and not have to worry about all other the other things that your blog posts have like links to your leading site and so on. This can be achieved through many no-code websites like Squarespace, WordPress, or anything similar without Gatsby.
Like I said in the previous example, a prime example of using Gatsby.js could be a blog site.
A more common use case for Gatsby.js would be for a corporate website, a portfolio site, or any other situation where you have little to no user data submitted and displayed on the website. That adds a level of complexity easier with other tools.
When someone is familiar with the wide range of plugins to choose from, this wide range of plugins and other great tools has to over ends up giving a great user experience, which is reason enough to pick it other than some other technology.
Prior knowledge requirements
HTML: Which stands for HyperText Markup Language. It is used to define the structure of your website. When your first create your website, you may just start with this, but as time goes on, you will likely be adding more to it or even take a layer of abstraction back like is done with Gatsby. You would want to have a strong understanding of HTML as you often use it with JSX.
React: A library built to allow you to give structure to and help you build UIs. You only need a basic understanding assuming you have the previous requirements.
There are many more tools that you likely will want to learn to effectively use Gatsby.js, like the many plugins but even more likely GraphQL, but that can come later.
Setting up your workflow
Getting started with Gatsby.js first you are going to want to install the following tools Node.js, Git, the Gatsby CLI, and VS Code.
First you want to check if you have homebrew with
in your terminal
else install homebrew from homebrew installation guide
Then install xcode
Now you can install node.js with
brew install node
Download the LTS for Windows from node.js
npm install -g gatsby-cli
And now VS Code which is a code editor which I recommend due to the many features it provides for particually web development. The download is VS Code
Creating your first Gatsby project
Now, this Gatsby project is going to barebone, but feel free to have some fun mess around and try new things and see what happens.
First, you want open VS Code and terminal in VS Code, which can be done with the Terminal Button on the top bar; you may want to learn the shortcut that tells you when holding your cursor over the button. Now in the terminal run.
You will be shown the following, hit enter to continue on each step
What would you like to call your site? ✔ · My First Gatsby Site
What would you like to name the folder where your site will be created? ✔ Desktop/ my-first-gatsby-site
✔ Will you be using a CMS? · No (or I'll add it later)
✔ Would you like to install a styling system? · No (or I'll add it later)
✔ Would you like to install additional features with other plugins? · Done
Thanks! Here's what we'll now do: 🛠 Create a new Gatsby site in the folder my-first-gatsby-site ? Shall we do this? (Y/n) › Yes
To run your site type the following
Your website will be opened to http://localhost:8000/
Enjoy and have some fun!