Using Decap CMS and Hugo on Cloudflare Pages
Overview
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.
Comments
comments powered by Disqus