This repo is used to illustrate the article I wrote on Medium.com. It is an extract of my photography website and you'll probably find some references here and there . It is not meant to duplicate without modifications for your own use. So please don't.
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:
- 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)
- Add content to the CMS for each content model (multiple items of each) to verify the workings during development.
- Follow the Gridsome documentation to set up the default starter and get it up and running.
- Clone this repository and replace the default starter files with the files from this repository.
- 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.
