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

5. Register application
6. 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" }

4. Open yoursite.com/admin and log in using your GitHub account

Success

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

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

• ⭐️ GitHub - SubhenduX/decap-cms-cloudflare-pages: Oauth API to run Decap CMS on Cloudflare Pages
• Basic Steps | Decap CMS | Open-Source Content Management System

After some exploration and experimentation, I discovered that Hugo automatically generates RSS feeds for each tag. TIL! Here’s how you can access these tag-specific RSS feeds:

• iOS Tag Feed: https://kunat.dev/tags/ios/index.xml
• Swift Tag Feed: https://kunat.dev/tags/swift/index.xml
• Utils Tag Feed: https://kunat.dev/tags/utils/index.xml