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
Top comments (5)
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 belowError: render function or template not defined in component: Gitalk
i was imported Gitalk component from
vue-gitalk
package, but it's still not work.Hello,
Is it possible for you to share the repo?
it was solved, thank you for your response.
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 :)
Thank you for sharing this. Indeed very useful point and article.