Decap CMS

Successor to Netlify CMS. Open-source CMS specialized in Git-based static site management.

CMSHeadlessGit-basedJAMstackJavaScriptReactOpen SourceFree

License

MIT

Language

JavaScript/React

Pricing

完全無料

Official Site

Visit Official Site

CMS

Decap CMS

Overview

Decap CMS is the successor to Netlify CMS, an open source CMS specialized in Git-based static site management, developed by the community.

Details

Decap CMS is a completely free open source CMS that was rebranded from Netlify CMS in February 2023. Ownership was transferred from Netlify to PM TechHub, and development continues actively as a community-led project.

It functions as a wrapper for Git workflows, using the APIs of GitHub, GitLab, and Bitbucket to manage content. Specialized for integration with static site generators, it supports most SSGs including Hugo, Jekyll, Gatsby, Next.js, Nuxt, Gridsome, and Docusaurus.

Latest updates in 2024 include visual editing (click-to-edit) functionality, support for nested collections, addition of Gitea backend, filtering functionality for relation widgets, making it more user-friendly.

Pros and Cons

Pros

Completely free: Open source with no licensing fees
Community-driven: No risk of vendor lock-in
Rich SSG support: Covers major static site generators
Simple configuration: Configurable with a single YAML file
Git workflow: Easy version control and collaboration
Platform agnostic: Usable outside of Netlify
Continuous improvement: Active development by community

Cons

Basic features: Limited enterprise functionality
No dynamic functionality: No support for real-time content
UI limitations: Low customization flexibility
Technical knowledge required: Basic Git and YAML knowledge essential
Media management constraints: Lacks advanced image management features
API-based limitations: Doesn't provide REST/GraphQL APIs

Main Links

Usage Examples

Basic Setup (CDN Version)

<!-- /admin/index.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>Content Manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Load latest Decap CMS -->
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>

npm Installation and Configuration

# Install with npm
npm install decap-cms-app

# Or install specific modules only
npm install decap-cms-core decap-cms-widget-string

Detailed Configuration File

# /admin/config.yml
backend:
  name: github # gitlab, bitbucket, gitea also available
  repo: owner/repo-name
  branch: main
  api_root: https://api.github.com # Custom API root

# Media settings
media_folder: static/img
public_folder: /img

# Workflow settings
publish_mode: editorial_workflow

# Internationalization settings
locale: 'en'

# Collection definitions
collections:
  - name: posts
    label: Blog Posts
    label_singular: Post
    folder: content/posts
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    preview_path: posts/{{slug}}
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Featured Image", name: "image", widget: "image", required: false}
      - {label: "Tags", name: "tags", widget: "list"}
      - {label: "Body", name: "body", widget: "markdown"}

Using Relation Widget

collections:
  - name: authors
    label: Authors
    folder: content/authors
    create: true
    fields:
      - {label: "Name", name: "name", widget: "string"}
      - {label: "Bio", name: "bio", widget: "text"}
      
  - name: posts
    label: Posts
    folder: content/posts
    create: true
    fields:
      - label: "Author"
        name: "author"
        widget: "relation"
        collection: "authors"
        search_fields: ["name"]
        value_field: "name"
        display_fields: ["name"]
        # New feature: Filtering
        filter: {field: "active", value: true}

Enabling Visual Editing

// admin/index.js
import CMS from 'decap-cms-app'

// Enable visual editing
CMS.init({
  config: {
    backend: {
      name: 'git-gateway',
    },
    // Visual editing settings
    editor: {
      preview: true,
      frame: true, // Preview in iframe
    },
  },
})

// Custom preview template
CMS.registerPreviewTemplate('posts', PostPreview)

Creating Custom Widgets

// Color picker widget
const ColorControl = ({ value, onChange }) => (
  <input
    type="color"
    value={value || '#000000'}
    onChange={(e) => onChange(e.target.value)}
  />
)

const ColorPreview = ({ value }) => (
  <div
    style={{
      backgroundColor: value,
      width: '50px',
      height: '50px',
      borderRadius: '4px',
    }}
  />
)

// Register widget
CMS.registerWidget('color', ColorControl, ColorPreview)