How to Connect a Domain to Cloudflare and a Modern Deployment Platform

Question: What is this tutorial about?

To learn how to connect a domain name to Cloudflare and then set it up with a web hosting service or deployment platform like Netlify or Vercel.

Why go through all this stress?

Because it improves your website's security, speed, and ease of management.

• Faster Load Times
• Better Security
• Almost always available 99.99% (never a downtime)

Who is this tutorial for?

Anyone with a technical background who has purchased a domain name and is familiar with creating online accounts. If you're new to these processes, don't worry - we'll provide short descriptions and external tutorial links (here and there) to help improve your knowledge of the subject and also guide you through any unfamiliar steps.

So if you think it's worth the stress, LET'S GET STARTED!!!

Prerequisites

You should have already completed some basic steps or have the following ready:

• Domain from Namecheap: You should have already purchased a domain name from a domain registrar like Namecheap. (We'll be making use of Namecheap for this tutorial)
• Cloudflare Account: You need to have a Cloudflare account setup.
• Hosting Service Account: You should have an account with a web hosting service or deployment platform, such as Netlify or Vercel. (We'll be making use of Netlify for this tutorial)
• Basic Understanding of DNS Records: A general idea of what DNS records are and how they function.
• Access to Your Domain's DNS Settings: You should have access to the DNS settings in both Namecheap and Cloudflare.
• Web Project Ready for Deployment: A website or web project you want to deploy.

First, Go to your Cloudflare Account

• Add a New Site: Click the "Add a Site" or "Add a domain" button on your Cloudflare dashboard.
• Enter Your Domain: Input your Namecheap domain and click "Add Site."
• Select a Plan: Choose a plan that fits your needs (the free plan is usually sufficient).
• Update DNS Records: Cloudflare will scan and automatically add DNS records for your domain. Delete all the DNS records created automatically. We add ours.

Next, Update Domain Nameservers in Namecheap

• Return to your Namecheap account. Go to the "Domain List" section and select the domain you want to update.
• Click on "Manage" next to the domain.
• Under the "Nameservers" section, select "Custom DNS."
• Enter Cloudflare Nameservers: Copy the nameservers provided by Cloudflare and paste them into the fields in Namecheap.
• To find the nameservers in Cloudflare, go to DNS section > Record. 
• Scroll down to the section titled "Cloudflare Nameservers", you'll find the name servers.
• Save Changes: Click "Save" to apply the changes. It might take some time for DNS propagation.

Next, Deploy Your Web Project on Netlify

Follow this instruction to easily deploy your project to Netlify
Next, Add Your Domain to Netlify

• In your Netlify dashboard, go to the site you want to connect to your domain.
• Under Site Settings, click on Domain Management.
• Click on Add Custom Domain and enter your domain name (e.g., yourdomain.com). 
• The domain name should be the same one you connected to Cloudflare. Click Verify.

Next, Configure DNS in Cloudflare

• Go to your Cloudflare account.
• Select the domain you want to connect to Netlify from the Cloudflare dashboard.
• Go to the DNS section in Cloudflare and add the following DNS Records.

You'll need to add two main records:

1. CNAME Record for the www Subdomain

• Click on Add Record.
• Choose CNAME as the type.
• Set Name to www.
• Set Target to your Netlify subdomain (e.g., yoursite.netlify.app).
• Go to your Netlify account > Doman management > You'll find the Netlify subdomain under the Product Domains section (first row)
• Click Save.

1. A Record for the Root Domain (yourdomain.com)

• Click on Add Record.
• Choose A as the type.
• Set Name to @ or leave it blank (depending on Cloudflare's interface).
• Set IPv4 address to 75.2.60.5 and Click Save.

Next, Verify the Setup

• Wait for DNS propagation (which can take up to 48 hours, but usually quicker).
• Visit your domain (yourdomain.com or www.yourdomain.com) and ensure it points to your Netlify site.
• Check that SSL is working correctly by ensuring the site loads securely (https://).

Once you've done with the setup and everything is working fine, here's what you need to do next:

Follow this tutorial to set SSL for your custom domain:
How to enable SSL in Netlify with a custom domain

• Check SSL/TLS Settings: Since Netlify handles SSL (security certificates) for your site, make sure Cloudflare's SSL/TLS settings are set to "Full" or "Full (Strict)" to avoid conflicts. This ensures that the connection between Cloudflare and Netlify is secure.

Follow this tutorial:
Steps to Set Up Cloudflare CDN and Optimize Your Website

By following these steps, you'll ensure that Cloudflare works smoothly with Netlify and keeps your site secure and fast.

Conclusion

Once everything is set up, your Cloudflare-managed domain should point to your Netlify site, with SSL provided either by Cloudflare or Netlify, depending on your configuration.

I hope you found it useful and please ask questions if you need more clarity.