Read the introduction of the Gridsome here

In the last post, we learned about what is JAMStack and Gridsome. Today we are going to see:

1) How to install Gridsome
2) Structure of the project

How to install Gridsome

Installation of the Gridsome is very straight forwards. We need to do the following steps:

Using Yarn

yarn global add @gridsome/cli

Using NPM

npm install --global @gridsome/cli

PS: We will be using NPM

Once the installation is done, we will create the Gridsome project:

1) gridsome create my-gridsome-site to create a new project
2) cd my-gridsome-site to open folder
3) gridsome develop to start local dev server at http://localhost:8080

Structure of the project

Once you will successfully install the Gridsome, you will have the following folder structure. Every folder has the readme.md which tells about the folder.

components

Components are the building blocks of the project. Components are the smallest unit of the project such as - button, checkbox, radio, etc.

Pages

Components come together to build the pages. Such as aboutus, contactus, services, etc. All the components get imported to the pages to build the page.

Layouts

Layout components are used to wrap the pages. Layouts should contain the components like - header, footer, sidebar etc. that will be used across the site.

Templates

Templates are used to create single pages for nodes in a collection. Nodes need a corresponding page in order to be presented on its own URL.

config files

gridsome.config.js

Gridsome requires gridsome.config.js. This file contains configuration and options for installed plugins and projects such as:

1) Site name
2) Site description
3) Plugins
4) Metadata
5) Templates

and many more

So, if you want to change the site name using gridsome.config.js to change that.

gridsome.server.js

Gridsome has many APIs such as Pages API, Server API, Data API. Gridsome.server.js is optional file and used when we want to hook to the Gridsome server

In the next blog, we will learn about the core concepts of the Gridsome