This is a Gridsome Starter using the headless CMS Strapi. It is suppose to kick-start development with Strapi.
A Demo is hosted on Netlify.
Under the hood, the starter is using the source plugin @gridsome/source-strapi
to pull data from Strapi into Gridsome's data store.
Images provided by Strapi are downloaded and saved locally via onCreateNode
. Thus, the build version includes all images in /static
.
Note: Steps that are marked with a check are already done and are just necessary if you set up a completely new project.
- ✅ Install the @gridsome/source-strapi Plugin:
npm install @gridsome/source-strapi --save
- ✅ Add it to the config file:
export default {
plugins: [
{
use: '@gridsome/source-strapi',
options: {
apiURL: 'http://localhost:1337',
queryLimit: 1000, // Defaults to 100
contentTypes: ['post'],
// Possibility to login with a Strapi user,
// when content types are not publicly available (optional).
loginData: {
identifier: '',
password: ''
}
}
}
]
}
- Install Strapi by following the Get Started Guide.
- Install Strapi and create a new project:
npx create-strapi-app gridsome-starter-strapi-cms --quickstart
. - Complete the form to create the first Administrator user.
- Since we are using GraphQL, install the GraphQL plugin:
npm run strapi install graphql
. Open the GraphQL Playground (http://localhost:1337/graphql) to test your queries. - Restart your server:
npm run develop
. - In the Strapi Admin Interface you can now add Content Types (
Plugins
>Content-Types Builder
>Create new collection type
). - Name you new collection type
Post
. - Now, add 4 fields, namely
title
(text),subtitle
(text),article
(rich text) andimage
(single media). - Click on
Save
. - Add blog entries by clicking on
Collection Types
>Posts
>Add New Post
. - Go to
Plugins
>Roles & Permissions
. Click on the column sayingPublic
. Put a check onfind
andfindOne
underPost
. Click onSave
. - ✅ In
gridsome.config.js
addpost
undercontentTypes
. - Finally, you should be able to query your blog entries with Gridsome.
npm install --global @gridsome/cli
- ✅
gridsome create gridsome-starter-strapi
to install default starter - ✅
cd gridsome-starter-strapi
to open the folder gridsome develop
to start a local dev server athttp://localhost:8080
- Happy coding 🎉🙌