DecapCMS and GitLab integration without Netlify

I'm using a lot of static website generators, such as Hugo, Nextjs, Docusaurus, and many more. To be able to write content directly through a web interface without needing to know how to write Markdown or git commands. I chose DecapCMS as my CMS.

DecapCMS (formerly Netlify CMS) is an open-source content management system for git workflows. Due to privacy concerns and not wanting to use another authentication service provider, I tried to figure out a way to use only GitLab authentication and be able to edit the content of our Docusaurus website.

Here is how you should begin.

GitLab

After installing DecapCMS in your website generator you will need to manage applications that can use GitLab as an OAuth provider, and applications that you've authorized to use your account. To do this follow the following steps:

Click on your profile icon.
Click Prefference -> Applications
Add new application
Name, redirect URL https://www.unicis.tech/admin/
Disable Confidential
Select api scope
Save application
Copy the Secret and add it to static/admin/config.yml

DecapCMS configuration

This file is only for blog posts. You can add more widgets if needed, like for pages, documents, and more.

backend:
  name: gitlab
  repo: repo/website
  branch: [name of the branch]
  auth_type: pkce
  app_id: [Application Secret from step 8 above]
  api_root: https://gitlab.com/api/v4
  base_url: https://gitlab.com/
  auth_endpoint: oauth/authorize
  accept_roles:
    - admin
    - editor
    - reporter

# when using the default proxy server port (for local dev)
local_backend: true

locale: en

media_folder: "static/img"
public_folder: "/img"

editor:
  preview: true

slug:
  encoding: "ascii"
  clean_accents: true
  sanitize_replacement: "_"

collections:
  - name: "blog"
    label: "Blog"
    folder: "blog"
    create: true
    slug: "{{date}}-{{id}}"
    identifier_field: "title"
    extension: "mdx"
    format: "frontmatter"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Slug", name: "slug ", widget: "{{slug}}" }
      - {
          label: "Tags",
          name: "tags",
          widget: "list",
          default: [],
          required: false,
        }
      - { label: "Draft", name: "draft", widget: "boolean", default: true, required: false }
      - {
          label: "Date",
          name: "date",
          widget: "datetime",
          format: "YYYY-MM-DD",
          timeFormat: false,
        }
      - { label: "Description", name: "description", required: false }
      - {
          label: "Image",
          name: "image",
          widget: "image",
          allow_multiple: false,
          required: false,
        }
      - label: "Author Title"
        name: "authors"
        widget: "list"
        fields:
          - label: "Author Name"
            name: "name"
            widget: "string"
          - label: "Author Title"
            name: "title"
            widget: "string"
          - label: "Author Image"
            name: "image_url"
            widget: "image"
            allow_multiple: true
      - { label: "Body", name: "body", widget: "markdown" }

After deployment, visit your website https://domain.tld/admin. Click on Login with GitLab. It will redirect you to grant authorization to Decap CMS. Click on Authorize and you should be able to see your blog post content.