Getting Started with Cloudflare Pages, Google domains and Gmail

Julian Jurai — Wed, 12 May 2021 14:24:16 +0000

Last updated: May 12th 2021

What's Covered

This post will walk you through how to:

Deploy a static site to Cloudflare pages
Setup a custom domain using Google D omains for your static site
Send and receive emails using your custom domain

Problem using Cloudflare Pages and Google Domains

Most domain registrars (such as Google Domains) offer email forwarding services out of the box.

The problem encountered was that in order to use a custom domain for a site deployed to Cloudflare Pages you're required to switch nameservers. You have to use Cloudflare's nameservers as opposed to the domain registrar's nameservers. This breaks some domain level settings including email forwarding configurations when using Google Domains.

Let's get into it

1. Deploy a static site to Cloudflare pages

I'm going to assume you already have a repo with a static site. If not fork this repository. It's some barebones HTML.

You'll need to sign up for Cloudflare pages then connect your Github account.

Select Start Project, select the repository you which to build and deploy. Continue along the setup then you'll see your app getting deployed and finally success message.

You should now have something that resembles:

2. Setup a custom domain using Google Domains

Picking up from the last step the Visit Link link takes you to a url that looks like simple-static-site.pages.dev. Note the page.dev domain name. We're going to change that in this step to use your custom domain.

I'm going to assume you already have a custom domain if not get one at Google Domains.

Select the site you deployed from the Cloudflare Pages dashboard and go to Custom Domains then Set up a Custom Domain. Enter the you custom domain as it appears on your domain registrar's site (e.g. oldgrandpappy.com).

This should prompt you to Begin DNS transfer. Continue by clicking the big blue button.

You'll get redirected and you may have to resubmit the domain name and choose a plan. Select the Free Tier plan at the bottom and hit continue.

Complete the setup steps and you'll reach a point where its asking you to Replace with Cloudflare's nameservers. Let's do that now.

Head over to Google Domains DNS settings and set the custom name servers. There should be at least two provided by Cloudflare. It should like the image below when added.

Once the domain name servers are replaced with Cloudflare's name server's it will probably take a while before it registers. In my experience it happens within 5 minutes though it could be longer.

Once its completed you should see an indication of the change under the DNS settings in Cloudflare dashboard.

Head on back to the deployed Page from the Cloudflare Pages dashboard and click on Custom Domains once more. Enter your custom domain. You should see your custom domain appear with a prompt to Activate Domain. This would insert the appropriate CNAME record for your root domain.

Give it about 10 minutes then you should see in the Custom Domains section an indication that you domain is active.

You should be able access your static site using the custom domain at this point.

3. Send and receive emails using your custom domain

We'll be using Improvmx.com as our email forwarding service.

Go to Improvmx.com and setup your alias. Notice I added an alias with a username below (the hey in hey@oldgrandpappy.com).

Next, go to DNS Settings and add the MX and TXT records to Cloudflare's DNS Settings.

It should look similar to this when you're done.

At this point you should be able to receive emails sent to your alias.

To be able to send emails from the alias we'll need to set up our SMTP Credentials. Improvmx.com offers a really easy way to do this but it requires payment.

We can also do this with Gmail for free!

To use Gmail, we'll first need to make a modification to your Google accounts security policy. There are two routes you can take. Either allowing access to less secure apps or using an App Password.

Once you update the security policy go to Gmail:
Settings -> Accounts and Imports -> Send mail as -> Add another email address

Enter the alias you'd like to use to send emails from. Ensure "treat as alias" is unchecked.

Hit next and enter the SMTP credentials for you gmail account. This will be your email and password for gmail. If app password security is used, the generated password should be used instead of your password. Ensure the SMTP Server is set to smtp.gmail.com.

You'll receive an email with a confirmation code to enter. Enter the code and thats it!

You should now be able to select a From alias when sending an email.

Thats it!

Hope this was helpful.

Also oldgrandpappy.com is back on the market.