Pages Custom Domains & SSL

In this tutorial, you'll learn about Pages Custom Domains & SSL. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

This tutorial explains how to connect a custom domain to your Cloudflare Pages site and enable automatic SSL certificates through Cloudflare's edge network. Custom domains build brand trust and improve search rankings, while SSL encryption protects your visitors' data. The DodaTech blog uses a custom domain with automatic SSL renewal so the team never worries about certificate expiration.

Adding a Custom Domain

You add a custom domain in the Cloudflare Pages dashboard. Cloudflare then provides DNS records you must configure with your domain registrar.

flowchart LR
  A[Add domain in Pages dashboard] --> B[Get DNS target]
  B --> C[Configure CNAME at registrar]
  C --> D[DNS propagates]
  D --> E[SSL certificate issued]
  E --> F[Site live on custom domain]
  style E fill:#f90,color:#fff
  style F fill:#f90,color:#fff

DNS Configuration

Cloudflare Pages requires a CNAME record pointing your domain to the Pages project. If Cloudflare is your DNS provider, this is handled automatically.

// Validate DNS configuration
const dnsRecords = [
  { type: 'CNAME', name: 'example.com', value: 'my-site.pages.dev', status: 'active' },
  { type: 'TXT', name: '_cf-custom-hostname', value: 'site-id', status: 'active' }
];

function validateDns(domain, records) {
  const hasCname = records.some(function(r) {
    return r.type === 'CNAME' && r.name === domain;
  });
  return hasCname ? 'DNS configured correctly' : 'Missing CNAME record';
}

console.log(validateDns('example.com', dnsRecords));
// Expected output: DNS configured correctly

SSL Certificate Lifecycle

Cloudflare Pages automatically provisions and renews SSL certificates through Cloudflare's edge. The entire Process takes a few minutes after DNS propagation.

// Check SSL certificate status
async function checkSslStatus(domain) {
  const response = await fetch('https://' + domain);
  const certInfo = {
    issuer: response.headers.get('cf-ssl-issuer') || 'Cloudflare',
    valid: response.headers.get('cf-ssl-valid') !== 'false',
    protocol: response.headers.get('cf-ssl-protocol') || 'TLSv1.3'
  };
  return certInfo;
}

checkSslStatus('example.com').then(function(info) {
  console.log('SSL Info:', info);
  // Expected output: SSL Info: { issuer: 'Cloudflare', valid: true, protocol: 'TLSv1.3' }
});

Domain Redirects

You can configure redirects from your custom domain root to www or vice versa.

// Generate redirect rules for domain aliases
function generateRedirects(primaryDomain, aliases) {
  return aliases.map(function(alias) {
    return alias + '/* 301 https://' + primaryDomain + '/:splat';
  }).join('\n');
}

const redirects = generateRedirects('example.com', ['example.net', 'example.org']);
console.log(redirects);
// Expected output:
// example.net/* 301 https://example.com/:splat
// example.org/* 301 https://example.com/:splat

FAQ

Practice Questions

1. What DNS record type is required for a custom domain on Cloudflare Pages?
2. How does Cloudflare Pages handle SSL certificate renewal?
3. What is the purpose of the _cf-custom-hostname TXT record?

Summary

Custom domains on Cloudflare Pages give your site a professional URL with automatic SSL. Configure the DNS CNAME record, and Cloudflare handles certificate provisioning and renewal automatically.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.