Gridsome for beginners #2: Project structure Walkthrough

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

Comments

[Muhammad Hizbullah]

i use gridsome for build my blog and i use Gitalk for a comment feature from gridsome-plugin-gitalk, but when i deploy it in netlify I get error like below

Error: render function or template not defined in component: Gitalk

i was imported Gitalk component from vue-gitalk package, but it's still not work.

[Neha Sharma]

Hello,

Is it possible for you to share the repo?

[Muhammad Hizbullah]

it was solved, thank you for your response.

[Jordi Enric]

I recently used Gridsome to build my blog/portfolio website (joen.co) and I love the developer experience. One tip I can share for better project structure is to set a folder with global SCSS/SASS so you don't have to write global styles on your components. I wrote a quick article explaining how to do it here:
dev.to/jordienr/how-to-add-a-globa...

It's great because this way you can use your scss variables in your components :)

[Neha Sharma]

Thank you for sharing this. Indeed very useful point and article.