Skip to main content

​
Overview

Cloudflare Pages makes it easy to use a custom domain for your Astro portfolio. You can connect a domain registered with any provider, and Cloudflare will automatically provision SSL certificates and handle DNS configuration. The production site uses lewiskori.com as configured in astro.config.mjs:11-17: 
const SITE_URL = 'https://lewiskori.com';

export default defineConfig({
  site: SITE_URL,
  // ...
});
The site configuration is used for generating absolute URLs in sitemaps, RSS feeds, and canonical links.

​
Prerequisites

Before you begin, ensure you have:
  • A deployed Cloudflare Pages project
  • A registered domain name (can be from any registrar)
  • Access to your domain’s DNS settings

​
Setup Options

You can connect a custom domain in two ways:
  1. Domain on Cloudflare (Recommended) - Transfer or use an existing domain managed by Cloudflare
  2. External Domain - Point an external domain to Cloudflare Pages using CNAME records
1

Add Domain to Cloudflare

If your domain isn’t already on Cloudflare:
  1. Log in to the Cloudflare Dashboard
  2. Click Add a Site
  3. Enter your domain name (e.g., example.com)
  4. Select a plan (Free plan works great)
  5. Cloudflare will scan your existing DNS records
You don’t need to transfer your domain registration. You only need to point your domain’s nameservers to Cloudflare.
2

Update Nameservers

At your domain registrar (GoDaddy, Namecheap, etc.):
  1. Find the nameserver settings
  2. Replace existing nameservers with Cloudflare’s nameservers:
    • ns1.cloudflare.com
    • ns2.cloudflare.com (Exact nameservers will be shown in your Cloudflare dashboard)
  3. Save changes
DNS propagation can take up to 24-48 hours, but often completes within minutes.
3

Connect to Pages Project

Once your domain is active on Cloudflare:
  1. Navigate to Pages > Your project
  2. Go to Custom domains tab
  3. Click Set up a custom domain
  4. Enter your domain (e.g., lewiskori.com or www.lewiskori.com)
  5. Click Continue
Cloudflare will automatically:
  • Create DNS records
  • Provision SSL certificate
  • Configure CDN routing
4

Configure Apex and WWW

Decide on your preferred domain structure:Option A: Use apex domain (example.com)
  • Add example.com as custom domain
  • Optionally add www.example.com with redirect to apex
Option B: Use www subdomain (www.example.com)
  • Add www.example.com as custom domain
  • Add example.com with redirect to www
The project’s site URL is set to https://lewiskori.com (apex domain). Update this in astro.config.mjs if using a different structure.

​
Option 2: External Domain

If you prefer to keep your domain with your current registrar:
1

Add Custom Domain in Pages

  1. Navigate to Pages > Your project > Custom domains
  2. Click Set up a custom domain
  3. Enter your domain name
  4. Cloudflare will provide CNAME target
2

Add CNAME Record

At your domain registrar’s DNS settings:
TypeNameTarget
CNAME@ or www[project-name].pages.dev
Some registrars don’t support CNAME records for apex domains (@). In this case, use www subdomain or consider moving DNS to Cloudflare.
3

Wait for DNS Propagation

DNS changes typically propagate within:
  • 15 minutes to 1 hour: Most changes
  • Up to 24-48 hours: Maximum wait time
Check status with:
dig yourdomain.com
4

Verify SSL Certificate

Once DNS is active, Cloudflare automatically provisions an SSL certificate. This usually takes 1-2 minutes.Your site will be available at https://yourdomain.com with full SSL encryption.

​
DNS Configuration Details

For a complete setup with apex and www:
TypeNameTargetProxy Status
CNAME@[project-name].pages.devProxied (orange cloud)
CNAMEwww[project-name].pages.devProxied (orange cloud)
Cloudflare automatically handles these when you add a custom domain to Pages.

​
Additional Subdomains

To add subdomains (e.g., blog.example.com):
  1. In Cloudflare Pages, add the subdomain as a custom domain
  2. Cloudflare creates the necessary DNS record automatically
  3. SSL certificate covers the subdomain

​
SSL/TLS Configuration

