Overview
A Modern frontend framework used for creating static sites and applications. Gatsby is widely known as a static site generator.It generates static HTML pages using a combo of templates, components & data.
In this blog article we will learn how to create and set up a project in gatsby.
What is Gatsby ? How it will Work
As I mentioned earlier Gatsby is a static site generator. Now, if you have a question about what a static site generator is? and how it will work? so, a static site generator is an application that creates HTML pages from templates or components and a given content source.
Gatsby works as an alternative to database-driven content management systems, such as WordPress, contentful and Drupal.
Generally, content is managed and stored in a database.
You can see the workflow :
What is GraphQL?
Gatsby uses a combination of React and GraphQL.
Now, if you are not familiar with GraphQL, It is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.
It provides a complete and understandable description of the data in your API, It also gives clients the power to ask for exactly what they need and nothing more, enables powerful developer tools.
It uses many different data sources for the website like WordPress, Shopify, contentful, firebase, file system.
Gatsby Combines all sources into a unified GraphQL layer, for this you need to do a couple of things :
Install and Setup
First of all, we need to install gatsby cli (you will need to have Node 8.16.0 or Node 10.16.0 or the latest version on your local system)
npm install -g gatsby-cli
If you get a permission error you have to include sudo as a prefix
sudo npm install -g gatsby-cli
To create a Project called Gatsby-Demo, run the following command on your terminal
Gatsby new Gatsby-Demo
To run your website
cd gatsby-demo npm run develop
Add custom style in Gatsby
To add custom style in our Gatsby project for that, you need to create your stylesheet as below folder structure
Now include this custom style.css in pages/index.js
import "../assets/css/style.css"
Add Reactstrap and Bootstrap
To add an external CSS framework like bootstrap you need to install it first through npm
npm install bootstrap jquery @popperjs/core
After installing bootstrap include reactstrap
Now we will install reactstrap from NPM. For this use the following command.
npm install --save reactstrap react react-dom
To include Bootstrap CSS in our project write the following code in a gatsby-browser.js file.
import ‘bootstrap/dist/css/bootstrap.min.css’;
Now we can use all components of reactstrap from https://6-4-0–reactstrap.netlify.app/components/alerts/
To get more idea of reactstrap you can also refer this blog How a designer can start React JS
Add sass in Gatsby project
Create a style.scss file in src > scss folder, you can refer below screenshot
Sass will compile .sass and .scss files to .css files for you, so you can write your stylesheets with more advanced features.
To Add sass into gatsby project First, include the sass gatsby plugin called “gatsby-plugin-sass” from npm.
npm install sass gatsby-plugin-sass
After that include the plugin in your “gatsby-config.js” file.
plugins: [`gatsby-plugin-sass`]
You can refer below screenshot,
Write your stylesheets as .sass or .scss files and import them as we include custom style.css.
import "./style.scss"
or
import "./style.sass"
Gatsby Js and React Js
Create React App and Gatsby site uses React and allows clients to make apps more quickly and efficiently. Apart from that, there are some important differences.
Gatsby is a framework of React so there are some functionalities and file structures like node-modules, public, src are the same as react folder structure. The difference is that Gatsby adds some more configuration files that makes it easy to use.
You can see the folder structure of react and Gatsby
React Js Folder structure
Gatsby Js Folder structure
Routing
Gatsby provides a component and a navigate function to help you direct users through pages on your site.
Create React App will require you to eject on another workaround to edit the webpack configuration. Gatsby allows custom configuration of webpack from the gatsby-node.js file.
For More Information you can refer official website of gatsby Gatsby Way of Building
Conclusion
Hoping that this blog article will help you to start a project in Gatsby. You can also use styling in Scss or sass also. We will learn how to make components , link it with it’s internal page and connect WordPress with Gatsby.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
