Netlify CMS config
Table of Contents
The configuration file, static/admin/config.yml, can be fairly easy to quite complex depending on your site and what you want to do.
The first parts are straightforward enough but it’s when you get to the collections section that thing may get trickier because there are a lot of petential options.
Playing with the CMS config
It’s much better if you can experiment with the settings on a local machine. This can be done using the Netlify CMS Proxy Server. The Netlify CMS docs say this is only in beta so far. I’ve used this with Hugo and found it worked pretty well for the most part. If the worst comes to the worst you just restart the servers (yes two of them).
It works by running two servers simultaneously: one for your site and one for the CMS. Changes made appear in your local version of the site only.
Setting up the Netlify CMS Proxy server
First you need Node/NPM installed on your machine.
- Add a new first line at the top level (ie. no indenting) to your CMS’s
config.yml1 file:
1local_backend: true
-
Make sure you are NOT running the Hugo server for your site. Then from a terminal set in the root of your project you type:
1npx netlify-cms-proxy-serverYou may be prompted to install the server so just hit
yand it installs and starts in a few seconds. This starts on port 8081. -
Leave it running and open another terminal window and use that to start
hugo server(again in the root of your project). -
In your browser go to
localhost:1313(assuming Hugo server is using that port number) add/adminto the address,localhost:1313/admin, and it you should be automatically logged in to the CMS ifconfig.ymlfile is set correctly. See the Configuration section below.
Using multiple config files
The default file for the CMS configuration is at static/admin/config.yml. However you can use a different file located anywhere if you add a link to it in the <head> of your CMS’s index.html file.
1<link href="path/to/config.yml" type="text/yaml" rel="cms-config-url">
This means that you can experiment with different layouts and options while keeping
Configuration
So below is some code from the config file for Netlify CMS. This is found in the /static/admin/config.yaml file.
Note to allow new pages to be added in this configuration you have to remove the files entries and instead use a folder entry the same as blog. You cannot have both files and folder in the same collection.
You should be able to access this from localhost by simply adding /admin to the url. ie localhost:1313/admin. You can also add local_backend: true to the YAML file to allow the local repo to be accessed and edited by the CMS.
The option for publish_mode: editorial_workflow doesn’t seem to work the way it appears in the demo for some reason.
1backend:
2 name: git-gateway
3 branch: master # Branch to update (optional; defaults to master)
4display_url: https://example.netlify.app # displays the url in the CMS interface
5site_url: https://example.netlify.app # used by the CMS for various things
6publish_mode: editorial_workflow # hopefully will allow the use of draft edits
7media_folder: "static/images"
8public_folder: "/images" # this where images are found in the published site. img src= use this path.
9collections:
10 - name: 'blog'
11 label: 'Blog'
12 folder: 'content/blog'
13 create: true
14# slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
15 slug: '{{slug}}'
16 editor:
17 preview: false
18 fields:
19 - { label: 'Title', name: 'title', widget: 'string' }
20 - { label: 'Publish Date', name: 'date', widget: 'datetime' }
21 - { label: 'Summary', name: 'summary', widget: 'string' }
22 - { label: 'Body', name: 'body', widget: 'markdown' }
23 - name: 'pages'
24 label: 'Pages'
25 files:
26 - file: 'content/_index.md'
27 label: 'Home Page'
28 name: 'home'
29 fields:
30 - { label: 'Title', name: 'title', widget: 'string'}
31 - { label: 'Body', name: 'body', widget: 'markdown'}
32 - file: 'content/about.md'
33 label: 'About Page'
34 name: 'about'
35 fields:
36 - { label: 'Title', name: 'title', widget: 'string'}
37 - { label: 'Body', name: 'body', widget: 'markdown'}
Open Authoring
It’s possible to allow the CMS to be open to anyone with a GitHub account. The changes they make are committed to a new branch to be accepted later. More here.
Editing the CSS
You can add a stylesheet to the head of the static/admin/index.html file. Finding the elements to target can be tricky. They will typically require !important to be added.
Here’s some CSS with some of the interface targetted:
1<style>
2 @media screen and (prefers-color-scheme: dark) {
3 body,
4 #nc-root,
5 .css-2oej7z-ToolbarContainer {
6 background-color: rgb(34, 92, 252) !important;
7 }
8 .css-y7r3-AppHeader {
9 background-color: rgb(56, 109, 253) !important;
10 }
11
12 /* background for new posts */
13 .css-f3a0ud-NoPreviewContainer-card-splitPane {
14 background-color: rgb(36, 98, 168) !important;}
15 }
16
17 /* the boxes */
18 .css-5wgw3f-ListCard-card,
19 .css-1hvrgvd-CollectionTopContainer-card-cardTop,
20 .css-1gj57a0-SidebarContainer-card {
21 background-color: rgb(40, 128, 228) !important;
22 }
23
24 .eab48an0:hover {
25 background-color: rgb(101, 160, 228) !important;
26 }
27 h1, h2, h3, h4, h5, h6, p {
28 color: rgb(209, 244, 247) !important;
29 }
30
31 /* New blog button */
32 .css-1qfk5ut-CollectionTopNewButton-button-default-gray {
33 background-color: rgb(255, 81, 0) !important;
34 transition: .5s;
35 }
36 .css-1qfk5ut-CollectionTopNewButton-button-default-gray:hover {
37 background-color: rgb(170, 26, 26) !important;
38 }
39</style>
-
The default path for the CMS in Hugo is
/static/admin/config.ymlthough the location can be changed. ↩︎