Live previewing Hugo sites with Cloudflare Tunnel

Posted May 09, 2021 with tags #cloudflare #hugo #webdev

Recently, Cloudflare made their Tunnel service (formerly Argo Tunnel) free and available for all Cloudflare users. For an existing free-tier user like myself, there’s no better time to try it out!

Tunnels are designed for securely connecting an origin server to a web-facing endpoint. They’re particularly great if

You’re a service operating from a network/zone that doesn’t allow inbound connections
You’re a developer looking to expose your local server to the web

There are generic tools out there that fill this niche (ngrok is great for quick demos, and there’s inlets if you prefer self-hosting), but Cloudflare’s offering works well for me because I already use them to manage my website.

Down to business - I’ll be using my website for this example because it’s built with Hugo.

After installing the cloudflared tunnel client, there’s a few commands to authenticate and create a tunnel. I’m calling my tunnel preview, and exposing it at tunnel.nicholas.cloud.

cloudflared tunnel login
cloudflared tunnel create preview
cloudflared tunnel route dns preview tunnel.nicholas.cloud

With a tunnel created, we can start tunnelling traffic from port 1313, the default port for Hugo’s dev server.

cloudflared tunnel run --url localhost:1313 preview

Visiting https://tunnel.nicholas.cloud/ now will show a 502 Bad gateway error, since our Hugo server isn’t running yet. Let’s start it up!

hugo server \
    --baseURL=https://tunnel.nicholas.cloud/ \
    --liveReloadPort=443 \
    --appendPort=false

There’s a few options we specify with this development server, seeing as we’re no longer serving traffic from localhost.

Overriding the default URL to your chosen URL with baseURL
Disabling appendPort, since the tunnel’s exit responds to traffic on the default HTTPS port 443
Likewise, the liveReloadPort should be 443 so pages will be reloaded as we make changes

There you have it, a live preview of your Hugo site on your own domain thanks to Cloudflare Tunnel!

Thanks to Hugo (not the site generator!) for his bit on previewing Hugo sites in GitHub Codespaces, which inspired me to try this out!