Testing Netlify CMS with GitLab OAuth2. Everything works without a Netlify account.

Config GitLab#

Add an OAuth2 application to your GitLab profile.

  • Set the Callback URL to https://example.com/admin/.
  • Uncheck Confidential.
  • Check the api scope.

Add the Netlify CMS files to Hugo#

New files.

1
2
3
4
5

$ tree static
static
└── admin
    ├── config.yml
    └── index.html

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

config.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

backend:
  name: gitlab
  repo: username/repo
  auth_type: pkce
  app_id: GITLAB_APPLICATION_ID
  branch: main # Branch to update (optional; defaults to master)
media_folder: static/img
public_folder: /img
collections:
  - name: 'posts'
    label: 'Post'
    folder: 'content/posts'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

Deploy#

Push codes to GitLab. Serve the site with Cloudflare Pages.

Accessing the CMS#

https://example.com/admin