DEV Community

Cover image for How to use Netlify CMS on Vercel
Adrián UB
Adrián UB

Posted on

How to use Netlify CMS on Vercel

Hi everyone, today I want to introduce you to a serverless service to use Netlify CMS for sites hosted on Vercel.

What you need to do is modify your config.yml file:

backend:
  name: [github | gitlab]
  repo: adrian-ub/adrian-ub # Path to your Github/Gitlab repository
  branch: main # Branch to update
  base_url: https://netlify-cms.adrianub.vercel.app
Enter fullscreen mode Exit fullscreen mode

You can visit: https://netlify-cms.adrianub.vercel.app

GitHub logo ublabs / netlify-cms-oauth

Use Netlify CMS for sites hosted on Vercel.

Deploy with Vercel

Netlify CMS on Vercel

<p dir="auto">
    A simple OAuth2 serverless gateway for Netlify CMS
</p>
Enter fullscreen mode Exit fullscreen mode


Why do I need this?

If you would like to use Netlify CMS to manage your site deployed to Vercel.

GitHub and Gitlab 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

In yours projects modify config.yml file:

backend:
  name: [github | gitlab]
  repo: adrian-ub/adrian-ub # Path to your Github/Gitlab repository
  branch: main # Branch to update
  base_url: https://netlify-cms.adrianub.vercel.app
Enter fullscreen mode Exit fullscreen mode

Deploy

  • Create Github OAuth App:

    • Go to developer settings
    • Set Authorization callback URL to your deployed oauth website's callback URL https://netlify-cms.adrianub.vercel.app/callback
  • Create Gitlab OAuth app:

    • Go to User settings > Applications
    • Set Redirect URI to your deployed oauth website's callback URL: https://netlify-cms.adrianub.vercel.app/callback
  • Set environment variables on Vercel

    OAUTH_GITHUB_CLIENT_ID=<you-client-id>
    OAUTH_GITHUB_CLIENT_SECRET=<
    Enter fullscreen mode Exit fullscreen mode

Top comments (0)