For nearly seven years I was a CMS implementer and contributor, mostly with Drupal, but occasionally with Joomla! and WordPress. Then about 3 years ago I encountered Jekyll and I had a revelation, a system that let me manage and render content, but in a manner that suited me as a writer, using markup formats such as markdown, reStructuredText, and Asciidoc. Whilst the plain text and version control approach is great for some, and despite best efforts from vendors such as GitHub and GitLab, it’s still not that accessible to less technically minded people. Many projects have attempted to bridge this gap and merge the best of the two worlds, from commercial SaaS providers such as , , or to open source options like and . Contentful Prismic CloudCannon Cockpit getmesh Just over a year ago, , the fantastic host for static sites announced ‘ ’ and it looked promising, adding a CMS-like interface to the git workflow. I made some initial investigations, but now finally have time for a proper dive into how to set it up and use it. Netlify Netlify CMS I will use Netlify CMS (NC) with Jekyll, but you can find instructions on how to add it to or . other existing static sites get started from scratch with a new site Adding Netlify CMS to Jekyll Create an folder with an and a file; these act as the gateway to your admin interface and the settings behind it, respectively. admin index.html config.yml Inside , add the skeleton HTML, JavaScript, and CSS needed to create the admin interface, for full custom branding, you can add links to your style sheets too, but as this is an admin ‘backend,’ you may not need them. index.html <!doctype html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Content Manager</title><link rel="stylesheet" href=" ^1.0.0/dist/cms.css" /> https://unpkg.com/netlify-cms@ </head><body><script src=" ^1.0.0/dist/cms.js"></script></body></html> https://unpkg.com/netlify-cms@ Naturally, the configuration file varies for your use case, but I’ll show you what I use for my ‘ ’ site, and you can extrapolate from there. Gregarious Mammal First, determine the backend type and if users need to authenticate to access it, you can use users defined in Netlify, or in GitHub (those with push access). I want to allow users to change content outside of Netlify, so use the GitHub method: backend:name: githubrepo: GregariousMammal/Main-Site # Path to Github repositorybranch: master # Branch to update To define which users can access the admin backend and edit content I recommend you read . You can authenticate with , or handle the process via Netlify’s identity service that you might have setup already (I do). Netlify’s steps a variety of different methods If you add the setting below, then posts go through a workflow process where specific users can review and edit posts held in pull requests until you publish them. Otherwise, NC commits posts to the branch defined above. publish_mode:editorial_workflow The site uses lots of images, and I want people to add an image with every post, so you need to define where to store them, add that with the parameter, and also that sets where to serve images from: media_folder public_folder media_folder: "images" # Media files will be stored in the repo under imagespublic_folder: "/images" # The src attribute for uploaded media will begin with /images I did find some issues with images I had stored in sub-folders, discussing sub-folders, but I’m unsure if it’s related. there is an issue Now comes the most complicated part. My site has a lot of different ‘content types’ to represent different items of content, sometimes using collections and sometimes using different fields in different places. This section will be the section of your configuration and consists of a series of YAML sections representing your content. The general structure is: collections: name: "posts" # Used in routes, e.g. /admin/collections/bloglabel: "Posts" # Used in the UIfolder: "_posts" # The path to the folder where the documents are storedcreate: true # Allow users to create new documents in this collectionslug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template i.e. YYYY-MM-DD-title.mdfilter: field: publication_url value: ""fields: # The fields for each document, usually in front matter {label: "Layout", name: "layout", widget: "hidden", default: "post"} {label: "Title", name: "title", widget: "string"} {label: "Publish Date", name: "date", widget: "datetime"} {label: "Featured Image", name: "image", widget: "image"} {label: "Categories", name: "categories", widget: "string"} {label: "Tags", name: "tags", widget: "string"} {label: "Body", name: "body", widget: "markdown"} {label: "Publication URL", name: "publication_url", widget: "string"} You can use one of about , and it’s not too hard to if you know React. By default, fields are set as , so add if they are not in your content model, i.e.: 12 default widgets create your own required required: false - {label: "Publication URL", name: "publication_url", widget: "string", required: false} My site has a lot of content, and I couldn’t get Netlify CMS to load it all — this might be limits with JavaScript calls or the GitHub API. There’s probably a way to fix this, but as a lot of the posts are autogenerated stub files for aggregated content, I don’t need to edit them anyway. Netlify CMS offers a way to filter these using the property on a field value. filter filter: field: language value: en I wanted to filter by date to load the most recent posts, but that wasn’t possible, so I tried to filter posts that didn’t have a but didn’t have much luck getting filters to work, your mileage may vary. There are also limits on how much you can pull from the GitHub API, so I might need to reorganize my content into more collections or sub-folders. publication_url You can see the complete content types for my site . here Using Netlify CMS Fire up your static site generator as normal and visit . You should see sections for each of the content types you defined, plus one for media and workflow (if enabled). _admin The interface has limited filter and sort options, but there is a search box. You use the buttons to create content with a handy GUI and preview it. When you click , posts are held in a pull request until you publish them when they are then merged into the master. of what GUI action results in what git action. add save There’s a summary here SSCMS (Static Site CMS!) In my opinion, Netlify has, so far, made the best effort to create a CMS-like front-end for static sites that suits the workflows of technical and non-technical users. It’s early days with bugs and features needed, but with the strength of the Netlify commercial product and community drive, I hold a lot of hope for its development. Originally published at dzone.com .

Adding a CMS to Your Static Site With Netlify CMS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Docker Desktop Alternatives

10 Open-source Headless CMS to Supercharge Your Development in 2022

10 Best Practices for WordPress Plugin Development

3 Evolutions of CMS (Traditional 👉 Headless 👉 Serverless)

Hacker Noon Product Update 2019-2020

5 Docker Desktop Alternatives

10 Open-source Headless CMS to Supercharge Your Development in 2022

10 Best Practices for WordPress Plugin Development

3 Evolutions of CMS (Traditional 👉 Headless 👉 Serverless)

Hacker Noon Product Update 2019-2020

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps