cms.md

Making a CMS using Heroku, GitHub, node.js and React

Create a repository to be hold static website/content (done)

This repo will ultimately contain all the templates and code needed to render your website. It should deploy to Amazon S3 using travis. You can follow the instructions on https://simplestaticsite.org/ to get started.

Define Content Types

In the static repository, create a folder called "content". In this folder you can define each of the content types.

Start by defining a blog post type. To do this, create a file called blog-post.toml in the content folder you just created. Put the following inside it:

name="Blog Post"

[fields]
title="text"
content="html"

Create a node.js app (done)

Create a simple node.js server using express and get it deployed to heroku. https://simpledynamicsite.org/ should help with this.

Use passport to allow users to log in via GitHub (done)

Use passport and passport-github2 and cookie-session to let users log in via GitHub. This will give you a GitHub Access Token.

Add React (done)

Use browserify-middleware with babelify to serve a JavaScript bundle.

Use react and react-dom to render a basic "Hello World" react app.

Load config and list of content types in React component

Define a server endpoint, app.get('/content-types', ...). Use https://github.com/scriptit/github-basic with the GitHub API (you can see an example of this in https://github.com/ForbesLindesay/github-stream/blob/master/index.js) to get the content types you defined earlier in the repo.

Fetch these in the app component. You can use https://www.npmjs.com/package/toml-node to parse the toml files into a JavaScript object.

Let the user select a type of content (e.g. Blog Post)

Add a screen with a list of content types (that you've loaded from GitHub) for them to choose from. When they've selected a content type, they should see a button to add a new item of that type.

Create a form from the content type

When the user has selected a content type, render a form using the fields defined in the toml file. You should be able to edit which fields the type of content has by simply editing the toml file.

When the user saves the form, post the data in the form to the server

When the user saves the form, send the data as JSON to the server. Save this data as a file in the GitHub repository using github-basic's .commmit method.

Update the website so that it renders the contents of these JSON files

Add listing of current files to the CMS

Add the ability to edit files to the CMS