Introduction

Getting started How it works Fast by default The JAMstack Deployment

Basic Gridsome

Directory structure Project configuration Routing Pages Templates Layouts Components Plugins Data Linking Images Page transitions Populating <head> body & html attributes Environment variables Overriding Index.html

Working with data

Fetching data Querying data Filtering data Client-side data Taxonomy pages Paginated data Add global meta data

Styles and Assets

Use CSS in Gridsome Add custom fonts Add external scripts Add SVG icons

Guides

Add a form * Add a search * Add comments * Add Netlify CMS

API Reference

Gridsome CLI Server API Data store API Pages API Client API Transformer API

Deploy

Netlify AWS Amplify Zeit Now Amazon S3 GitLab Pages Github Pages Google Cloud Platform

Contribute

How to contribute How to create a plugin Code of conduct

Help

Prerequisites How to upgrade Troubleshooting Dev tools FAQ

Getting started

Gridsome is a Vue.js-powered modern site generator that makes it easy and fun for developers to create beautiful JAMstack websites & PWAs that are fast by default.

Why Gridsome?

  • Local development with hot-reloading - See code changes in real-time.
  • Data source plugins - Connect to 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.

Prerequisites

You should have basic knowledge about HTML, CSS, Vue.js and how to use the Terminal. Knowing how GraphQL works is a plus, but not required. Gridsome is a great way to learn it.

Gridsome requires Node.js (v8.3+) and recommends Yarn.

How to install

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

Learn more

Alternatives

  • VuePress. Another static site generator for Vue.js. It uses local markdown files for content and is perfect for documentation sites. It is possible to build anything in VuePress and Markdown (Like a blog f.ex).
  • Nuxt. A Universal Vue.js Framework for server-side rendered (SSR) apps and websites. It also has a static site generator feature, but the main focus is SSR.
  • Gatsby.js Gridsome is highly inspired by Gatsby.js (React.js based), which collects data sources and generates a static site from it. Gridsome is an alternative for Gatsby.js.

編輯