Netlify?

"This is where the web is going. Netlify is just bringing
it to us all a lot faster. With all the innovation in the space, this is an exciting time to be a developer."

- Chris Coyier
(Founder of CSS-Tricks and
co-founder of Codepen)

Netlify CMS?

"With Netlify CMS, its creators hope to “carve a
different niche,” and build a CMS that is open-source, fully-featured, production-ready, and easy for
developers and content editors to use."

- GitHub project of the week
Software Developer Times Magazine (2017)

Netlify vs. Netlify CMS

"The folks at Netlify created Netlify CMS to fill a gap in the static site generation pipeline. [...]
For that reason, Netlify CMS is made to be
community-driven, and has never been locked to the Netlify platform (despite the name)."

- Introduction
Netlify CMS Documentation

Why Netlify CMS?

"WordPress was causing major headaches and Smashing [Magazine] was no longer happy with what it had to offer. Even with using most of the caching plugins available, it was clear that WordPress was not working since they had issues with every single caching plugin."

- Smashing Magazine just got 10x faster
Netlify B log (2017)

A 'Hello World' example

```
index.html
```
```
data.json
```
```
admin/index.html
```
```
admin/config.yml
```
Storage
Basic Auth Service

Github Storage and Auth

"For repositories stored on GitHub, the github backend allows CMS users to log in directly with their GitHub account. [...] Because Github requires a server for authentication, Netlify facilitates basic GitHub authentication."

- Authentication & Backends
Netlify CMS Documentation

Git Gateway?

"Git Gateway is a Netlify open source project that allows you to add editors to your site CMS without giving them direct write access to your GitHub or GitLab repository."

- Authentication & Backends
Netlify CMS Documentation

Static site generator
Automation via hooks
Programmatic config
Custom widgets
Custom previews

Beyond 'Hello World'

Jekyll
Gitbook
Hugo
Next
Gatsby
Nuxt
Gridsome
Zola
Hexo
Middleman

Jigsaw
Spike
Wyam
Pelican
VuePress
Elmstatic
...

2. Automation via hooks

3. Programmatic config

4. Custom widgets

5. Custom previews

import React, { useState } from 'react';
import CMS, { init } from 'netlify-cms';

const config = {
    backend: {
        name: 'github'
        repo: 'schalkventer/netlify-cms-hello-world'
    },
    media_folder: 'src/assets/media',
    public_folder: 'media',
    collections: {
        name: 'posts',
        label: 'Blog Posts',
        folder: 'src/data/posts',
        extension: 'md',
        create: 'true',
        fields: [
            {
                name: 'title',
                label: 'Post title',
                widget: 'string',
            },
            {
                name: 'icon',
                label: 'Post type',
                widget: 'icon-selector'
            },
            {
                name: 'content',
                label: 'Blog Content',
                widget: 'Markdown',
            },
        ]
    },
    {
        name: 'members',
        label: 'Cult Members',
        folder: 'src/data/authors',
        extension: 'json',
        create: 'true',
        fields: [
            {
                name: 'title',
                label: 'Member name',
                widget: 'string',
            },
            {
                name: 'age',
                label: 'Age',
                widget: 'number',
            },
            {
                name: 'profession',
                label: 'Member profession',
                widget: 'string',
            },
            {
                name: 'hobby',
                label: 'Member hobby',
                widget: 'string',
            },
            {
                name: 'status',
                label: 'Membership status',
                widget: 'select',
                options: ['pending member', 'previous member', 'registered member'],
            },
            {
                name: 'photo',
                label: 'Profile photo',
                widget: 'image',
                required: 'false',
                hint: 'Remember to stare straight at the camera',
            },
        ]
    }
}

const IconWidgetMarkup = ({ value, handleChange }) => (
    <div onChange={handleChange}>
        <input type="radio" name="icon" value="house"><svg ... />
        <input type="radio" name="icon" value="tree"><svg ... />
        <input type="radio" name="icon" value="car"><svg ... />
    </div>
);

const IconWidgetState = () => {
    const handleChange = (event) => this.props.onChange(event.target.value);
    return <Markup value={this.props.value} handleChange={handleChange} />;
}

const MemberPagePreview= ({ entry, getAsset ) => {
    const name = entry.getIn(['data', 'title']);
    const photo = entry.getIn(['data', 'photo']);
    const photoUrl = getAsset(photo);
    const status = entry.getIn(['data', 'status'])

    return (
        <div>
            <h1>{name}</h1>
            <img src={photoUrl} />
            <span>{status}</span>
        </div>
    )
};

CMS.registerWidget('icon-selector', IconWidgetMarkup , IconWidgetState);
CMS.registerPreviewTemplate("members", MemberPagePreview);
init({ config });

title: README.fm
icon: house
author: shailen-naidoo
---

**A podcast aimed at bridging the gap between people and technology for social good**

[Check it out](soundcloud.com/readme-fm)

└── src
   └── data
      ├── blog
      │  ├── ...
      │  └── readme-fm.md
      └── authors
         ├── ...
         └── shailen-naidoo.json

{
    "title": "Shailen Naidoo",
    "age": 20,
    "profession": "web developer",
    "hobby": "guitarist",
    "status": "registered member",
    "photo": "/photos/shailen-naidoo.jpeg"
}