Fourth Step Step
Connect the Website to Your Domain
This is where we are going to dig into some technical settings a bit more. It's a necessary foundational step, and will help you understand what is happening inside your website.
Currently, you have a completely empty phonebook page at yourname.biz. We need to start filling those pages up with traffic rules that send your website visitors to your content. We are going to leave www.yourname.biz and the naked yourname.biz empty, except for instructions to forward along to your landing page at somethingclever.yourname.biz.
You might have noticed that I made a recent change, to when you first browse to the naked domain, Werk.Baby, you get an age challenge, then forwarded to Training.Werk.Baby. That age verification page is a tiny bit outside of the scope of this training, BUT, it is using the same forwarding service to send everything from Werk.Baby and www.Werk.Baby to Training.Werk.Baby. We're actually going to let short.io take over the handling of doing all of that forwarding. To make it work more seamlessly, and allow you to make quick changes from a simple interface.
Why are we doing this you ask? We are actually using a relatively SIMPLE fix, to an age old internet problem. As far as that internet address book is concerned, Werk.Baby and www.Werk.Baby are the same thing. But they are not. It thinks they are, and things get confused. The actual "place" where we want to put your website gets a bit confusing. So we are going to just say fvck it and forward ALL that traffic to a new subdomain.
Think of when you go to a big company website, it is quite ferequent, that after selecting your region, you get forwarded to app.widget.company or shop.widget.company or something like that. This problem is one of the reasons why. This will also help you practice organizing your website into subdomains.
Not all sites do this. But we're trying to make this easy and rock solid. So go with the flow.
So right now, you need to think of a main subdomain to route your clients to. Make it cute. Make it creative. My suggestion will not be nearly as good as your own ideas when it comes to this kinda stuff. After you have that idea in your head, head over to your Cloudflare dashboard. I thought that Entrer.Domme.Boutique, I.Ruin.Homes and The.Domination.Foundation were clever.
Cloudflare should have taken over control of your DNS settings within an hour at the most, and sent you an email.
To confirm, browse to your dashboard in Cloudflare and look for the "✓ Active" tag. If it is still Pending Nameserver update, you will need to wait.
I'm using Cash.Coffee in this example, because the DNS records are completely empty, as you see above. Yours should be empty too, unless you didn't follow instructions and you selected the "automatic" instead of "advanced" option, and it pulled in some garbage settings from Namecheap. That's ok, as we're just going to delete it. Or google sites and short.io are going to delete it, rather.
We are now going to create a "CNAME Record" or canonical name record. They are the index portion of your internet phonebook that tells everyone what to do when they come to your domain and then further browse to a subdomain, like cleverlandingpage.yourname.biz. At each place on your website that you have a subdomain, like VIP.yourname.biz, shop.yourname.biz, Links.yourname.biz, will have a CNAME record to tell people's web browsers where to get the date.
For our web "pages", like the one you are reading right now, we are doing the "hosting" through google sites. The content is not actually being delivered by your website. People browse to yourname.biz or www.yourname.biz, the instructions there tell them to land on cleverlandingpage.yourname.biz, which is actually hosting content over at ghs.googlehosted.com.
This google address is actually an all-purpose address that you will use any time you attach a google service to a subdomain, like google sites or blogger. After we add this record, we are also going to have to go back to google to tell them what content to serve there.
When creating the new CNAME record for the subdomain cleverlandingpage, make sure to turn the "Proxy status" setting to OFF before saving. This is an important step. You will do this almost any time that you add a new app to your website like this. We will turn it back on later. I'll explain then. In the meantime, just know, that during setup time, you want ALL of those proxy status buttons set to off.
Save the record and go back to your new page in google sites.
Make Changes in Google Sites
Find the hidden navigation settings cog at the top left corner of your landing page. We're going to change a few other settings while we are here.
The first setting that we're going to tweak is the favicon. This is the little logo that shows up in the top of your web browser. Right now, yours is the unpleasant looking google sites logo. You can change that to anything that you want by uploading it here.
Creating favicons used to be a whole problem. But google sites has a good automatic converter built in. As long as the file you use is a SQUARE image and relatively small, it should work. If all else fails, just make something simple in google docs and take a screenshot and upload that screenshot.
The logo function adds a logo to the top left corner of the page. I have not found it useful, but you might.
The next thing is google analytics. If you already have an account, or you want to get some extra credit points by working ahead, add a "new property" in your google analytics account for this new website, and get the measurement ID that starts with G- and paste it here. If not, we will do this later.
The last thing is the custom domains. This is where we need to make changes. Note that I've already got this training page mapped to four different addresses. I'm going to add one for doing this example. I'm going map it to Hot.Cash.Coffee, but you will be mapping yours to somethingclever.yourname.biz.
This is where Cloudflare is going to work really slick and take care of the hardest part of this process for us.
Before google will agree to host your page at your new domain, you need to prove ownership. You do that by adding a public "key" to your domain records, in the form of a basic text file. This would normally involve copying and pasting into your DNS records in Cloudflare, with a tiny mistake meaning it won't work. But in this case, it will happen automatically.
Simply try adding the subdomain. You will get an error. Click on verify ownership.
There two important things you need to do at this point:
Look to the top right of the screen and confirm that you are logged into the correct account.
Edit the domain so that it just shows yourname.biz. We don't want to authenticate just cleverlandingpage.yourname.biz, we want to authenticate your whole domain, so we won't have to do it again. This works across google services, so you will already be set up for blogger, too .
Google is preparing to send you to Cloudflare. Click, "START VERIFICATION."
The image above was taken from in my cloudflare account where I was just redirected. (It shows yet another domain, Dad.Repair. Sorry, I didn't catch the Cash.Coffee screenshot in time.) But the concept is the same. It's just publishing a public key to prove ownership.
It should verify rather quickly. Read that warning. Don't remove that record. Cloudflare will always warn you before doing that.
Now go back to add the custom domain and you should get a blue checkmark. Click next.
We've already completed this step, so we don't need to do anything. This change will take anywhere from 2 hours to 2 days to take effect. It will be the longest of the waits so far.
Before we move on away from google sites, we need to make sure that the actual webpage is publicly shared in google docs. You won't be able to tell from this browser window you're reading from, because your are logged INTO an account with access. But the default for new websites is private. Sharing in google sites works the same as in all of their other docs features. But it gets a bit confusing to wrap your head around when it involves custom domain names.
Go to the top right of your google sites page, and select sharing settings.
Make sure that the "Published site" setting is set to "Public." This is an easy step to miss. Every time you create a site in google sites it defaults to Restricted and won't display on the world wide web until this is checked.
After all these changes go into effect, you will have a page at cleverlandingpage.yourname.biz, but you still have nothing at yourname.biz and www.yourname.biz. Instead of putting a website in those spots, we're going to use an app called short.io to handle that traffic for us.
Handle Naked Domain Forwarding
Create a free account, the add a domain.
Select the "ADD MY OWN DOMAIN" option on the bottom right, and enter your naked domain yourname.biz WITHOUT the www. I am using cash.coffee in these example screenshots, because it is not currently set up.
This is where that connection to Cloudflare is going to come in handy. Short.io and Cloudflare will simplify this process, although there are still a few steps to complete.
You'll be forwarded to Cloudflare to confirm the changes to your DNS settings. Note that Short.io asked to have your records addedd with the initial proxy state set to OFF.
Remember, when adding new services, we will always start with the proxy setting turned OFF, then we will turn it on later after the connection has stabilized, and we want to enable the additional security features.
Now when you go back to short.io and refresh your screen, that error with the orange CONFIGURE button should disappear. Do this same step with both domains you bought, if you bought two.
We are going to add another (sub)domain in short.io for sharing QR code links. This is a totally optional step, but doing this will help you understand what is happening, and what this service is doing.
Go back to short.io and add a new domain, this time QR.yourname.biz. Look at the website records that short.io is pushing to Cloudflare. They are DIFFERENT. They are just a simple single CNAME record like we used to connect our subdomain cleverlandingpage.yourname.biz to google sites.
That's because your naked domain requires special settings. Those two separate "A" records. Sounds complicated, right? It is, that's why we are letting short.io handle that part for us.
Review Settings in Cloudflare
In your Cloudflare dashboard, browse to your DNS settings. They should look similar to this:
You should have two "A" records that point your naked domain to the two numerical server addresses that short.io gave you.
You should have two "CNAME" records, one for your landing page that points to google sites. And one for your QR code page that points to short.io.
You will also have a TXT record that is used by google search console to make sure you own the domain.
We are going to add ONE MORE. We are going to allow short.io to handle the www subdomain as well.
Enter a new CNAME record in Cloudflare, with the Name "www" and the target "cname.short.io" Make sure that the Proxy status is set to off.
Go back to short.io and your naked yourname.biz domain and click on "Domain settings."
You want to enter your landing page address https://cleverlandingpage.yourname.biz/ into two different spots. First in the "Nonexistent short links redirect," and by clicking the "CONFIGURE" button next to "Main page redirect."
Refresh the page, and you are done here.
Now, when you type yourname.biz or www.yourname.biz or yourname.biz/anytypo, it will magically forward to cleverlandingpage.yourname.biz. The landing page may still not be up yet, but we are done with the settings. Your website is now fully connected to the world wide web.