How to configure basic email settings with Ghost and Gmail while utilizing a custom DNS in Cloudflare
I wanted to utilize a free email service while reducing the amount of email management required, while also using my preferred email platform. In this guide, I'll demonstrate how to set up basic email functionality in Ghost CMS to allow users to subscribe to your website. The configuration involves three parts, which are outlined below:
- Ghost config - To configure the settings for email
- Cloudflare DNS - This is to take advantage of email routing. Essentially, you are able to create custom email addresses for your domain and which can then be routed to your Gmail account
- Gmail configuration - Make it seem like you're sending an email from a custom domain
Part 1 - Configure Cloudflare email routing
For this part, I would assume you have a domain registered through Cloudflare. I put this step first as the email routing could take some time for DNS to update ( Mine took a couple of hours)
- Log into the dashboard, select Websites and then your website
2. Navigate to the Email Routing section under email and click Routes
3. From here, select Create address and create a custom address for your domain and the destination email address. Once complete, save it.
These changes will take some time to replicate. To test whether the routing is working, send an email to the custom address.
e.g.
You will know once it's working when you get the email in your destination email address
The error below just shows that DNS has not been replicated for your email yet.
Note: I forgot to take a screenshot of the other prompt which will ask you to add the required DNS records once you have added your custom DNS. It will add the records as shown below.
4. You will also need to add an additional SPF record in your DNS so you are able to send outbound emails in Gmail. Navigate to DNS on Cloudflare and amend the TXT record by adding the following:
v=spf1 include:_spf.mx.cloudflare.net include:_spf.google.com ~all
Part 2 - Configure Gmail Settings
5. In this step, you will turn on 2-Step Verification in order to utilize app passwords. Navigate to Security (google.com) under security to set this up
6. Once 2-Step Verification is set up, navigate to App Passwords. This is the password you'll be using in your ghost CMS config
Official Link: Sign in with App Passwords - Google Account Help
Once you're on the page, select Other in the combo box, choose a name and click Generate
You will get a prompt with your password. Copy it and store it somewhere safe. Note: You only get one chance to view this password
7. Now navigate to your gmail account, select the Config Wheel and select See all settings. This is where we configure to send email as another domain
8. Check the option "Always reply from default address". Doing this will mean that any email that is sent from your Gmail address will appear as the email account you set it to. I've done it in this case so when users subscribe to your website, it will come from [email protected]
e.g. This is what it the email will appear to users if you don't check the box.
9. Select" Add another email address". This will open a small window. Choose the desired email address you set up in Cloudflare. In this example, I will use the below email I set up already. Click Next Step to continue
10. In this next part, you will change the SMTP Server since Cloudflare cannot send outbound emails. You will use the SMTP server from Gmail. Enter in your Gmail account and the app password from the previous steps and then Add Account
11. And done, you have successfully added another email to your Gmail account
12. You will get an email to verify the address as shown below. This may land in Spam, so be sure to check there as well
Note: You may get this message after Adding an account. Simply go back into settings and try again
13. To test whether this it's working. Simply try to send an email in Gmail. It will now show the email address that you've just added.
Part 3 - Configure Ghost CMS settings
14. Navigate to where you installed your Ghost instance and find config.production.json file. Open the file using an editor. In my example, I'll use the nano editor.
nano config.production.json
15. Add this mail block config in the file. Ensure you have the indentation correct or else it will fail.
"mail": {
"from": "[email protected]",
"service": "Gmail",
"transport": "SMTP",
"options": {
"host": "smtp.gmail.com",
"port": 587,
"auth": {
"user": "[email protected]",
"pass": "thisismypassword"
}
}
},
16. Restart CMS Server for changes to take effect
ghost restart
17. Test whether you can subscribe on your website. This can be done by trying out the Sign-up/Subscribe button on your website
And we are done! You have now successfully setup email on your Ghost instance
Troubleshooting
You may encounter issues during the setup as I did. Run through the steps again and ensure you haven't missed anything
You can troubleshoot further by using the CLI command "ghost log". This will show information about the log
Found this article useful? Why not buy Phi a coffee to show your appreciation.