How to Deploy a Hugo Static Site to Cloudflare Pages Using Wrangler

If you want fast and hassle-free deploys for your Hugo site, deploying directly to Cloudflare Pages with Wrangler is ideal. This guide covers everything: Hugo build, search index generation, version control, and direct deployment to Cloudflare—all in one smooth workflow.

---

✅ Requirements

• Hugo installed on your machine
• Node.js and npm installed
• Wrangler CLI installed globally
• Pagefind (use via npx or install locally)
• A Cloudflare account and a Pages project set to Direct Upload

Example Folder Structure

• Hugo site root:
  /Users/username/sites/myhugosite
• Hugo public folder:
  /Users/username/sites/myhugosite/public
• Cloudflare Pages project name:
  my-hugo-cloudflare

---

🛠 Step 1: Install and Authenticate Wrangler

Install Wrangler globally in your terminal:

npm install -g wrangler

Log in to Cloudflare in your terminal:

wrangler login

(This will open a browser window for authentication.)

---

📝 Step 2: Create a Cloudflare Pages Project (Direct Upload)

1. In the Cloudflare dashboard, create a new Pages project for Direct Upload (not GitHub connected).
2. Choose a project name (e.g., my-hugo-cloudflare).
3. Check your deploy subdomain (e.g., my-hugo-cloudflare.pages.dev).

---

🔨 Step 3: Create the Deploy Script

In your Hugo root folder, create a file named deploy_cloudflare.sh and paste the following:

#!/bin/bash

# Build the Hugo site
hugo

# Stage, commit, and push changes to GitHub (optional, but great for version control)
git add .
git commit -m "Site updated: $(date '+%Y-%m-%d %H:%M')"
git push

# Generate the Pagefind search index
npx pagefind --source "/Users/username/sites/myhugosite/public"

# Deploy to Cloudflare Pages
wrangler pages deploy "/Users/username/sites/myhugosite/public" --project-name my-hugo-cloudflare

echo "All done! Deployed to https://my-hugo-cloudflare.pages.dev"

Customize the paths and project name as needed for your setup.

---

⛑ Step 4: Make the Script Executable

In your terminal:

cd /Users/username/sites/myhugosite
chmod +x deploy_cloudflare.sh

---

🚀 Step 5: Run the Deploy Script

Run the script:

./deploy_cloudflare.sh

This script will:

• Build your Hugo site (public/ folder)
• Commit and push changes to GitHub
• Generate the search index with Pagefind
• Directly upload your site to Cloudflare Pages
• Print a success message including your live URL

---

💡 Tips & Advice

• You do NOT need file permission adjustments (chmod) for Cloudflare Pages.
• Always run npx pagefind … after Hugo build but before deployment.
• Make sure wrangler, hugo, and npx are available in your terminal PATH.
• For custom domains, complete setup in the Cloudflare Pages dashboard after your first deployment.

---

With this method, you can swiftly deploy only the checked and finalized files from your local environment, totally avoiding CI/CD delays in the cloud.

Happy publishing!