Netlify CMS

👋

Developed and Written by: Donald Boulton🎉 0

|

CAUTION Netlify CMS IS NOT MAINTAINED and does not work with Gatsby or GitHub anymore.

🔥 Static + content management = ❤️

🔗 CMS Site

Netlify Cms App

Republished and edited 9/3/2022

Netlify CMS adding to Gatsby with netlify-cms-app, is the best way to do it in 2020 as Netlify Cms App Netlify CMS app always creates its own DOM element for mounting the application.

Best advice if you want to use Netlify CMS with Gatsby is to follow the Code in Gatsby Starter Netlify Cms.

Added presentation slides from Netlify Cms Presentations

Or check out how I did it in this website in my PubliusLogic Github Repo.

There is lots of documentation on Netlify CMS so I do not have to rewrite that here.

Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.

An integrated part of your Git workflow Content is stored in your Git repository along side your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

An extensible CMS

Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add a backend to support different Git platform APIs. My Netlify CMS backend will build and add Pages, Posts, My layout components with Event data for GCal fullCalendar localized events, Notifications, Authors, Products, Site Updates and charts data using charts.js displaying build, sales and analytics charts data on individual pages and posts. All edited from a CMS Backend on a Static Website!

Installation

gatsby.config file add

CMS Folder file in src

Add to folder under src/cms/cms.js

The Configuration File

Change this config.yml file to your site needs.

Post Build

After a successful build, look in your build public folder you have a folder called admin, You can copy this to your desktop and use in to replace you /static/admin folder and remove everything you added to gatsby above as you do not need the gatsby-plugin-netlify-cms plugin nor it in your gatsby-config.ts, and remove the cms folder from src. Now you need just some link to /admin in your site to access your Content Manager.

Build Time Saving

Save 25mb of stuff off of your build. On my site about a minute of build time. I edited the index.html file with a header and footer and my own background color.