Cloudflare Pages automatically provides:
  • Free SSL Certificate: Universal SSL for your custom domain
  • Automatic Renewal: Certificates renew automatically before expiration
  • TLS 1.3 Support: Modern encryption protocols
  • HTTP/2 and HTTP/3: Fast, efficient protocols enabled by default

​
SSL Settings

1

Verify SSL Mode

In Cloudflare Dashboard:
  1. Go to SSL/TLS > Overview
  2. Ensure mode is set to Full or Full (strict)
Cloudflare Pages uses edge certificates, so Full (strict) mode works seamlessly.
2

Enable Always Use HTTPS

Force all traffic to HTTPS:
  1. Navigate to SSL/TLS > Edge Certificates
  2. Enable Always Use HTTPS
  3. All HTTP requests will redirect to HTTPS automatically
3

Enable HSTS (Optional)

For enhanced security:
  1. Go to SSL/TLS > Edge Certificates
  2. Enable HTTP Strict Transport Security (HSTS)
  3. Configure max-age (recommended: 6 months)
HSTS is a commitment to HTTPS only. Ensure your site works perfectly on HTTPS before enabling, as it cannot be easily undone in browsers.

​
Updating Site Configuration

After connecting your custom domain, update the Astro configuration:
1

Update astro.config.mjs

Change the SITE_URL constant to your custom domain:
const SITE_URL = 'https://yourdomain.com';

export default defineConfig({
  site: SITE_URL,
  // ...
});
2

Rebuild and Deploy

Commit and push your changes:
git add astro.config.mjs
git commit -m "Update site URL to custom domain"
git push
Cloudflare Pages will automatically rebuild with the new configuration.
3

Verify Sitemap and SEO

After deployment, check:
  • https://yourdomain.com/sitemap-index.xml - Should use your custom domain
  • Page canonical URLs - Should reference custom domain
  • Open Graph tags - Should use custom domain for images and URLs
The sitemap configuration in astro.config.mjs:64-106 automatically uses the site value for generating URLs.

​
Domain Management

​
Multiple Domains

You can add multiple custom domains to one project:
  • Production domain: Main domain (e.g., lewiskori.com)
  • Alternate domains: Additional domains that redirect to main
  • Localized domains: Country-specific domains (e.g., lewiskori.co.uk)
All domains get automatic SSL and can be configured to redirect to your primary domain.

​
Domain Redirects

Set up redirects in Cloudflare:
  1. Bulk Redirects: Redirect multiple patterns at once
  2. Page Rules: Create custom redirect rules (3 rules on free plan)
  3. Transform Rules: Modern way to handle redirects
Example: Redirect www to apex domain automatically with Cloudflare’s redirect rules.

​
Troubleshooting

​
Domain Not Working

1

Check DNS Propagation

Use DNS Checker to verify your domain resolves globally:
dig yourdomain.com
2

Verify CNAME Target

Ensure CNAME points to correct target:
  • Should be [project-name].pages.dev
  • Check in Cloudflare Pages dashboard for exact value
3

Check Custom Domain Status

In Cloudflare Pages > Custom domains:
  • Domain should show “Active” status
  • SSL certificate should show “Active”

​
SSL Certificate Issues

  • Certificate Pending: Wait 1-2 minutes for provisioning
  • Certificate Error: Verify DNS is pointing to Cloudflare
  • Mixed Content: Ensure all assets load over HTTPS

​
Redirect Loops

If you experience infinite redirects:
  1. Check SSL/TLS mode is Full or Full (strict)
  2. Disable “Always Use HTTPS” temporarily to test
  3. Clear browser cache and cookies
  4. Check for conflicting redirect rules

​
Performance Optimization

With your custom domain on Cloudflare:
  • Global CDN: Content cached at 300+ locations worldwide
  • HTTP/3: Enabled automatically for improved performance
  • Brotli Compression: Automatic compression for faster loading
  • Smart Routing: Argo Smart Routing for optimal paths (paid feature)
Your Astro portfolio is already optimized with static assets in dist/, which are automatically cached by Cloudflare’s CDN.

​
Next Steps

Environment Variables

Configure API keys for your custom domain

Cloudflare Pages

Learn more about Cloudflare Pages deployment

Build docs developers (and LLMs) love

Get started for freeTalk to us