You have a website built with Hugo hosted on CloudFlare Pages and you want to integrate Decap CMS to it? Here’s how.

At the end of this article you’ll be able to add posts to your website and manage existing ones using a Decap admin panel on your website.

Prerequisites

  • Your website is built using Hugo
  • Your website is hosted using CloudFlare pages
  • You have a GitHub account (we’ll use it for OAuth authentication)

How

Creating an OAuth App in GitHub

  1. Go to Developer Settings
  2. OAuth Apps
  3. New OAuth App
  4. Fill out application name, Homepage URL and Authorization callback URL as follows

  1. Register application
  2. Generate a new client secret (we’ll need it in a moment)

CloudFlare

  1. Open your CloudFlare dashboard
  2. Compute (workers)
  3. Workers and Pages
  4. Select the project you want to set up your CMS for and open settings
  5. Go to Variables and secrets and select Add
  6. Add the following two secrets
GITHUB_CLIENT_SECRET: <secret that you've copied in step 6 above>
GITHUB_CLIENT_ID: <Client ID from the OAuth app you've created before>

Adding Decap to your site

  1. Copy functions directory from this project to the root of your website
  2. Copy static directory from this project to the root of your website
  3. Configure /static/admin/config.yml so that it works for your site. Here’s how this config file looks for this site:
backend:
  name: github
  repo: bkunat/kunat.dev
  branch: main
  base_url: https://kunat.dev
  auth_endpoint: /api/auth

media_folder: "content/notes/images"
public_folder: "/notes/images"

collections:
  - name: "notes"
    label: "Notes"
    folder: "content/notes"
    create: true
    slug: "{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime", date_format: "YYYY-MM-DD", time_format: "HH:mm:ss", format: "YYYY-MM-DDTHH:mm:ss+02:00" }
      - { label: "Draft", name: "draft", widget: "boolean", default: true }
      - { label: "Tags", name: "tags", widget: "list", allow_add: true, collapsed: false, field: { label: "Tag", name: "tag", widget: "string" } }
      - { label: "Body", name: "body", widget: "markdown" }
  1. Open yoursite.com/admin and log in using your GitHub account

Decap login screen

Success

After a successful login here’s how your site should look like:

Decap home screen

Recently a non-technical friend asked me to create a site for him. He didn’t have any special requirements so to save time I just cloned this site. The final missing piece was adding a CMS that would allow him to easily add new content to the site.

I was so positively surprised by the Decap experience that I ended up adding it for myself. Till now I managed all of my content manually with git. That remains my default way to manage content, but being able to quickly add/edit posts from my iPhone or iPad is a great improvement!

Resources