Gatsby websites are becoming popular day by day. Nowadays, most popular websites use Gatsby because of its speed, SEO, etc., and if you don't know anything about Gatsby, it's probably worth learning it in 2021.
What is Gatsby?
GatsbyJS is a static site generator based on React and powered by GraphQL. Gatsby is an open source framework that combines the features of React, GraphQL and Webpack into a single tool for building static websites and applications. Although the term “static site generator” has been around for a while, Gatsby is more of a modern front-end framework than a traditional static site generator.
What are static sites?
Static websites have been around for a long time. This is probably the initial website, with just HTML, CSS, and JavaScript. They are not rendered in real time because there is no server-side programming, no database, etc.
A static site generator is a tool that creates static web pages. JS frameworks and libraries, on the other hand, typically produce HTML content client-side at runtime. This material is generated by static site generators during site construction. Then, once loaded, React takes over and you have a single page application!
Why should you consider using Gatsby?
SEO
Using GatsbyJs allows your websites to use multiple internal code optimization strategies. As a result, search engines will rank your website higher. There are a number of plugins that can help you.
Plugins
Gatsby offers amazing plugins that can help your website in different aspects. You can install these plugins using NPM or Yarn.
Some of the popular plugins are Source File-System, Contentful, Sharp Plugin, etc. You can find all the plugins on their official website here.
Speed
Gatsby sites are much faster than most alternatives, even compared to cached sites using WordPress and things like that, because this static site is really hard to beat in terms of speed and performance.
Models
There are enough GatsbyJs Starter repositories and templates available that cloning and editing content is simple. This allows you to quickly and efficiently create websites such as your blog or portfolio.
Why should you avoid Gatsby?
Build time
As the amount of content on your website increases, so does the time it takes to produce it. This is not only annoying during development, but also wastes time during deployment. Gatsby is not recommended if you want to create a site that changes frequently.
Dynamic Websites
Sites with many dynamically produced routes, because you won't be able to take advantage of the benefits of statically generated pages if you don't know what they are at build time.
Complex sites
Since complex sites grow quickly and take a long time to build, they continually add new pages and elements. Although many e-commerce businesses can and do use statically created sites, if build time becomes an issue, it's probably time to ditch them in favor of dynamically generated sites like Gatsby.
Create your first Gatsby website
Installing the Gatsby CLI
The first step is to install Gatsby CLI. You can create and edit a new site using the Gatsby command line interface. To install Gatsby CLI, simply run:
npm install -g gatsby-cli
THE -g
The argument indicates that the Gatsby CLI is installed globally rather than locally. As a result, you will be able to use the tool in any directory.
Starter Models
As I mentioned earlier, you don't need to create a website from scratch, instead we can use starter templates available on the official Gatsby website.
For this tutorial we will use gatsby-starter-default
To do this, run the command below on your terminal.
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
gatsby new
creates a new website. You will get a simple site if you use gatsby new alone. Combining Gatsby New with a starter template is the most common approach to using it.
Run your application locally
Once done, you should see a message that the Gatsby site has been started successfully. Now run
cd gatsby-starter-default && gatsby develop
This command navigates to our new Gatsby folder and initializes the files, so we can view it locally. Open your browser and navigate to http://localhost:8000/
You should see a default stater page, just like the image below.
Organizing your website metadata correctly is essential if you want a search engine to find your website. The gatsby-config.js file allows you to customize your website data.
In order to make your website accessible to everyone in the world, you need to deploy your website in a hosting service. You can deploy a Gatsby website on Netfliy, Vercel, Azure, Gatsby Cloud, Heroku, AWS, IIS, Firebase, etc. But for this example we will use Netlify
Deploying a website on Netlify
Before deploying our website, we first need to generate a build folder containing static files. To do this race
gatsby build
Once finished, you should see a folder named public
. That's it, we only need this folder to deploy in Netlify.
Go to Netlify website and if you don't have an account, click on the register button and create an account. Don't worry, Netfliy is free hosting and it won't charge you anything. Once registered, you should be redirected to the Netfliy dashboard, which will look like this.
Now click on Sites in the Netlify menu, and you should see a page with a text “Want to deploy a new site without logging into Git? Drag and drop your site's output folder here”. Drag and drop your public folder to this placeholder, wait for a while, then your website will be deployed on Netfliy. If deployed successfully, you should see something similar to the image below.
Conclusion
I hope you found this article useful. If you need any help, let me know in the comments section.
Would you like to buy me a coffee, you can do it here.
Let's connect on Twitter And LinkedIn.
👋 Thanks for reading, see you next time