Deploying to Cloudflare Pages

Once your Nerdy portfolio is ready, the next step is to make it live. Cloudflare Pages is an excellent, fast, and free hosting platform for Hugo static sites.

This guide walks you through deploying your site to Cloudflare Pages using either the GitHub Integration (for automatic deployment on commit) or the Wrangler CLI (for manual deployments from your local machine).

Prerequisites

Before deploying, ensure you have:

• A Cloudflare account.
• A GitHub repository with your site’s codebase (if using GitHub integration).
• Node.js and npm installed locally.

Method 1: GitHub Integration (Recommended)

Connecting your Git repository to Cloudflare Pages allows Cloudflare to rebuild and redeploy your site automatically every time you push to your repository.

1. Connect Git Repository

1. Log in to the Cloudflare Dashboard.
2. Navigate to Workers & Pages > Create application > Pages tab.
3. Click Connect to Git and follow the instructions to authorize Cloudflare to access your GitHub repository.
4. Select the repository containing your Nerdy project.

2. Configure Build Settings

During the setup wizard, configure the build settings precisely to ensure Hugo and Tailwind CSS can build successfully:

• Framework preset: Select None (do not select Hugo, as we use a custom Tailwind asset pipeline via npm scripts).
• Build command: npm run build
• Build output directory: exampleSite/public (or just public if your site is set up directly at the repository root).
• Root directory: / (unless your site lives in a subdirectory).

3. Add Environment Variables

Hugo modules and Tailwind CSS dependencies require modern tools. Go to the Environment variables section during setup (or in your Project Settings later) and add the following variables:

Click Save and Deploy. Cloudflare will start pulling your repository and building the site.

Method 2: Wrangler CLI (Local Deploy)

If you prefer to deploy manually from your command line without linking to GitHub, you can use Cloudflare’s command-line tool, Wrangler.

1. Install & Login

Make sure Wrangler is installed (it is included as a dev dependency in this project). Authenticate with Cloudflare:

npx wrangler login

2. Configure wrangler.jsonc

Ensure your wrangler.jsonc file points to the correct static asset directory. The template is pre-configured to output from exampleSite/public:

{
  "name": "31-nerdy",
  "compatibility_date": "2026-06-13",
  "assets": {
    "directory": "exampleSite/public"
  }
}

3. Build & Deploy

Run the deploy command. This script will automatically compile your Hugo site with minification first, then push the assets:

npm run deploy

(Note: npm run deploy translates to npm run build && wrangler deploy under the hood).

Wrangler will upload your assets and output a unique deployment URL, along with a production URL like https://31-nerdy.pages.dev.

Post-Deployment: Custom Domain & HTTPS

Once deployed, Cloudflare Pages provides free SSL/TLS certificates and native integration with your domain.

• Go to your Pages project in the Cloudflare dashboard.
• Select the Custom domains tab.
• Click Set up a custom domain and enter your domain name. Cloudflare will automatically handle the DNS routing and provision an SSL certificate for you.
• Remember to update the baseURL in your hugo.yaml file to your custom domain so that absolute URLs are generated correctly!