Build Blog Site using Gatsby JS — Part 1 (Getting Started)

Hello everyone, this is my first tutorial series, where I’ll go show you to get started building a static web blog. Here we will use technology Gatsby JS for the main framework and Chakra UI for styling. Why did I choose it? the answer is Gatsby has a powerful performance to generate a static site and it is React-based, so we can separate a part of the part website into a component, and Gatsby also has SPA and PWA features, it will make website performance faster. okay, let's go to the main topic below.

Demo: https://gatsby-blog-starterr.netlify.app

Repository: https://github.com/dicka88/gatsby-blog-starter

1. Build Blog Site using Gatsby JS — Part 1 (Getting Started)
2. Build Blog Site using Gatsby JS — Part 2 (Chakra UI & Home Page)
3. Build Blog Site using Gatsby JS — Part 3 (Gatsby Plugin Mdx)
4. Build Blog Site using Gatsby JS — Part 4 (React Helmet and SEO tag)
5. Build Blog Site using Gatsby JS — Part 5 (Deploy site to Netlify)

Getting Started with Gatsby JS

Based on the official Gatsby JS website. Gatsby is the fast and flexible framework that makes building websites with any CMS, API, or database fun again. Build and deploy headless websites that drive more traffic, convert better, and earn more revenue! It can be used to build a static site website progressive web apps, follow the latest web standards, and optimized web security.

Installing Gatsby JS

To set up the environment, ensure you have node js version above 14+ for good working, and you must have npm/yarn. There are two ways to init a gatsby JS First, you can install it globally on your system

npm i -g gatsby-cli

and then create a new project

gatsby new <your project name>

or, it didn’t want gatsby installed on your system, use npx to execute directly the gatsby-cli, basically, npx is installed on your node environment.

npx gatsby-cli new <your project name>

Create First Gatsby JS Project

Basically creating a new Gatsby project is similar to React CRA.

gatsby new blog

and then will prompt a specification for your project

info Initialising git in blog info Create initial git commit in blog info Your new Gatsby site has been successfully bootstrapped. Start developing it by running: cd blog gatsby develop

Start your project with npm start on your project work directory.

cd blog npm start

Alright, your first Gatsby JS is running properly.

Conclusion

Installing Gatsby JS and creating a new project is easy, only use gatsby new blog and then run the app npm start the app will run.