A Netlify CMS tutorial

Netlify is a headless CMS written in React.js that follows the JAM stack logic that fits surprisingly well in our dev workflow, as it can help us serve content and automate our deployments at the same time. In this tutorial we will try Netlify, install it locally, and then connect it to our github repository. With recent front-end Javascript and CSS framework explosion, Netlify has evolved around a rich ecosystem and became flexible enough to support pretty much every popular static site generator out there.

Test Netlify from localhost without installation.

Create the files required for netlify setup:
- config.yml
- index.html
- index.js
Connect index.html with Netlify core source files:

  <head>
    <link href="https://unpkg.com/netlify-cms/dist/cms.css" rel="stylesheet"/>
  </head>
  <body>
    <script src="https://unpkg.com/netlify-cms/dist/cms.js"></script>
  </body>

Create the index.js file:

 import CMS from 'netlify-cms'
 import CSS from 'netlify-cms/dist/cms.css'

 export default {
     CMS,
     CSS
 }

Define Netlify configuration variables and field entry types in config.yml file:

backend:
  name: test-repo # Used in routes

media_folder: "img"

collections: 
  - name: "articles" # Used in routes
    label: "Article" # Used in the React UI
    folder: "_articles" # Path to the documents
    filter: # filter entries based on the value of a single field
      field: language
      value: en
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    create: true # Allow users to create new documents in this collection
    fields: # The fields for each document, usually in front matter
        - {name: "title", label: "Title", widget: "string"}
        - {label: "Publish Date", name: "date", widget: "datetime"}
        - {name: "body", label: "Body", widget: "markdown"}
        - {label: "Featured Image", name: "thumbnail", widget: "image"}
        - {name: "slug", label: "Slug", widget: "string" }
        - {name: "layout", label: "Layout", widget: "hidden", default: "articledetail"}

Note: At this point we don't even need a module bundler like webpack or rollup, however we do need a server to serve our static files locally. Anyone of the following npm packages will do for now:

Create the server configuration file: We will use yarn add serve -D and create a server.js file in our root directory:

  // ./server.js
  const serve = require('serve')

  const server = serve(__dirname, {
    port: 1568,
    open: true,
    ignore: ['node_modules', 'bower_components']
  })

Note: Serving from a custom folder is easy:

  // ./server.js
  let admin = '__dirname' + '/admin' 

  const server = serve(admin, {
    ...
  })

Run the server with node server.js or yarn start. If everything goes well, the following message will appear in your terminal:

  ┌──────────────────────────────────────────────────┐
  │                                                  │
  │    Serving!                                      │
  │                                                  │
  │    - Local:            http://localhost:1568     │
  │    - On Your Network:  http://ip_address:1568    │
  │                                                  │
  │    Copied local address to clipboard!            │
  │                                                  │
  └──────────────────────────────────────────────────┘

Go to the above address and you will be greeted by the admin panel. Just click on the login button and enter your CMS. You can create and edit entries, however there is no persistance yet. Everything is served from memory.

Install Netlify locally and use it with a static site generator

Environment setup: yarn init
Install netlify: yarn add netlify-cms
Inform the platform about your node version: node -v > .nvmrc
In case you are already using a static site generator like Jekyll create an admin directory and move required files in it: config.yml, index.html and index.js. Then you can define and add more dependencies.

Install Ruby bundler:

gem install bundler

In Jekyll's example create a Gemfile in the root of our project:

source "https://rubygems.org"
gem 'jekyll', '~> 3.6.2'

Install Jekyll and create the Gemfile.lock dependency file:

bundle install

Add generated _site folder to .gitignore file.
Install webpack and create the webpack.config.js file:

import path from 'path';

module.exports = {
  entry: "./admin/index.js",
  output: {
      path: `${__dirname}/admin`,
      filename: "bundle.js"
  },
  module: {
      loaders: [
          { test: /\.css$/, loader: "style-loader!css-loader" },
          {
              test: /\.(eot|svg|ttf|woff|woff2)$/,
              loader: 'file-loader?name=public/fonts/[name].[ext]'
          }
      ]
  }
};

Add generated js bundle to your index.html file:

<script src="./bundle.js"></script>

Create scripts in package.json file:

"scripts": {
  "dev": "webpack && bundle exec jekyll serve",
  "bld": "webpack && bundle exec jekyll build"
},

Install your front-end poison of choice: yarn add babel-core react or vue ...blah...
Adjust webpack.config.js accordingly with the proper js loader.
Connect to Netlify and start coding !

Connect with Github

Stop the local server and create a github repository. When will start netlify again you will find a button with the label “Login With GitHub” and then we can follow the authentication steps.
Change first lines in config.yml to:

  backend:
    name: github
    repo: github_username/github_repo_name
    branch: master

For a more complete guide follow this tutorial

Allways use Netlify-cli

So far we have installed and tested minimal Netlify instance locally step by step just to get ourselves familiar with this great tool. However from now on for installation, deployment and continuous integration we must learn how to use the Netlify command tools.

Next Steps

1. Create a simple blog with React

We have many options here. Here some of my favorites:

i. react-static is recommended if you don't want to dive into Gatsby and GraphQl for something simple.

Read:

Check React static examples and templates
Try react-static-generator
Take a look at React app deployment with Firebase connection

ii. react-snapshot

iii. static site generator webpack plugin

2. Create a simple blog with Vue

Nuxt with nuxt-netlify-cms-module recommended.

Read:

Improving the deployment of a Nuxt site using Netlify

3. Learn how to use it with the static site generator of your choice:

Tutorials and links about how to use Netlify...

4. Read the docs

If you think Netlify CMS is a useful project please donate and/or Contribute to community

Useful links:

Name		Name	Last commit message	Last commit date
Latest commit History 97 Commits
_includes		_includes
_layouts		_layouts
_posts		_posts
_sass		_sass
admin		admin
css		css
images/uploads		images/uploads
.gitignore		.gitignore
.nvmrc		.nvmrc
.ruby-version		.ruby-version
404.html		404.html
Gemfile		Gemfile
Gemfile.lock		Gemfile.lock
README.md		README.md
_config.yml		_config.yml
about.md		about.md
index.md		index.md
package.json		package.json
server.js		server.js
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

CodeSigils/netlify-tutorials

Folders and files

Latest commit

History

Repository files navigation

A Netlify CMS tutorial

Test Netlify from localhost without installation.

Install Netlify locally and use it with a static site generator

Connect with Github

Allways use Netlify-cli

Next Steps

1. Create a simple blog with React

2. Create a simple blog with Vue

3. Learn how to use it with the static site generator of your choice:

4. Read the docs

About

Topics

Resources

Stars

Watchers

Forks

Languages