static-cms/website/content/docs/gridsome.mdx

---
group: Guides
title: Gridsome
weight: 70
---

<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>

This guide will help you get started using Static CMS and Gridsome.

## How to install Gridsome
### 1. Install Gridsome CLI tool

```bash
# Using Yarn
yarn global add @gridsome/cli

# Using NPM
npm install --global @gridsome/cli
```

## Create a new Gridsome website

```bash
# To create a new project run
gridsome create gridsome-netlify-blog

# Then navigate to the project folder
cd gridsome-netlify-blog

# To start local dev server at http://localhost:8080
gridsome develop
```

### Install Static CMS the required dependencies to your project

```bash

# Using Yarn
yarn add @staticcms/core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark

# Using NPM
npm add @staticcms/core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
```

Now that the plugins are installed, it's time to setup the configuration. Open the `gridsome.config.js` file and update its content to:

```js
module.exports = {
  sitetitle: 'Gridsome',
  transformers: {
    remark: {
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      anchorClasstitle: 'icon icon-link'
    }
  },

  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'posts/**/*.md',
        typetitle: 'Post'
      }
    },
    {
      use: `gridsome-plugin-netlify-cms`,
      options: {
        publicPath: `/admin`
      }
    },
  ]
}
```

Please read [gridsome-plugin-netlify-cms](https://gridsome.org/plugins/gridsome-plugin-netlify-cms), [transformer-remark](https://gridsome.org/plugins/@gridsome/transformer-remark) for more information.

## Static CMS setup

1. Create an `admin` directory inside the `src`
2. Create an `uploads` directory inside the root of your project
3. Add `index.html`, `index.js` and a `config.yml` file to your `admin` directory

Your `index.html` should look like this:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Static CMS</title>
  </head>
  <body>
    <script src="index.js" type="module"></script>
  </body>
</html>
```

Your `index.js` should look like this:

```js
import CMS from "@staticcms/core"
```

Your `config.yml` for GitHub should look like this:

```yml
backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to main)

media_folder: "static/uploads"
public_folder: "/uploads"

collections:
  - name: "posts"
    label: "Posts"
    folder: "posts"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Excerpt", name: "excerpt", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Body", name: "body", widget: "markdown"}
```

## Push to GitHub

It's now time to commit your changes and push to GitHub.

```bash
git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
git push -u origin main
```

### Add your repo to Netlify

Go to Netlify and select 'New Site from Git'. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.

### Enable Identity and Git Gateway

Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

1. Go to **Settings > Identity**, and select **Enable Identity service**.
2. Under **Registration preferences**, select **Open** or **Invite only**. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under **External providers**.
4. Scroll down to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git host and generates an API access token. In this case, we're leaving the **Roles** field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/).


## Start publishing

It's time to create your first blog post. Login to your site's `/admin/` page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format `Create Blog "year-month-date-title"`. 

Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.

Your basic blog scaffold is done, now you can query data from the GraphQL server just like you're working with the filesystem. For more info read [querying data](https://gridsome.org/docs/querying-data).
Add missing content folder 2022-09-30 11:39:35 -04:00			`---`
			`group: Guides`
			`title: Gridsome`
Feature/website overhaul (#49) * Reorganize repo * Overhaul website design and rewrite in NextJS and Typescript * Delete website-publish.yml 2022-10-25 09:18:18 -04:00			`weight: 70`
Add missing content folder 2022-09-30 11:39:35 -04:00			`---`
Add warnings to platform guides 2022-11-07 10:44:42 -05:00
			`<Alert severity="warning">This guide is out of date and may not be currently accurate. We are working to update it. Use at your own risk.</Alert>`

Feature/rebrand (#27) 2022-10-02 20:06:20 -04:00			`This guide will help you get started using Static CMS and Gridsome.`
Add missing content folder 2022-09-30 11:39:35 -04:00
			`## How to install Gridsome`
			`### 1. Install Gridsome CLI tool`

			```bash
			`# Using Yarn`
			`yarn global add @gridsome/cli`

			`# Using NPM`
			`npm install --global @gridsome/cli`
			```

			`## Create a new Gridsome website`

			```bash
			`# To create a new project run`
			`gridsome create gridsome-netlify-blog`

			`# Then navigate to the project folder`
			`cd gridsome-netlify-blog`

			`# To start local dev server at http://localhost:8080`
			`gridsome develop`
			```

Feature/rebrand (#27) 2022-10-02 20:06:20 -04:00			`### Install Static CMS the required dependencies to your project`
Add missing content folder 2022-09-30 11:39:35 -04:00
			```bash

			`# Using Yarn`
