Hello guys, hungry for knowledge, I’m happy to be writing about one of the most awesome web technology I used recently: Gatsby. In this article, I will be talking about what is Gatsby, its benefits, and how to get started.
What is Gatsby
Gatsby is a React-based Framework which is also a super cool modern web site generator to create blazingly fast websites.
And there are my slides where I talked about Gatsby.
With all that said, I know you must have noticed you need to know the basics of JavaScript as well as React to get you going pretty fast on this. But you don’t need to be an expert yet to start learning Gatsby.
Why Gatsby
Gatsby is super cool in creating super-fast web applications, being built with React it’s not surprising why it is fast, right?
Most times a lot of people argue on why there should be a framework (Gatsby) on top of another framework/library (React) since React is a UI library to create websites/apps with seemly fast load speed. Well, the reason is so simple, because Gatsby is a static site generator also a PWA generator which loads essentially needed HTML, CSS, and JavaScript on load time after which prefetch data when other pages are clicked on, making the whole navigation around the site pretty fast. I hope I was able to clear some thoughts here.
Getting Started with Gatsby
To get started with Gatsby you have to make sure you have your tools all set:
- Install Node.
- Get your favorable Code Editor, either VS Code, Sublime Text, or any other preferred.
- Git BASH or any other tool to push our code to GitHub. Maybe you can skip this because we will be making use of our VS Code terminal.
- Of course Browser.
Or you can use the cool online code editor CodeSandBox which is pretty much easy to start with no signup.
Step 1: Select Gatsby.
Step 2: After selecting the Gatsby, CodeSandBox will grab and install all the packages you need for the application to get started including the Gatsby starter theme that will be making use of.
Step 3: Finally, you will have the Gatsby starter theme in front of you.
That’s all for CodeSandBox here, let’s get back to how we can do this on our machine with the whole tools mentioned above.
Step 1: Create a project folder and open it with VS Code.
To open the VS Code terminal use keyboard shortcut “Ctrl + `” or “Ctrl + shift + `“. Next, to install Gatsby globally type the command: npm i -g gatsby
Now we will clone the Gatsby starter theme by using the command:
gatsby new your-preferred-app-name https://github.com/gatsbyjs/gatsby-starter-default
or download the Gatsby starter theme from GitHub.
If your app is done cloning, you will have a close picture of mine below.
WOW! We have done a pretty great job here!
Step 2: Run your Gatsby app.
Type: cd your-preferred-app-name to navigate to your app folder, then run the Gatsby site by typing gatsby develop, and your site will be much ready in the localhost just like in the image below.
So my own localhost link says http://localhost:8001 because I have something running in my localhost:8000, at the moment of writing this article. If you go ahead to click on that link it will open your Gatsby site on your default browser. Super cool, right?
That’s how to get pretty much started with creating a Gatsby application within minutes, easily push it to GitHub, and deploy to your favorite Cloud machine (I use Netlify). I the future I will write on how to build a real web app with Gatsby because I love Gatsby a lot and find it fun building with it.
It will also interest you to know that Gatsby has a large plugin ecosystem to get you with most integration with the CMS’s, NewsLetter, and etc.
I hope this article helped you understand Gatsby, why you should try Gatsby, and how to build interesting static sites with it.
