Gatsby is a modern front-end framework for creating static sites and applications. It is built on modern technologies, for example: React, GraphQL, WebPack, and JavaScript. One thing that makes Gatsby unique is that you don’t have to know react or GraphQL to start working with Gatsby. You can learn Gatsby as a way to introduce yourself to the world of React, GraphQL, and other modern front end development in general. Therefore creating sites with Gatsby is fun, productive, and comfortable, and the result is excellent. And it makes your life much more comfortable as a developer.
Table of Contents
Why we need Gatsby?
The web is changing. Videos and images are getting large. Users want more immersive experiences, and they expect it at near-instant speed. Many websites are using older technology to try to create a modern understanding, and it just doesn’t work.
Optimization for search engines, page load times, and images can take time away from building a beautiful site. Gatsby solves these challenges so you can make cool stuff. Gatsby takes websites to a new level of fast. So, luckily you don’t have to stress about your website’s performance anymore with Gatsby.
Getting started with Gatsby
The first thing we’re going to do is to install Gatsby’s CLI. For installing this, make sure you have already installed NPM in your system. Open your command prompt and type the following command.
npm i –g gatsby-cli
Now, we’ll create our project folder. For this, you need to run the following command.
gatsby new <Project_Name>
The above command will create a folder for your project. Open the folder in the VSCode or any other text editor you want.
The folder has different files, and the structure looks like this
package.json:
It contains all the dependencies like Gatsby, react, react-dom, react-helmet, etc.
gatsby-config.js
It is the main configuration file for a Gatsby website. This is where you can add information about the metadata like site title, description and Gatsby plugins you’d like to include.
gatsby-browser.js
It uses Gatsby’s browser APIs to customize, and extend default settings affecting the browser.
gatsby-node.js
It allows implementing Gatsby’s Node.js APIs to customize and extend default settings affecting the build process.
gatsby-ssr.js
This allows customization of Gatsby’s settings, which affect server-side rendering.
To run the server, type gatsby develop in the terminal. It will run our site on localhost:8000 most probably.
Creating a simple static site
Now, we’re going to make three simple pages of a website in a few minutes. Don’t worry; you will learn this quickly if you follow the article correctly.
To change the background color, go to the src\components\header.js file and change the styles accordingly.
<header
style={{
background: `blue`,
marginBottom: `0`,
}}
> Note: You don’t need to restart the server to see the changes because it is hot reloading, so as soon as I save these updates, there is no need to reload the page.
To change the site title, go to the gatsby-config.js file and change the title.
siteMetadata: {
title: `CodeLeaks`
}, Note: You have to reload the server if you make changes in the config file.
Next, we’ll do start changes in our index.js file.
import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Hello, Welcome to CodeLeaks</h1>
<p>Welcome to the new sample Gatsby site.</p>
</Layout>
)
export default IndexPage This is a functional-based component in which we cover our code in the Layout component. In the Layout, we can include our header, footer, or any other element which we want to add in all pages.
Next
we create two other files, services.js and about.js in the pages folder.
import React from 'react'
import Layout from "../components/layout"
import SEO from "../components/seo"
const servicesPage = () => (
<Layout>
<SEO title="Services" />
<div>
<h1>Our Services!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus et
dolores dolore delectus reiciendis maiores exercitationem nobis culpa
veritatis molestiae, labore cupiditate corrupti quidem esse vel ducimus.
Vero, fugiat voluptatibus.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus et
dolores dolore delectus reiciendis maiores exercitationem nobis culpa
veritatis molestiae, labore cupiditate corrupti quidem esse vel ducimus.
Vero, fugiat voluptatibus.
</p>
</div>
</Layout>
)
export default servicesPage
import React from 'react'
import Layout from "../components/layout"
import SEO from "../components/seo"
const aboutPage = () => (
<Layout>
<SEO title="About" />
<div>
<h1>About Us!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus et
dolores dolore delectus reiciendis maiores exercitationem nobis culpa
veritatis molestiae, labore cupiditate corrupti quidem esse vel ducimus.
Vero, fugiat voluptatibus.
</p>
</div>
</Layout>
)
export default aboutPage These are the three pages in our primary site. The next part is we want to create a NavBar through which we could navigate these pages. For this, create a nav.js file in the components folder.
import Link from 'gatsby-link'
const nav = () => (
<div style={{
background: `#f4f4f4`,
paddingTop: `10px`
}}>
<ul style={{
listStyle: `none`,
display: `flex`,
justifyContent: `space-evenly`
}}>
<li><Link to="/"> Home </Link></li>
<li><Link to="/about"> About </Link></li>
<li><Link to="/services"> Services </Link></li>
</ul>
</div>
)
export default nav The final step is to include the nav.js in our layout component. So, it could be rendered on every page like the header. We have to make two changes in this file. First, import the nav.js file in our layout.js file. Then, add the Nav component just after the Header.
import Nav from "./nav"
. . .
<Header siteTitle={data.site.siteMetadata.title} />
<Nav /> Here is the final look of our website.
The most amazing thing which you’ll experience about is performance. Pages switch really fast.
Conclusion:
Gatsby is more convenient than creating a simple react app, or using Jekyll or any other frameworks. What makes Gatsby unique is its faster performance. This sites are two to three times faster than similar types of websites. It is based on the most popular and influential technologies, and it is straightforward and fun to learn and work with this new Framework.