Feature/rebrand (#27) 2022-10-02 20:06:20 -04:00			`yarn add @staticcms/core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark`
Add missing content folder 2022-09-30 11:39:35 -04:00
			`# Using NPM`
Feature/rebrand (#27) 2022-10-02 20:06:20 -04:00			`npm add @staticcms/core gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark`
Add missing content folder 2022-09-30 11:39:35 -04:00			```

			Now that the plugins are installed, it's time to setup the configuration. Open the `gridsome.config.js` file and update its content to:

			```js
			`module.exports = {`
Feature/website overhaul (#49) * Reorganize repo * Overhaul website design and rewrite in NextJS and Typescript * Delete website-publish.yml 2022-10-25 09:18:18 -04:00			`sitetitle: 'Gridsome',`
Add missing content folder 2022-09-30 11:39:35 -04:00			`transformers: {`
			`remark: {`
			`externalLinksTarget: '_blank',`
			`externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],`
Feature/website overhaul (#49) * Reorganize repo * Overhaul website design and rewrite in NextJS and Typescript * Delete website-publish.yml 2022-10-25 09:18:18 -04:00			`anchorClasstitle: 'icon icon-link'`
Add missing content folder 2022-09-30 11:39:35 -04:00			`}`
			`},`

			`plugins: [`
			`{`
			`use: '@gridsome/source-filesystem',`
			`options: {`
			`path: 'posts/*/.md',`
Feature/website overhaul (#49) * Reorganize repo * Overhaul website design and rewrite in NextJS and Typescript * Delete website-publish.yml 2022-10-25 09:18:18 -04:00			`typetitle: 'Post'`
Add missing content folder 2022-09-30 11:39:35 -04:00			`}`
			`},`
			`{`
			use: `gridsome-plugin-netlify-cms`,
			`options: {`
			publicPath: `/admin`
			`}`
			`},`
			`]`
			`}`
			```

			`Please read [gridsome-plugin-netlify-cms](https://gridsome.org/plugins/gridsome-plugin-netlify-cms), [transformer-remark](https://gridsome.org/plugins/@gridsome/transformer-remark) for more information.`

Feature/rebrand (#27) 2022-10-02 20:06:20 -04:00			`## Static CMS setup`
Add missing content folder 2022-09-30 11:39:35 -04:00
			1. Create an `admin` directory inside the `src`
			2. Create an `uploads` directory inside the root of your project
			3. Add `index.html`, `index.js` and a `config.yml` file to your `admin` directory

			Your `index.html` should look like this:

			```html
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta charset="utf-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
Feature/rebrand (#27) 2022-10-02 20:06:20 -04:00			`<title>Static CMS</title>`
Add missing content folder 2022-09-30 11:39:35 -04:00			`</head>`
			`<body>`
			`<script src="index.js" type="module"></script>`
			`</body>`
			`</html>`
			```

			Your `index.js` should look like this:

			```js
Feature/rebrand (#27) 2022-10-02 20:06:20 -04:00			`import CMS from "@staticcms/core"`
Add missing content folder 2022-09-30 11:39:35 -04:00			```

			Your `config.yml` for GitHub should look like this:

			```yml
			`backend:`
Feature/docs (#67) 2022-11-04 17:41:12 -04:00			`name: git-gateway`
Update github and bitbucket docs 2022-11-01 16:00:23 -04:00			`branch: main # Branch to update (optional; defaults to main)`
Add missing content folder 2022-09-30 11:39:35 -04:00
			`media_folder: "static/uploads"`
			`public_folder: "/uploads"`

			`collections:`
Feature/docs (#67) 2022-11-04 17:41:12 -04:00			`- name: "posts"`
Add missing content folder 2022-09-30 11:39:35 -04:00			`label: "Posts"`
			`folder: "posts"`
			`create: true`
			`slug: "{{slug}}"`
			`fields:`
Feature/docs (#67) 2022-11-04 17:41:12 -04:00			`- {label: "Title", name: "title", widget: "string"}`
			`- {label: "Excerpt", name: "excerpt", widget: "string"}`
			`- {label: "Publish Date", name: "date", widget: "datetime"}`
			`- {label: "Body", name: "body", widget: "markdown"}`
Add missing content folder 2022-09-30 11:39:35 -04:00			```

			`## Push to GitHub`

			`It's now time to commit your changes and push to GitHub.`

			```bash
			`git init`
			`git add .`
			`git commit -m "Initial Commit"`
			`git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git`
			`git push -u origin main`
			```

			`### Add your repo to Netlify`

			`Go to Netlify and select 'New Site from Git'. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.`

			`### Enable Identity and Git Gateway`

			`Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:`

			`1. Go to Settings > Identity, and select Enable Identity service.`
			`2. Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.`
			`3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.`
			`4. Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we're leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the [Netlify Identity documentation](https://www.netlify.com/docs/identity/).`


			`## Start publishing`

Improved types and updated documentation (#71) * v1.0.0-alpha44 2022-11-07 10:27:58 -05:00			It's time to create your first blog post. Login to your site's `/admin/` page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format `Create Blog "year-month-date-title"`.
Add missing content folder 2022-09-30 11:39:35 -04:00
			`Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.`

			`Your basic blog scaffold is done, now you can query data from the GraphQL server just like you're working with the filesystem. For more info read [querying data](https://gridsome.org/docs/querying-data).`