
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
- Build Blog Site using Gatsby JS — Part 1 (Getting Started)
- Build Blog Site using Gatsby JS — Part 2 (Chakra UI & Home Page)
- Build Blog Site using Gatsby JS — Part 3 (Gatsby Plugin Mdx)
- Build Blog Site using Gatsby JS — Part 4 (React Helmet and SEO tag)
- 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.