Gridsome Starter Strapi

Overview:

The gridsome-starter-strapi is a Gridsome Starter project that utilizes the headless CMS Strapi. Its purpose is to accelerate the development process with Strapi. A demo of the project is hosted on Netlify. This starter project uses the @gridsome/source-strapi source plugin to fetch data from Strapi and store it in Gridsome’s data store. Images provided by Strapi are downloaded and saved locally during the build process. Rich text content, provided as markdown from Strapi, is prepared and transformed to HTML using the @gridsome/transformer-remark plugin.

Features:

• Gridsome Starter project using Strapi as headless CMS
• Integration with @gridsome/source-strapi plugin for data retrieval
• Local downloading and saving of images provided by Strapi
• Transformation of markdown content into HTML using @gridsome/transformer-remark plugin

Installation:

To set up the gridsome-starter-strapi project, follow the steps below:

1. Install the @gridsome/source-strapi plugin: npm install @gridsome/source-strapi --save
2. Add the plugin to the config file.
3. Install Strapi by following the Get Started Guide.
4. Use the command npx create-strapi-app gridsome-starter-strapi-cms --quickstart to install Strapi and create a new project.
5. Complete the form to create the first Administrator user.
6. Install the GraphQL plugin by running npm run strapi install graphql.
7. Open the GraphQL Playground (http://localhost:1337/graphql) to test your queries.
8. Restart the server using npm run develop.

To create posts within the Strapi Admin Interface:

1. Add a new collection type named “Post”.
2. Add the following fields: title (text), subtitle (text), article (rich text), and image (single media).
3. Save and publish the collection type.
4. Add blog entries by clicking on Collection Types > Posts > Add New Post.
5. Go to Settings > Roles under USERS & PERMISSIONS PLUGIN. Check the “find” and “findOne” options under Post and save.

To create an “About” page within the Strapi Admin Interface:

1. Add a new single type named “About”.
2. Add the following fields: title (text) and article (rich text).
3. Save and publish the single type.
4. Add content to the about page by clicking on Single Types > About.
5. Go to Settings > Roles under USERS & PERMISSIONS PLUGIN. Check the “find” option under About and save.

After completing the Strapi setup, proceed with the following steps for Gridsome setup:

1. Install the Gridsome CLI tool if you haven’t already: npm install --global @gridsome/cli
2. Create a new Gridsome project using the default starter: gridsome create gridsome-starter-strapi
3. Navigate to the project folder: cd gridsome-starter-strapi
4. Start a local development server: gridsome develop

Summary:

In summary, gridsome-starter-strapi is a Gridsome Starter project that utilizes the Strapi headless CMS. It provides integration with the @gridsome/source-strapi plugin for data retrieval and the @gridsome/transformer-remark plugin for transforming markdown content into HTML. The project allows for easy creation of blog posts and an “About” page within the Strapi Admin Interface. Setting up and running the project involves installing necessary plugins and following specific configuration steps.