robinpokorny/netlify-cms-now

Netlify CMS on ▲ Now Vercel

Use Netlify CMS with GitHub backend for sites hosted on ▲ Now Vercel

A simple OAuth2 serverless gateway for Netlify CMS with GitHub written in TypeScript.

Why do I need this?

If you would like to use Netlify CMS to manage your site deployed to Vercel with GitHub as the site's repository.

GitHub requires a server for authentication and Netlify provides this server only for sites deployed to it. Fortunately, such server is rather small and can work with Vercel's serverless functions.

Usage

1. Fork this project or copy files to an existing one

The most important files and folders are: admin/, api/, .env, now.json, package.json. The rest depends on your static generator. We use blog/ and img/ for demo only.

Register this project to Vercel.

Important: The actual deployment will fail, we will fix it in the following steps.

2. Decide on the production domain

Authentication will work correctly only on the production domain, it will not work on development preview URLs. For this repo, the URL is netlify-cms-now.now.sh, but it could be any domain that Now supports, even custom domain. In the following <domain> represents your selected domain.

3. Configure Netlify CMS

Open admin/config.yml file. Here we need to update two fields:

• Set repo to your GitHub repo that contains the source code of your site.
• Set base_url to the production domain with HTTPS protocol, for example, https://netlify-cms-now.now.sh.

You will need to change the rest of the configuration to match your repo structure. See Netlify CMS docs for more details. This can be done later.

4. Create a GitHub App

On GitHub go to Settings > Developer settings > GitHub Apps > New GitHub App (direct link).

Fill in any name and any homepage URL. The important field is User authorization callback URL, input https://<domain>/api/callback, where <domain> is domain from step 2, also note that HTTPS is required.

Under Repository permissions set Contents to ‘Read & Write’.

At the very bottom is a section called Where can this GitHub App be installed?. If you will be the only user, leave the default options. If there will be more contributors select ‘Any account’.

Click on Create GitHub App button.

On the next page, you should see Client ID and Client secret. We will use in the next step.

Note: You might need to install the app to your account. Click on Install App in the right menu and install it to your account. This step will probably land on the specified callback URL which either is not yet deployed or is it blank. That's OK, you can navigate back to GitHub and ensure the app was installed.

5. Set environment secrets

Using Now CLI set the two secrets:

now secrets add oauth-client-id <client-id-of-GitHub-App>
now secrets add oauth-client-secret <client-secret-of-GitHub-App>

6. Deploy your website

Either run now --prod or use the GitHub integration to deploy your project to the production domain.

Navigate to https://<domain>/admin and click on Login with GitHub. The first time you log in, you need to authorise your GitHub App. Make sure you give permissions to the right repo.

After successful authentication, you should be redirected back to Netlify CMS interface.

7. Enjoy! 🎉

In case of questions please file an issue.

Links

• Netlify CMS
• Configuring GitHub Backend in Netlify CMS docs
• Secrets in Vercel,

Release History

• v1.0.0 – 2020-03-02
  • Initial release

Attribution

This project is inspired by:

• vencax/netlify-cms-github-oauth-provider (Express.js)
• marksteele/netlify-serverless-oauth2-backend (AWS Lambda)

Meta

Robin Pokorny – @robinpokorny – [email protected]

Distributed under the MIT license. See LICENSE for more information.

https://github.com/robinpokorny/netlify-cms-now