Posts /

Open source CMS for Jekyll site hosted on GitHub Pages - Netlifycms

Twitter Facebook
04 May 2020

Why do we need CMS for Jekyll?

Jekyll is an awesome static site generator. However, in terms of content management workflow, it is not that simple enough and we need a fully fledged CMS like Netlifycms.

What are the options in Netlifycms?

We have two options to deploy Netlifycms:

  1. Migrate the site on Netlify.
  2. Simply deploy Netlify CMS on GitHub Pages with your own OAuth.

First one is straight forward and you can find the instructions in here. In this post we demonstrate the second option in detail. For external OAuth, we can use Heroku or OpenShift platform to deploy Netlifycms OAuth code for free (Free quota is enough for this code). Please watch this video for Heroku application as we prefer OpenShift in here.

Why do we need GitHub Pages when we have free Netlify hosting + CMS?

We will not get fine-grained control over the site. It is easy to make changes to the site itself when we are hosting on GitHub Pages.

How to facilitate your own OAuth authentication?

On Netlifycms page, there are some community-maintained projects for this. We prefer this Node.js code here.

Create OAuth authentication app in GitHub

Go and create OAuth app from GitHub account from here and make it ready your client ID and client secret.

Create Netlifycms authentication app on OpenShift

First create a free OpenShift account from here and try below commands.

# clone github repository
git clone
cd netlify-cms-github-oauth-provider

# create application
cat << EOF > ./.env
oc new-app .
oc status
export OAUTH_CLIENT_ID=<GitHub client ID>
export OAUTH_CLIENT_SECRET=<GitHub client secret>
oc create secret githuboauth --from-literal=OAUTH_CLIENT_ID=${OAUTH_CLIENT_ID} --from-literal=OAUTH_CLIENT_SECRET=${OAUTH_CLIENT_SECRET}
oc set env --from=secret/githuboauth dc/netlify-cms-github-oauth-provider
oc patch svc/netlify-cms-github-oauth-provider -p '{"spec":{"ports":[{"name":"3000-tcp","port":3000,"protocol": "TCP","targetPort": 3000}]}}'
oc create route edge --service netlify-cms-github-oauth-provider
oc get route

Create changes in Jekyll site

In your Jekyll site root directory, create two files as follows:

 ├ index.html
 └ config.yml
cat < EOF > admin/index.html
<!doctype html>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="[email protected]^2.0.0/dist/netlify-cms.js"></script>

cat < EOF > admin/config.yml
  name: github
  repo: <your github repo> Ex: username/repo
  branch: <repo branch> Ex: master
  base_url: <url from oc get route command> Ex:

media_folder: "images/uploads"

publish_mode: editorial_workflow

  - label: "Blog"
    name: "blog"
    folder: "_posts"
    create: true
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Image", name: "image", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}

Please make changes on config.yml file as per your values and refer this for more information.

This is it! Now you can visit to authenticate and see your Netlifycms console.

Twitter Facebook