Netlify CMS is a light-weight content management system created by Netlify.
Though, Netlify built their CMS for use with Netlify hosting, it is possible to use Netlify CMS on a self-hosted server.
In this guide, we'll go through the steps of what it takes to accomplish this using Cleavr.
In Cleavr, go to your provisioned server and add a new site with App Type set to NodeJS SSR.
We need to add an app running on our server that will act as a GitHub OAuth Provider. The reason for this is that Netlify CMS typically uses Netflify as an authenticator for their CMS. They do allow you to use a custom authenticator, such as GitHub. However, GitHub requires a server. Therefore, we'll be adding our own simple OAuth app to perform the magic act.
The solution that we're walking through will also work for GitLab; however, these instructions will cover having your project on GitHub.
Once your site is created, take note of the URL you've assigned to your site and save it for later.
Why this project? Simple, it uses Nuxt. 😍
Add your project to your GitHub account. You can see my fork of the Bael Theme here: My fork
Unlike our other deployment guides, you'll need to make sure you have ownership over the repository as we'll be making a change to a file.
In your project, locate the
config.yml file. In our example project, it's located at
We'll need to update the
backend portion as follows:
backend: name: github repo: user/repo branch: master base_url: https://your.oauth-provider-url.com
Be sure to add in the
user/repo for your project, the branch it is on, and the
base-url which is the url from step 1.
Save your changes.
While we are in Github, let's now create a new GitHub OAuth App.
Follow the GitHub OAuth App Guide.
Which is, essentially navigate, in GitHub, to your account > settings > developer settings > OAuth Apps > New OAuth App.
Fill in the form as follows:
/callbackto the url you used above (ie:
Register the application.
After creating the app, you'll see the Client ID. Copy the client ID and save it for later.
Click on Generate a new client secret. Copy the secret and save it for later.
Back in Cleavr, we'll now add a new Nuxt Static site on our server.
Note that you may choose a different app type, such as NuxtJS Static, if your site is not using Nuxt.
Once you add the new site, take note of the URL.
In the web app section of Cleavr, click into the OAuth Web App and go to Settings > Code Repository tab.
Select a GitHub VC profile.
Fill in Repository with
We're using the Netlify CMS GitHub OAuth Provider by Vencax project for our OAuth provider application.
Set Branch to Deploy to
Click on the Build tab and set Entry Point to
Within the PM2 Ecosystem area, add the following to
"NODE_ENV": "production", "ORIGIN": "your.main-site.com", "OAUTH_CLIENT_ID": "your-oauth-client-id", "OAUTH_CLIENT_SECRET": "your-oauth-client-secret",
Update the ORIGIN with the URL for your project (from step 5) and fill in OAUTH_CLIENT_ID and OAUTH_CLIENT_SECRET with the values from step 4.
Now, go to the Deployment Hooks section and disable the build hook.
Once you are done with the above, go to the Deployments section and Deploy.
Head to your OAuth app and click on the link to authenticate via GitHub to test that it works as expected.
Navigate back to the main web app section and then click in the Nuxt Static site that will be our main site that we are deploying.
Navigate to Settings > Code Repostory.
Select your GitHub VC profile.
For Repository, add in the repo. In our example, it's
armgitaar/bael-template and the branch to deploy is
The only thing left, deploy!
Once the site has deployed, append
/admin to the end of the URL. You should now be able to authenticate via your GitHub OAuth app and
then gain access to the Netlify CMS backend.
To make the most of this setup, enable Push-to-deploy in the settings > code repository section. Better yet! Enable the GitHub Actions integration.
Sign up for a 5-day free trial of Cleavr Pro. No credit card required until you decide to subscribe.Sign up for free
© 2022 Little Bets, LLC. All rights reserved.
❤️ ☕️ 🎨