Become a backer or sponsor to support our work.
This module adds Decap CMS support for Hugo.
Module |
---|
github.com/hugomods/decap-cms |
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}
It’s time to create an entry page for Decap CMS.
1---
2title: Content Manager System
3layout: decap-cms
4---
Now you can access it on /admin
, for example, http://localhost:1313/admin/
.
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}
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.
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}
local_backend
for production mode.