Introduction to Gridsome

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 managment - 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

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
4. Happy coding 🎉🙌

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

• How it works
• How Pages work
• How to deploy

Comments

[Charles Anim]

interesting find