[Project Deploy] How to Deploy Self-Domain Hugo Website by Frontend Cloud Platforms Netlify,Cloudflare,Vercel Pages ?

+ Where am I ?

I just wonder what options are there for web hosting and automation.While all of these tools overlap, they generally fall into 3 categories:

In here I want to be pecific about Frontend Cloud Platform which is suitable for people do not want to host mechine by theirselve.

+ Who do I want to be ?

I wonder what are the difference between all three popular platforms

I guess in this case I’d choose “Cloudflare” for more room to wiggle with.

+ Why I always failed ?

Originally I am not familiar with the automate deploy flow there are some issues that I encounter:

• the GUI is hard to find the things I need
• the bandwidth limitation is not clear
• the limitation for writing script and where to put it

+ When to make change ?

when I feel the setting is really hard I just use Netlify.they just have custom flow to automatically make configuration work. When I feel hit the limitation I just suddenly figure out I should try different method to access so I turn to cloudflare.

+ What Actions Should I Take ?

Hugo Netlify Setup

1. The netlify.toml File Instead of clicking through the Netlify UI, create a file named netlify.toml in your root directory. This ensures your Hugo version matches your local environment perfectly.

    [build]
    publish = "public"
    command = "hugo --gc --minify"
   
    [build.environment]
    # IMPORTANT: Match this to your 'hugo version' result
    HUGO_VERSION = "0.156.0" 
    HUGO_ENV = "production"
    HUGO_ENABLEGITINFO = "true"
   
    [context.deploy-preview]
    # Useful for seeing draft posts on your PR previews
    command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
   

2. Deploy to Netlify

   • Log into Netlify and click Add new site > Import an existing project.
   • Select your GitHub/GitLab repo.

3. Automatic Detection: Netlify will automatically detect Hugo and read your netlify.toml.

4. Deploy: Click Deploy site.

Hugo Cloudflare Setup

1. Configure via Dashboard When you connect your GitHub repo to Cloudflare Pages, use these settings:
   • Framework Preset: Hugo
   • Build command: hugo –gc –minify -b $CF_PAGES_URL
     • Note: Using the $CF_PAGES_URL variable ensures your Preview Deployments (for pull requests) have the correct URLs.

• Build output directory: public

2. Essential Environment Variables

   Variable	Value	Reason
   HUGO_VERSION	0.155.0	Match this to your local version (hugo version).
   GO_VERSION	1.24.0	Ensures the Go environment is up to date for Hugo.

3. Advanced: The wrangler.jsonc Method

   {
    "name": "my-hugo-site",
    "compatibility_date": "2026-05-01",
    "assets": {
        "directory": "./public",
        "html_handling": "auto-trailing-slash"
    },
    "build": {
        "command": "hugo --gc --minify -b $CF_PAGES_URL"
    },
    "vars": {
        "HUGO_VERSION": "0.155.0"
    }
    }
   

+ Reference

1. Vercel, Guillermo Rauch, 2015
2. Netlify, Mathias Biilmann & Christian Bach, 2014
3. CloudFlare, Matthew Prince, Lee Holloway, and Michelle Zatlyn, 2009