This method will not work with fork !
- A static site generator whith its dependencies in your server and which's stored in github (Jekyll, Hugo, etc...), HERE, a list of the top of static site generator.
- Nodejs 6.x
- PM2 node package
-
Create an Oauth application in your github settings with the callback URL : http://your.domain.site:3000/callback
-
Clone the netlify-github-oauth-provider repositories
git clone https://github.com/vencax/netlify-cms-github-oauth-provider
- Create in this one the .env file and set in the credentials of your Oauth application :
touch netlify-cms-github-oauth-provider/.env
NODE_ENV=production
OAUTH_CLIENT_ID=yourclientid
OAUTH_CLIENT_SECRET=yourclientsecret
- Install the dependencies and start the API server with PM2
npm install
pm2 start --name="github-oauth-provider" npm -- start
- On the root path of your static site, create the "admin" directory and this directory create the file index.html and config.yml
mkdir admin && touch admin config.yml && touch index.html
- Edit the index.html like below:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
<link rel="stylesheet" href="http://cms.your.domain.site/dist/cms.css" />
</head>
<body>
<script src="http://cms.your.domain.site/dist/cms.js"></script>
</body>
</html>
- And the config.yml like this (To create collection take a look to the official docs):
backend:
name: github
base_url: http://your.domain.site:3000
site_domain: your.domaine.site
repo: owner/repositories # Path to your Github repository
media_folder: "img/uploads" # Folder where user uploaded files should go
collections: # A list of collections the CMS should be able to edit
- Then, build your site.
- Clone the netlify-cms repo
git clone https://github.com/netlify/netlify-cms
- Set a web access to the root path of netlifycms with your favorite web server.
server {
listen 80
server_name cms.your.domain.site
location / {
add_header Access-Control-Allow-Origin "*";
root /path/to/netlify-cms;
index index.html;
}
}
- Edit the netlify.toml to link with your static site:
[build]
Command = "npm run build && cp /path/to/your/static/site/* dist/"
Publish = "dist"
- Install dependencies and build the CMS
npm install
npm run build
- We'll use CircleCI for test and automated deployment:
- Where you want, create an ssh key pair without passphrase
ssh-keygen
- In the root of your Github project, create the file circle.yml and set your tests according to your static site generator, in my case a set a test for a Jekyll site. But in any cases, keep the deployment part
machine:
ruby:
version: 2.3.1
java: # see <https://github.com/svenkreiss/html5validator#integration-with-circleci>
version: oraclejdk8
environment:
NOKOGIRI_USE_SYSTEM_LIBRARIES: true # Faster installation of nokogiri, required by html-proofer
dependencies:
post:
- bundle exec jekyll --version # print it out
test:
override:
- bundle exec jekyll doctor
- bundle exec jekyll build
deployment:
production:
branch: master
commands:
- ./deploy
- Also create a deploy file, CircleCI will execute it in its container to deploy your change in your server and build the site, again, in my case the deploy script is adapted to a jekyll site, for an another tool add all ssh command you need to build your site, but keep the git pull command
#!/bin/bash
echo "Start deploy"
ssh -tq [email protected] "bash -lc 'cd /path/to/your/static/site/ && git pull'"
ssh -tq [email protected] "bash -lc 'cd /path/to/your/static/site/ && bundle exec jekyll build'"
echo "Deployed Successfully!"
exit 0
- Connect to CircleCI with your github account
- On the dashboard, select your github project which match with your site
- In the settings of your project in PERMISSIONS, SSH PERMISSIONS, select Add SSH Key
- In this input, set your site domain in hostname and copy the private key you created
- Now, for each push in your git repositories whether this comes from the CMS, You directly on github, or from the server, CircleCI execute your test and your deploy script to build your site automaticly.
- Go to http://your.domain.site/admin ;)