Using Decap CMS and Hugo on Cloudflare Pages

In the ever-evolving landscape of web development, the seamless integration of content management systems (CMS) and static site generators has become a crucial aspect of creating efficient and dynamic websites. This article explores the synergy between Decap CMS, Hugo, and the powerful hosting capabilities of Cloudflare Pages.

What is Decap CMS?

Well the 1st question is what is Decap CMS? Decap CMS is an open source content management system for your Git workflow that provides you with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

Install Hugo On Cloudflare Pages

Installing Hugo on Cloudflare is very easy. You will need a github account and Cloudflare account(with email verified). Then follow Cloudflare Pages official documentation . Or follow below steps

Step 1: Install Hugo Locally

Begin by installing Hugo on your local machine. Use a package manager like Homebrew or Chocolatey, or download the binary from the official Hugo releases page. Confirm the installation

1hugo version

Step 2: Create a New Hugo Site

Initiate a new Hugo site

1hugo new site mywebsite

Navigate into your project

1cd mywebsite

Step 3: Customize Your Site

Choose a Hugo theme or design your layout for a personalized touch.

Step 4: Set Up Git

Initialize a Git repository:

1git init

Add your files, commit, and push to a GitHub repository.

Step 5: Connect to Cloudflare Pages

On Cloudflare Pages, select your GitHub repository.Configure the build settings

• Build Command

• 1hugo --minify
  

• Build Output Directory

• 1public
  

Step 6: Deploy Your Site

Initiate the deployment on Cloudflare Pages, and witness your Hugo site built and hosted effortlessly.

Setting Up Decap CMS for Cloudflare Pages

Now we setup Decap CMS into our Cloudflare Pages

Step 1: Create OAuth application at Github

Go to Settings -> Developer Settings and choose OAuth Apps. Create a new OAuth App. Name it anything you like. Homepage URL should be set to your site’s URL. Authorization callback URL is the important part; it, too, can be set to your homepage URL (like https://indexedev.com). Other guides say to set this to the callback API endpoint, but the documented requirement is that the callback URL be a subdirectory of this URL, and using the callback URL itself didn’t work for me.

Github will give you a Client ID, and you can generate a Client Secret at this time. You will need both.

Step 2: Add Client ID and Secret to your Cloudflare project

In your Cloudflare Pages project, go to Settings -> Environment variables. Add two environment variables, GITHUB_CLIENT_ID set to the client ID from above, and GITHUB_CLIENT_SECRET set to the secret.

Step 3: Add the files to your project

Go to this github repository and Download it Decap CMS.

Take the functions directory from this repo and add it to your project at the top level.

NOTE: This means the actual top-level of the project itself, not the top level of your output directory. So, if you’re using Hugo, functions goes at the top of the project next to content and layouts and archetypes and so forth, not inside the static or assets directory.

Take the static/admin directory from this repo and add it to your static directory (for Hugo) or wherever you add files to be deployed as-is to your site. There are two files under admin, a stub HTML file that loads the CMS, and the CMS config file config.yml. You can change the name of the admin directory.

Step 4: Publish

Publish your site and let Cloudflare build it. Go to /admin/ on your site, and you should see a Login with Github button, which should authenticate you to Github and launch the CMS.

Now You can use Decap CMS on your Cloudflare Pages If you still struggling comment below i will help you.