Introduction to Gridsome
23rd, June 2019
Gridsome is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. Gridsome makes it easy and fun for developers to create fast, beautiful websites without needing to become a performance expert
Why Gridsome?
Local development with hot-reloading — See code changes in real-time.
Data source plugins — Use it for any popular Headless CMSs, APIs or Markdown-files.
File-based page routing — Quickly create and manage routes with files.
Centralized data management — Pull data into a local, unified GraphQL data layer.
Vue.js for frontend — A lightweight and approachable front-end framework.
Auto-optimized code — Get code-splitting and asset optimization out-of-the-box.
Static files generation— Deploy securely to any CDN or static web host
Learn more about how Gridsome works
Prerequisites
You should have basic knowledge about HTML, CSS, Vue.js and how to use the Terminal. Knowing how Vue Single File components & GraphQL works is a plus, but not required. Gridsome is a great way to learn both.
Gridsome requires Node.js and recommends Yarn.
1. Install Gridsome CLI tool
Using yarn:
yarn global add @gridsome/cli
Using npm:
npm install — global @gridsome/cli
2. Create a 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`
3. Next steps
1. Create `.vue` components in the `/pages` directory to create page routes.
2. Use `gridsome build` to generate static files in a `/dist` folder
4. Happy coding 🎉🙌
Learn More on Gridsome
Introduction to Gridsome was originally published in Bee and Bloom on Medium, where people are continuing the conversation by highlighting and responding to this story.