If you’ve never tried Cloudflare static site hosting, Cloudflare Pages is great for speed and worldwide distribution. One hiccup I encountered because of the way the DNS was setup in Cloudflare when using a custom domain. If you want to include the www prefix, it won’t resolve properly by default and you will see a page error.
The problem is Cloudflare just gives an instruction to add a CNAME record with ‘www’ and content to your Cloudflare Pages URL it provided you. Once done, it would still give you another warning like the following:
A few more steps are required to complete your setup.
Add an A, AAAA, or CNAME record for your root domain so that itnota.com will resolve.
Now, this is interesting because I was not given any other hints or IP address to create an A or AAAA record and CNAME can only be used on subdomains, including ‘www.’
I think in reality, you can ignore the warning and go ahead create a page rule anyway, but that does bug me so the other possibility is to create another CNAME with @ and the same forwarding address similar to the ‘www’.
Then you will get another warning:
Because CNAME records are not allowed at the zone apex (RFC 1034), CNAME flattening will be applied to this record.
And this point, you will still get an error message if you use naked domain to go to your page.
To solve this we need to setup a Page Rule to redirect the naked domain to the www.
Steps
-
In Cloudflare, go to your corresponding domain and on the icon menu on top of the page, select Rules and click the Create Page Rule button.
-
In Edit Page Rule screen, type in your naked domain name with forward slash and asterisk (e.g., itnota.com/*).
-
On the next line, select Forwarding URL from the first drop-down and 301 – Permanent Redirect.
-
Then in the last textbox, you want to type in the proper URL where you want to redirect the traffic to, which in this case is https://www.inota.com/$1. $1 is like a wildcard to take any strings after the last forward slash.
Your final setting should be similar to the screenshot below.
-
Don’t forget to click the Save button.
-
Once done, just make sure that the rule is active by making sure that it’s turned on (the button with green color on the right).
That’s all there is to it. This time, if you type in something like itnota.com in your browser, it will direct your browser to the proper URL and there’s no more error message.
Further Reading
How to Install Hugo on Windows 10
How to Setup Visual Studio Code for Hugo Static Site Generator
How to Deploy Hugo Static Website to IIS Using Git
