Netlify CMS

🔥 Static + content management = ❤️

Netlify Cms App

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.

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

No Plugins My Old Build

Netlify CMS is Always the latest GitHub repo pull, with my custom WebPack hashed build. My custom dark build of the Netlify Identity Widget is used on the React frontend and in my git-gateway back-end.

The below is old content see my new post on 🔗 React Netlify No Plugins for CMS and Identity Widget custom builds and no React Plugins.

File exclusive build

<!doctype html><html lang="en" class="no-js" itemscope itemtype="https://schema.org/WebSite">
<head>
  <script src="./index.js"></script>
  <script src="../../src/components/IdentityWidget/netlify-identity.js"></script>
  <script>
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", function () {
      netlifyIdentity.init({
        APIUrl: "https://publiuslogic.com/.netlify/identity"
      });
    });
  } else {
    netlifyIdentity.init({
      APIUrl: "https://publiuslogic.com/.netlify/identity"
    });
  }</script>
  <title>Content Manager</title>
</head>

<body id="style-3" class="body" auth-false" itemscope itemtype="https://schema.org/WebPage">
<div class="page">
<script>
  CMS.registerEditorComponent({
    // Internal id of the component
    id: "youtube",
    // Visible label
    label: "Youtube",
    // Fields the user need to fill out when adding an instance of the component
    fields: [{name: 'id', label: 'Youtube Video ID', widget: 'string'}],
    // Pattern to identify a block as being an instance of this component
    pattern: /^youtube (\S+)$/,
    // Function to extract data elements from the regexp match
    fromBlock: function(match) {
      return {
        id: match[1]
      };
    },
    // Function to create a text block from an instance of this component
    toBlock: function(obj) {
      return 'youtube ' + obj.id;
    },
    // Preview output for this component. Can either be a string or a React component
    // (component gives better render performance)
    toPreview: function(obj) {
      return (
        '<img src="https://www.w3.org/2000/svgimg.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
      );
    }
  });</script>
</div>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.6.1/uploadcare.full.min.js"></script>
<script>
  UPLOADCARE_LOCALE = "en";
  UPLOADCARE_TABS = "file url facebook gdrive gphotos dropbox instagram evernote flickr skydrive";
  UPLOADCARE_PUBLIC_KEY = "YOUR KEY";
  uploadcare.registerTab(
  'preview',
  uploadcareEffectsTab
)
</script>

<script>
  var PostPreview = createClass({
      render: function() {
        var entry = this.props.entry;
        var image = entry.getIn(['data', 'image']);
        var bg = image && this.props.getMedia(image);
        return h('div', {},
          h('div', {className: "hero"},
            h('h1', {}, entry.getIn(['data', 'title'])),
            bg ? h('img', {src: bg.toString()}) : null
          ),
          h('p', {},
            h('small', {}, "Written " + entry.getIn(['data', 'date']))
          ),
          h('div', {"className": "text"}, this.props.widgetFor('body'))
        );
      }
    });
    CMS.registerPreviewTemplate("posts", PostPreview);
    CMS.registerPreviewStyle("./styles.d5154f21eaaa9091536f.css");
</script>
</body>
</html>

Index.js cms-bundled.js

import CMS from '../../src/components/cms/cms'
// Custom build of latest CMS Repo
export default {
  CMS,
}

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 Bulma 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!

The Configuration file

/static/admin/config.yml

backend:
  name: git-gateway
  accept_roles:
    - admin
    - editor
  repo: donaldboulton/publiuslogic
  branch: master
  identity_url: "https://publiuslogic.com/.netlify/identity"
  gateway_url: "https://publiuslogic.com/.netlify/git"
  site_domain:  "https://publiuslogic.com/"
  squash_merges: true

display_url: https://publiuslogic.com
logo_url: https://publiuslogic.com/img/apple-touch-icon-180x180.png

publish_mode: editorial_workflow
media_library:
 name: uploadcare
 config:
   publicKey: <'YOUR KEY'>
media_folder: static/img
public_folder: img
collections:
  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/index.md"
        label: "Home Page"
        name: "home"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "home-page"}
          - {label: Title, name: title, widget: string}
          - {label: Heading, name: heading, widget: string}
          - {label: Description, name: description, widget: string}
          - {label: Offerings, name: offerings, widget: object, fields: [{label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]}
          - {label: "Meta Title", name: "meta_title", widget: "string"}
          - {label: "Meta Description", name: "meta_description", widget: "text"}
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "pages"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}
          - {label: "Meta Title", name: "meta_title", widget: "string"}
          - {label: "Meta Description", name: "meta_description", widget: "text"}
      - file: "src/pages/pricing/index.md"
        label: "Pricing Page"
        name: "pricing"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "pricing-page"}
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}
          - {label: "Meta Title", name: "meta_title", widget: "string"}
          - {label: "Meta Description", name: "meta_description", widget: "text"}
      - file: "src/pages/contact/index.md"
        label: "Contact Page"
        name: "contact"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "contact-page"}
          - {label: Title, name: title, widget: string}
          - {label: Subtitle, name: subtitle, widget: string}
          - {label: Contacts, name: contacts, widget: list, fields: [{label: Email, name: email, widget: string}, {label: Description, name: description, widget: string}]}
          - {label: "Meta Title", name: "meta_title", widget: "string"}
          - {label: "Meta Description", name: "meta_description", widget: "text"}
      - file: "src/pages/privacy/index.md"
        label: "Privacy Page"
        name: "privacy"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "privacy-page"}
          - {label: Title, name: title, widget: string}
          - {label: Subtitle, name: subtitle, widget: string}
          - {label: "Meta Title", name: "meta_title", widget: "string"}
          - {label: "Meta Description", name: "meta_description", widget: "text"}  
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "posts"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Cover", name: "cover", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Category", name: "category", widget: "string"}
      - {label: "Tags", name: "tags", widget: "list"}
      - {label: "Meta Title", name: "meta_title", widget: "string"}
      - {label: "Meta Description", name: "meta_description", widget: "text"}
      - {label: "Tweet Id", name: "tweet_id", widget: "text"}