How to build website using Gatsby JS theme?

Gatsby Js if you are a developer you must have heard about gatsbyjs, gatsby js is static site generator. today here we will discuss how you can use gatsbyjs theme to build website very quickly.

So this is for everyone who just want to invest their time in creating content, website development is done by someone else, so here is gatsbyjs theme a fresh new concept which helps you build blazing fast, offline, seo friendly, website in few steps.

Let’s start building website

I assume you have below items installed on you machine

1. NodeJs https://nodejs.org/en/download/
2. GatsbyJS `npm install -g gatsby-cli`

Step 1

```

npm init -y

```

Create Package.json file and initialised with some default values

Add below script blog in package.json file, this is to run and build app with gatsby command

"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"serve": "gatsby serve",
"clean": "gatsby clean"
},

Step 2

Install dependencies

Main dependencies to build gatsby site is gatsbyjs, react, react-dom

npm install gatsby react react-dom

Step 3

Install theme

Select theme from https://www.gatsbyjs.org/plugins/

Now install npm @mhjadav/gatsby-theme-cv

We will use @mhjadav/gatsby-theme-cv as example theme for this tutorial you can use any theme of your choice

Step 4

Create file gatsby-config.js in root directory

Step 5

Let’s include theme in gatsby config file, Sample code Click here for config file

You need to set two thing here —

Theme name — which theme you want to use all template work is done in this theme, like rendering, creating pages, build app etc.

resolve: ‘@mhjadav/gatsby-theme-cv’

And options required for theme like in our example, we just need contentPath and base path

options: {

contentPath: ‘data’,

basePath: ‘/’

}

Your website is almost ready to go live, now it’s your turn, let’s add content

Step 6

Create data directory in root directory, because we have specified content path as data

In this theme we are using JSON content transformer so we will add JSON file you can use file type as suggested in theme you select

Create JSON file in data directory with any name

Sample JSON File Click Here

Add images directory if required, required in this theme so let’s create images directory and add images

Add Content as in example code

Yo yo! your content is ready website is ready to live, let’s run build website

Step 7

Run

gatsby develop

http://localhost:8000

Yippee! your website is ready.

Run below command to build production build

gatsby build

Your static site is ready in public directory in root.

Now you can push public directory content to hosting server of you choice.

I will write another blog how to host site with Netlify or any other similar service where you can host website in simple steps.

I hope this is useful to you.

Github link — https://github.com/nirlom-team/gatsby-theme-cv

Demo Link — https://cv.mojaave.com

Follow me on twitter — https://twitter.com/mhjadav