Gatsby Starter Decap Cms

Theme by Decaporg

|

Updated: 29 Nov 2023

|

2065 Stars

Example Gatsby + Decap CMS project

Categories

Overview

The Gatsby + Decap CMS StarterNetlify Status is a business website template built with Gatsby and Decap CMS. It follows the JAMstack architecture and includes features such as editable pages, blog functionality, tags for posts, and blazing fast loading times. The starter also has a perfect score on Lighthouse for SEO, Accessibility, and Performance.

Features

• Simple landing page with blog functionality built with Decap CMS
• Editable Pages: Landing, About, Product, Blog-Collection, and Contact page with Netlify Form support
• Create blog posts from Decap CMS
• Tags: Separate page for posts under each tag
• Basic directory organization
• Uses Bulma for styling, but size is reduced by gatsby-plugin-purgecss
• Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
• Uses gatsby-plugin-image with Decap CMS preview support
• Separate components for everything
• Netlify deploy configuration
• Netlify function support
• Perfect score on Lighthouse for SEO, Accessibility, and Performance

Installation

Prerequisites

• Minimal Node.js version 14.15.0
• Gatsby CLI
• Netlify CLI

Getting Started (Recommended)

1. To quickly try out Decap CMS, use the button provided to build and deploy your own copy of the repository.
2. Authenticate with GitHub and choose a repository name. Netlify will create a repository in your GitHub account with a copy of the files from the template.
3. Netlify will build and deploy the new site, and you will be taken to the site dashboard when the build is complete.
4. Set up Netlify’s Identity service to authorize users to log in to the CMS.

Access Locally

1. Pull down a local copy of the GitHub repository created by Netlify.
2. Use Netlify Dev CLI to serve any functions in the netlify/functions folder.
3. To test the CMS locally, run a production build of the site.

Media Libraries (installed, but optional)

• If you are not planning to use Uploadcare or Cloudinary in your project, you can remove them from module import and registration in src/cms/cms.js.
• Remove them from package.json and yarn.lock/package-lock.json using yarn or npm to save build time.

Example:

// Comment or remove these lines in src/cms/cms.js
// import Uploadcare from 'netlify-cms-media-library-uploadcare';
// import Cloudinary from 'netlify-cms-media-library-cloudinary';

// Remove these lines in package.json

// From:
"dependencies": {
  ...
  "netlify-cms-media-library-cloudinary": "2.9.1",
  "netlify-cms-media-library-uploadcare": "2.10.0",
  ...
}

// To:
"dependencies": {
  ...
}

Getting Started (Without Netlify)

1. Follow the Decap CMS Quick Start Guide to set up authentication and hosting for production.
2. To use Decap CMS locally, run the site in one terminal with npm run start and in another terminal use npx netlify-cms-proxy-server.

Summary

The Gatsby + Decap CMS StarterNetlify Status is a powerful starter template for building business websites with a blog. It provides easy customization options with Decap CMS, fast loading times, and a seamless integration with Netlify for continuous deployment and CDN distribution. The template also includes features such as editable pages, tags for posts, and a perfect score on Lighthouse for SEO, Accessibility, and Performance.