Decap CMS

This module adds Decap CMS support for Hugo.

Module
github.com/hugomods/decap-cms
GitHub Stars Used By Used By Used By Used By

Installation

First of all, we need to import the module, and then append the DecapCMSConfig to the home output.

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/decap-cms
4outputs:
5  home:
6  - HTML
7  - RSS
8  - DecapCMSConfig

hugo.toml

1[module]
2  [[module.imports]]
3    path = 'github.com/hugomods/decap-cms'
4[outputs]
5  home = ['HTML', 'RSS', 'DecapCMSConfig']

hugo.json

 1{
 2   "module": {
 3      "imports": [
 4         {
 5            "path": "github.com/hugomods/decap-cms"
 6         }
 7      ]
 8   },
 9   "outputs": {
10      "home": [
11         "HTML",
12         "RSS",
13         "DecapCMSConfig"
14      ]
15   }
16}

Create Decap CMS Entry

It’s time to create an entry page for Decap CMS.

content/admin/_index.md
1---
2title: Content Manager System
3layout: decap-cms
4---

Now you can access it on /admin, for example, http://localhost:1313/admin/.

Tweak Configuration

By default, the Decap CMS will complain that there is no backend and collections settings, we’ve to tweak those configuration to suit your site.

hugo.yaml

 1params:
 2  decap_cms:
 3    collections:
 4      blog:
 5        folder: content/blog
 6        label: Blog
 7        other: '...'
 8      docs:
 9        folder: content/docs
10        label: Docs
11        other: '...'
12    media_folder: static/images/uploads
13    public_folder: /images/uploads
14    publish_mode: editorial_workflow
15    search: true

hugo.toml

 1[params]
 2  [params.decap_cms]
 3    media_folder = 'static/images/uploads'
 4    public_folder = '/images/uploads'
 5    publish_mode = 'editorial_workflow'
 6    search = true
 7    [params.decap_cms.collections]
 8      [params.decap_cms.collections.blog]
 9        folder = 'content/blog'
10        label = 'Blog'
11        other = '...'
12      [params.decap_cms.collections.docs]
13        folder = 'content/docs'
14        label = 'Docs'
15        other = '...'

hugo.json

 1{
 2   "params": {
 3      "decap_cms": {
 4         "collections": {
 5            "blog": {
 6               "folder": "content/blog",
 7               "label": "Blog",
 8               "other": "..."
 9            },
10            "docs": {
11               "folder": "content/docs",
12               "label": "Docs",
13               "other": "..."
14            }
15         },
16         "media_folder": "static/images/uploads",
17         "public_folder": "/images/uploads",
18         "publish_mode": "editorial_workflow",
19         "search": true
20      }
21   }
22}

See configuration options for all available options.

Testing Decap CMS Configuration

In order to test the configuration before deploying the site, it’s recommended to set up the local backend.

1cd my-site
2npx netlify-cms-proxy-server

And then tweak your configuration to meet your needs.

hugo.yaml

 1params:
 2  decap_cms:
 3    backend:
 4      name: git-gateway
 5    collections:
 6      blog:
 7        create: true
 8        fields:
 9        - label: Title
10          name: title
11          widget: string
12        - label: Publish Date
13          name: date
14          widget: datetime
15        - label: Body
16          name: body
17          widget: markdown
18        folder: content/blog
19        label: Blog
20        name: blog
21        nested:
22          depth: 1000
23      docs:
24        create: true
25        fields:
26        - label: Title
27          name: title
28          widget: string
29        - label: Publish Date
30          name: date
31          widget: datetime
32        - label: Body
33          name: body
34          widget: markdown
35        folder: content/docs
36        label: Docs
37        name: docs
38        nested:
39          depth: 1000
40    local_backend: true

hugo.toml

 1[params]
 2  [params.decap_cms]
 3    local_backend = true
 4    [params.decap_cms.backend]
 5      name = 'git-gateway'
 6    [params.decap_cms.collections]
 7      [params.decap_cms.collections.blog]
 8        create = true
 9        folder = 'content/blog'
10        label = 'Blog'
11        name = 'blog'
12        [[params.decap_cms.collections.blog.fields]]
13          label = 'Title'
14          name = 'title'
15          widget = 'string'
16        [[params.decap_cms.collections.blog.fields]]
17          label = 'Publish Date'
18          name = 'date'
19          widget = 'datetime'
20        [[params.decap_cms.collections.blog.fields]]
21          label = 'Body'
22          name = 'body'
23          widget = 'markdown'
24        [params.decap_cms.collections.blog.nested]
25          depth = 1000
26      [params.decap_cms.collections.docs]
27        create = true
28        folder = 'content/docs'
29        label = 'Docs'
30        name = 'docs'
31        [[params.decap_cms.collections.docs.fields]]
32          label = 'Title'
33          name = 'title'
34          widget = 'string'
35        [[params.decap_cms.collections.docs.fields]]
36          label = 'Publish Date'
37          name = 'date'
38          widget = 'datetime'
39        [[params.decap_cms.collections.docs.fields]]
40          label = 'Body'
41          name = 'body'
42          widget = 'markdown'
43        [params.decap_cms.collections.docs.nested]
44          depth = 1000

hugo.json

 1{
 2   "params": {
 3      "decap_cms": {
 4         "backend": {
 5            "name": "git-gateway"
 6         },
 7         "collections": {
 8            "blog": {
 9               "create": true,
10               "fields": [
11                  {
12                     "label": "Title",
13                     "name": "title",
14                     "widget": "string"
15                  },
16                  {
17                     "label": "Publish Date",
18                     "name": "date",
19                     "widget": "datetime"
20                  },
21                  {
22                     "label": "Body",
23                     "name": "body",
24                     "widget": "markdown"
25                  }
26               ],
27               "folder": "content/blog",
28               "label": "Blog",
29               "name": "blog",
30               "nested": {
31                  "depth": 1000
32               }
33            },
34            "docs": {
35               "create": true,
36               "fields": [
37                  {
38                     "label": "Title",
39                     "name": "title",
40                     "widget": "string"
41                  },
42                  {
43                     "label": "Publish Date",
44                     "name": "date",
45                     "widget": "datetime"
46                  },
47                  {
48                     "label": "Body",
49                     "name": "body",
50                     "widget": "markdown"
51                  }
52               ],
53               "folder": "content/docs",
54               "label": "Docs",
55               "name": "docs",
56               "nested": {
57                  "depth": 1000
58               }
59            }
60         },
61         "local_backend": true
62      }
63   }
64}