Gridsome: Jamstack Framework for Modern Web Development

Gridsome: Jamstack framework for modern web development
Gridsome: Jamstack framework

Overview

These Static Site Generators follow Jamstack Architecture. Jamstack, a comparatively new and latest term that is a modern web development architecture, and Gridsome is a framework following Jamstack Architecture, it is a Vue-powered static site generator for building blazing fast static websites. Now you might think that why Jamstack and Gridsome terms are being so popular in a short span of time. So here comes in the picture its advantages over the architectures and frameworks we are using currently and we will discuss the same in this article with its implementation.
So Let’s Hop On It.

Introduction to Jamstack

Introduction to Gridsome

Architecture of Gridsome

  • Gridsome supports any headless CMS like WordPress, Drupal, sanity.io, Netlify CMS, etc to manage the content of the website.
  • GraphQL is responsible to bring all the required data from the data source and pass it to the frontend.
  • Built Gridsome project can be deployed serverless to Netlify hosting, AWS Amplify, Amazon S3, and many other hosting services.
Gridsome Architecture
Gridsome Architecture
Gridsome Architecture

Working of Gridsome

  • Gridsome builds one .html file and one .json file for every page. After the first page load, it only uses the .json files to prefetch and load data for the next pages. It also builds a .js bundle for each page that needs it (code splitting).

Installation Process

Install Gridsome CLI tool
-Using YARN:yarn global add @gridsome/cli
-Using NPM:npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-site to create a new project
cd my-gridsome-site to move into project directory
gridsome develop to start local dev server at http://localhost:8080
Happy coding 🎉🙌
3. Next steps
Create .vue components in the src/pages directory to create page routes.
Use gridsome build to generate static files in a /dist folder

Benefits of Using Gridsome

Conclusion

Originally published at Reveation Labs Blog Page

Custom Software Development Solutions For Startups and Enterprise Businesses.