Decap CMS
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
This module adds Decap CMS support for Hugo.
| Module | github.com/hugomods/decap-cms |
|---|---|
| Stats | 
 |
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}
The difference between this module and Decap CMS docs of
collections is that the collections is an object of array.
With this, theme developers can predefine some collections modules for clients, to set it up as simple as possible.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}
Please disable the
local_backend for production mode.