Overview:

This repository is used to illustrate an article on Medium about using Gridsome with Contentful for a static generated website. It is based on the default starter for Gridsome and covers the basic needs for a static generated site using the Contentful, Netlify, and Gridsome stack. The repository includes instructions for setting up a Contentful space, as well as the required content models for a gallery, page, and post. The repository also includes a <nav> component that assumes the presence of at least two pages with the slugs “about” and “contact”.

Features:

• Contentful integration: Connects with Contentful for managing and retrieving content for the website.
• Basic content models: Includes predefined content models for gallery, page, and post.
• Static page generation: Uses Gridsome to generate static pages for the website.
• Layouts: Includes a single layout component that is available globally.
• Routing and data resolving: Gridsome handles routing and resolving data automatically.

Installation:

1. Set up a Contentful space and add the following content models:
   • Gallery:
     • Title: Text (mark as title field)
     • Slug: Text (unique field, appear as slug)
     • Sort order: Number
     • Hero Image: Media
     • Description: Rich text
     • Media: Media (many)
   • Page:
     • Title: Text (mark as title field)
     • Slug: Text (unique field, appear as slug)
     • Body: Rich text
     • Meta Description: Rich text
   • Post:
     • Title: Text (mark as title field)
     • Slug: Text (unique field, appear as slug)
     • Publish date: Date & time
     • Hero Image: Media
     • Body: Rich text
     • Meta description: Rich text
     • Media: Media (many)
2. Add content to the CMS for each content model (multiple items of each) to verify the workings during development.
3. Follow the Gridsome documentation to set up the default starter and get it up and running.
4. Clone this repository and replace the default starter files with the files from this repository.
5. Start the Gridsome development server and navigate to the website to see the changes.

Summary:

This repository provides an example of using Gridsome with Contentful for a static generated website. It includes instructions for setting up a Contentful space and the required content models. The repository is based on the default Gridsome starter and includes a <nav> component that assumes the presence of two pages with specific slugs. With Gridsome providing out-of-the-box routing and data resolving, this repository covers the basic needs of a static generated website using the Contentful, Netlify, and Gridsome stack.