Gridsome is a static site generator used for building powerful frontend applications, it was built on the Vue.js framework. One of the beauties of Gridsome apart from its ability to generate server-side rendered applications is its compatibility with any headless CMS out there.
In this article, we’ll be looking at how to build a blog application using Gridsome for the frontend and Markdown for content.
Other prerequisites include:
- NPM or Yarn
- Gridsome CLI
Creating the project
To create the application using the Gridsome CLI:
Install the Gridome CLI
npm install -g @gridsome/cli
yarn global add @gridsome/cli
Creating the project
Creating a project using the CLI tool will scaffold the application using the default starter template.
gridsome create my-gridsome-blog
(or any other name you want to use )
Running the command above will create a folder in that directory
Now we can start the development server by running:
cd my-gridsome-blog && gridsome develop
There are three commands you need to know when working with Gridsome:
gridsome developto start the local server for development, this application is usually available at localhost:8080.
gridsome exploreto start the local server only to allow us to explore the GraphQL data.
gridsome buildto build to the application for production, the production-ready files will be available in the /dist folder.
An overview of Gridsome
Before we dive into development, we need to understand a few concepts about Gridsome. Gridsome is said to be a framework on its own, so it brings a new way to structure applications.
If you already have some knowledge about Gridsome, you can skip to this section.
This is how a basic Gridsome project is structured, we’ll be getting into more detail below,
├── package.json ├── gridsome.config.js ├── gridsome.server.js` ├── static/ └── src/ ├── main.js ├── index.html ├── App.vue ├── layouts/ │ └── Default.vue ├── pages/ │ ├── Index.vue │ └── Blog.vue └── templates/ └── BlogPost.vue
We’ll be looking at the structure by directories.
The root directory
This file contains information about the project and the plugins installed.
This file contains the configurations of the application and can be used to set options for the installed plugins.
This file is used to perform operations on the Gridsome server, it is optional at times, but in our case, this is the file we’ll use to create pages from the entries in the GraphQL layer.
The /src directory
This directory contains the main files and sub-directories which make up the project.
Import global CSS and scripts here, the client API can also be used here. This file exports a function with access to Vue. Components, directives and plugins can be registered inside this function.
Place reusable components in this folder, buttons for example, or individual postcards.
Create new components in this directory to define layouts that will be shared across pages and templates.
Gridsome has a file-based routing system, so single file components in src/pages would be used as the component on a route with the matching name. For example:
src/pages/Index.vuewill be available at
src/pages/Blog.vuewill be available at
src/pages/user/Settings.vuewill be available at
Templates are used to generate single pages for every node in our GraphQL layer, A single file component in this directory must match the node’s typeName in order for it to be used, more on that later.
The /static directory
All files placed here are not modified by Gridsome in any way, they will be available in the root directory on our site after it’s deployed. For example, static/robots.txt will be available at yoursite.com/robots.txt.