Gridsome is a Vue-powered static site generator for building websites for any CMS or data source. It uses a local unified GraphQL data layer for all data, and can generate thousands of pages in seconds. Gridsome is heavily inspired by Gatsby (A React.js alternative).

Step 1: Getting Started with Gridsome

Setup with Gridsome by using the CLI package from the npm registry:

npx @gridsome/cli create my-gridsome-project

The above command will have setup a gridsome project, ready to go. This includes scripts in the package.json file such as develop which will start a local development server.

yarn develop

To learn more about developing with Gridsome, view their documentation:

Step 2: Preparing to Deploy

To deploy to Now, you need to tell Now how to build our Gridsome project. You can do this by first creating a now.json file:

  "version": 2,
  "builds": [
    { "src": "package.json", "use": "@now/static-build" }

The above configures the project to:

  • Build on Now 2.0
  • When deploying, use the @now/static-build builder to build our app

    However, the @now/static-build builder requires that you pass it instructions on how to build the project. We can do this by creating a now-build script in the package.json file:

  "scripts": {
    "now-build": "yarn build"

And with that, your deployment setup is complete and the Gridsome project is ready to deploy live.

Step 3: Deploying to Now

The final step is to run the following in your terminal, from the root of your Gridsome project: