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
Installation of the Gridsome is very straight forwards. We need to do the following steps:
yarn global add @gridsome/cli
npm install --global @gridsome/cli
PS: We will be using NPM
Once the installation is done, we will create the Gridsome project:
gridsome create my-gridsome-site to create a new project
cd my-gridsome-site to open folder
gridsome develop to start local dev server at
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 are the building blocks of the project. Components are the smallest unit of the project such as - button, checkbox, radio, etc.
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.
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 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.
gridsome.config.js. This file contains configuration and options for installed plugins and projects such as:
1) Site name
2) Site description
and many more
So, if you want to change the site name using
gridsome.config.js to change that.
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