Neha Sharma 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
