14 Apr, 2018  •  by Cnly

this tutorial

Updated 14 July 2019: Added the requirement of adding a custom domain according to this comment.

Updated 19 April 2019: Updated admin/index.html to the latest official version and fixed some minor (natural) language problems.

This post walks through the really fast process of adding Netlify CMS to an existing GitHub Pages site. At the end of this post you should have:

Let’s get started.

First, go to GitHub Dev Settings and click New OAuth App. Or just click here: https://github.com/settings/developers

Enter whatever you like for Application name and Homepage URL.

In Authorization callback URL, enter: https://api.netlify.com/auth/done.

Once finished, leave the page in the background. You will need the Client ID and Client Secret on this page later.

… Relax! We’re just creating one, without actually using it. In fact, if you want to deploy Jekyll site on Netlify, you will need to include Jekyll (generator) in your git repo.

Go to Netlify and create a new site from… any repo. We are not really using Netlify to host that, anyway.

After that, go to Settings, and copy your Site name. It should be something like octopus-cat-123456.

From the sidebar go to Domain Management and add your GitHub Pages domain (you.github.io) as a custom domain. Choose Yes when asked if you are github.io’s owner.

From the sidebar go to Access control, scroll down to OAuth and click Install provider.

Choose GitHub as provider, and enter the Client ID and Client Secret from GitHub OAuth app page mentioned above.

Then you can close the Netlify and GitHub webpages.

Finally! We are now going to add the CMS files into our static Jekyll site.

Under the root directory of your site, create a folder named admin, and cd into it. All our work will be done here.

Create a file named index.html.

Copy and paste these into it:

Then create another file named config.yml.

Copy and paste these into it:

Be sure to replace you/you.github.io with your repo, and octopus-cat-123456.netlify.com with your-site-name.netlify.com.

For more information about the fields field, please go to https://www.netlifycms.org/docs/add-to-your-site/#collections.

Save the files, commit, and push to GitHub. Done. Visit https://you.github.io/admin to see your CMS. :D

this tutorial