4leggedIT Logo
Back to Resources
How-To SessionComplexity: MediumWebsite PublishingCustom Domain

How to Publish Your Website with Cloudflare Pages + GitHub (Custom Domain)

Publish a Lovable-built website by storing the code in GitHub and deploying through Cloudflare Pages with your custom domain.

This setup gives you stable hosting, version history, and repeatable deploys.

You will end with both your domain without www (example: yourrescue.org) and your www domain working over HTTPS.

This guide uses Lovable for the “sync to GitHub” example, but the same publish path applies to other tools that can export/sync code to a Git repository.

Quick Path

  • Connect Lovable to GitHub and confirm commits appear in the repo.
  • Delete bun.lockb in GitHub if it exists.
  • Cloudflare Pages: import the GitHub repo and deploy.
  • Copy the build fields exactly: npm run build, output dist.
  • Add only your www domain as a Cloudflare Pages custom domain and finish DNS.
  • Create a permanent redirect from your domain without www (yourrescue.org) to your www domain (www.yourrescue.org).
1

Step 1 — Connect your Lovable project to GitHub

➡ What this step does

This creates a GitHub repository to store your website code.

Cloudflare Pages will deploy from that repository.

📋 What to do
  1. In Lovable, open your website project.
  2. Find the GitHub integration (Git / Publish / Integrations, wording may vary).
  3. Connect to GitHub and authorize access if prompted.
  4. Choose the repository that will store your website.
  5. Confirm Lovable shows it is connected to GitHub.
  6. Confirm you see recent commits in GitHub after publishing changes from Lovable.
✅ What should happen

A GitHub repository exists for your site and shows recent commits.

You can open the repo and see website files like package.json.

2

Step 2 — Prep the GitHub repo (required)

➡ What this step does

This step prevents a common Cloudflare Pages build failure.

You will confirm the repo is synced, then delete bun.lockb if it exists.

📋 What to do
  1. Open the GitHub repo connected in Step 1.
  2. Confirm you see recent commits from Lovable.
  3. If a file named bun.lockb exists, delete it in GitHub and commit the change.
✅ What should happen

Your repo is ready for Cloudflare Pages builds.

bun.lockb is not present in the repo.

3

Step 3 — Deploy your GitHub repo in Cloudflare Pages

➡ What this step does

This step creates a Cloudflare Pages project and deploys your site.

You will import the repo and paste the build fields exactly.

📋 What to do
  1. Log in to Cloudflare.
  2. Go to Workers & Pages, then Pages.
  3. Choose Create application and import your GitHub repository.
  4. When Cloudflare asks for build settings, paste the build command and output directory exactly.
  5. Click Save and Deploy.
Copy exactly as shown. Do not modify.
Expand to copy: Build command (Cloudflare Pages field)
Copy exactly as shown. Do not modify.
npm run build
Expand to copy: Build output directory (Cloudflare Pages field)
Copy exactly as shown. Do not modify.
dist
✅ What should happen

Cloudflare shows a successful build and a deployed URL (your Pages subdomain).

You can open the deployed URL and see your site.

4

Step 4 — Connect your www custom domain

➡ What this step does

This step makes your site live on your real domain.

You will add your www domain in Cloudflare Pages.

📋 What to do
  1. In Cloudflare Pages, open your Pages project.
  2. Open Custom domains.
  3. Add your www domain (example: www.yourrescue.org) and complete the DNS steps Cloudflare shows.
  4. Wait until the domain shows as Active.
  5. If your domain and DNS are not managed in Cloudflare yet, start with How to Transfer a Domain to Cloudflare.
✅ What should happen

Your www domain shows as Active in Cloudflare Pages.

https://www.yourrescue.org loads over HTTPS.

5

Step 5 — Redirect your domain without www to www (permanent)

➡ What this step does

This step ensures your domain without www (example: yourrescue.org) forwards to your www domain (example: www.yourrescue.org).

We do this with a DNS CNAME first, then a Cloudflare Redirect Rule (301 permanent).

📋 What to do
  1. In Cloudflare, open your domain and go to DNS.
  2. Create a DNS record: CNAME for @ pointing to www (proxied / orange cloud).
  3. Then go to Rules → Redirect Rules.
  4. Create a redirect: match yourrescue.org/* and redirect to https://www.yourrescue.org/$1 (keeps the path after the domain).
  5. Choose status code 301 (Permanent), then save and enable the rule.
  6. If you want a step-by-step example of Cloudflare redirects, see Cloudflare URL Forwarding.
  7. Next recommended step: set up search visibility using Search Engine Visibility.
✅ What should happen

Your domain without www is configured to redirect to www (301).

6

Step 6 — Test your site after launch

➡ What this step does

This confirms your deploy, redirect, and domain setup are correct.

You will check both domains and a few key pages.

📋 What to do
  1. Open https://www.yourrescue.org and confirm it loads.
  2. Open https://yourrescue.org and confirm it redirects to the matching path on https://www.yourrescue.org/$1.
  3. Confirm you see HTTPS (secure lock icon in the browser).
  4. Click a few key pages and confirm they load normally.
✅ What should happen

The redirect happens immediately and consistently.

You do not see “domain not configured” or certificate errors.

Official References

Open these only if something doesn’t match your screen.

You do not need to read them to complete the guide.

Lovable: GitHub integration Cloudflare Pages: Get started Cloudflare Pages: Build configuration Cloudflare Pages: Custom domains Cloudflare: URL redirects GitHub: Repositories documentation GitHub: Delete files in a repository

Related How-To Sessions

Lovable Website Access & Editing

Log in and request changes using plain language (no coding).

Cloudflare Account Setup

Create the Cloudflare account that owns your DNS and domain foundation.

How to Move DNS to Cloudflare (Without Transferring Your Domain)

Move DNS management to Cloudflare before connecting a custom domain.

How to Transfer a Domain to Cloudflare

Move your domain registration to Cloudflare (registrar transfer).

Want Help Publishing Your Site?

If you’d like support setting up Lovable, GitHub, Cloudflare Pages, or custom domains, contact 4leggedIT and we’ll help you launch.

Get in TouchBack to Resources