Getting Started with Cloudflare Pages, Google domains and Gmail
Tags: gmail, cloudflarepages, customdomains, googledomains
Published: 2021-05-12 14:24:16

 ---
title: Getting Started with Cloudflare Pages, Google domains and Gmail
published: true
description: How to use Cloudflare pages and Email with a custom domain. 
tags: gmail, cloudflarepages, customdomains, googledomains
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tnackvw6siklhlg469c.png
---

_Last updated: May 12th 2021_

# What's Covered
This post will walk you through how to:
1. Deploy a static site to Cloudflare pages
2. Setup a custom domain using [Google D omains](https://domains.google.com/) for your static site
3. Send and receive emails using your custom domain

# Problem using Cloudflare Pages and Google Domains
Most domain registrars (such as [Google Domains](https://domains.google.com/)) 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](https://developers.cloudflare.com/pages/getting-started#adding-a-custom-domain) 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](https://domains.google.com/).


# 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](https://github.com/Julian-Jurai/simple-static-site). It's some barebones HTML.

You'll need to [sign up](https://pages.cloudflare.com/) 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:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goubongw5khkj25l95r9.png)
 

## 2. Setup a custom domain using [Google Domains](https://domains.google.com/)

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](https://domains.google.com/). 

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).

![cf_t1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za6r1lle846jjx8tfe3u.gif)

This should prompt you to **Begin DNS transfer**. Continue by clicking the big blue button.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g16rdqy8bbzhhvr7okh9.png)
 
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](https://domains.google.com/) **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.

 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pe3vnb8fld87wiidna8c.png)
 
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.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tuxnp9aydku45z1nu04b.png)
 
  
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.

![cf_t2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbqg9wnxrqe6sgtqkzxy.gif)
 
Give it about 10 minutes then you should see in the **Custom Domains** section an indication that you domain is active. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtj29ndu2cez9vncfkji.png)

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](https://improvmx.com/) as our email forwarding service. 

Go to [Improvmx.com](https://improvmx.com/) and setup your alias. Notice I added an alias with a username below (the `hey` in `hey@oldgrandpappy.com`).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgj0m9az0q9676eeoabf.png)

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.
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l35xi44eapuvlwwcflfm.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onj558iisrk3vwks50jp.png)
 
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](https://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](https://support.google.com/accounts/answer/6010255#zippy=%2Cuse-an-app-password%2Cif-less-secure-app-access-is-off-for-your-account) or using an [App Password](https://www.google.com/landing/2step/). 

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.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zb58ajm1l485c80v74u8.png)

Hit next and enter the SMTP credentials for you gmail account. This will be your email and password for gmail. If [app password security](https://www.google.com/landing/2step/) is used, the generated password should be used instead of your password. Ensure the **SMTP Server** is set to `smtp.gmail.com`. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kom167uaw26j4ltxfudo.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsev2tlhejoctsdmc1ty.png)

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.