Photo by: Markus Spiske (original)

Starting a Blog - Part 4: Custom Domain

One of the last steps to publishing my blog is to assign my custom domain name to it. I previously acquired the domain jbowen.dev from Google Domains and want to use that for my blog. This is supported easily by Netlify and this post details how it can be set up.

Setting up a custom domain

The Netlify docs have a good overview of the process here. The process is actually fairly straightforward.

First go to Settings > Domain Management within the Netlify web UI and click ‘Add custom domain’ at the bottom of the ‘Custom domains’ panel. Enter in the desired domain. Here we will use blog.jbowen.dev to allow us to use the base domain at a later time.

Netlify will next verify whether the domain is available or not. In my case, as I previously registered it, Netlify tells me it is unavailable but I can acknowledge that I own it and Netlify will then add the domain to my site as the primary domain.

Google Domains Setup

After setting up the domain name on the Netlify side, it will show the new domain under the Custom domains block. Since the domain name has not been configured by the registrar (Google domains in this case), there is a warning message to “Check DNS configuration”. Click on this message and you will see the DNS record you will need to add. For instance:

blog CNAME grumpy-waffle-xxxxxx.netlify.com.

If you log into Google Domains and chose the correct domain, you can click on DNS tab to bring up the DNS settings for your domain. Note, these are domain level settings and allow you to define registered hosts, synthetic records and custom resource records for any host or subdomain within your defined domain.

Go to the Custom resource records box and enter the CNAME record from above and click ‘Add’. Once done Goggle will propagate the changes globally to its name servers so anyone on the internet can query for your domain.

After a few minutes you can verify by running the DNS utility, dig:

jbowen@maranello:~/blog/jbowen.dev$ dig blog.jbowen.dev

; <<>> DiG 9.11.3-1ubuntu1.8-Ubuntu <<>> blog.jbowen.dev
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 52716
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;blog.jbowen.dev.               IN      A

;; ANSWER SECTION:
blog.jbowen.dev.      3599    IN      CNAME   grumpy-waffle-xxxxxx.netlify.com.
grumpy-waffle-xxxxxx.netlify.com. 19 IN A      206.189.73.52

;; Query time: 210 msec
;; SERVER: 192.168.1.1#53(192.168.1.1)
;; WHEN: Thu Aug 22 19:49:59 PDT 2019
;; MSG SIZE  rcvd: 107

From the above you can see two things, first the host blog.jbowen.dev is pointing to the host grumpy-waffle-xxxxxx.netlify.com. Second, this hostname can be resolved to the actual IP address, 206.189.73.52. All is looking good!

Setting up SSL

The final step is to get a valid SSL/TLS certificate so that people can access https://blog.jbowen.dev with proper TLS verification. Thankfully, Netlify makes this a no-brainer as they will attempt to automatically procure a certificate from Lets Encrypt (a free certificate provider). Prior to our Google Domains setup changes, Netlify was unable to perform this operation, but once the domain is properly redirecting, Netlify retries and should have a properly set up HTTPS server and certificate at the new hostname.

Redirecting jbowen.dev

One final item of setup is to allow us to redirect https://jbowen.dev to https://blog.jbowen.dev (after all we only have so much time on earth and those five characters are too much!). Unfortunately, we cannot simply assign a CNAME record to the root domain as that is not allowed by Google. Instead, we can use Google’s web redirect option to accomplish this.

To enable web redirect, do the following:

  1. Open Google Domains and click on ‘My Domains’ to bring up your personal dashboard.

  2. In the domain list, find the domain we wish to create a redirect for and click ‘Manage’.

  3. Click ‘Website’ tab on the left column.

  4. Click ‘Edit’

  5. Enter the desired destination URL (https://blog.jbowen.dev) and then click ‘Advanced options’

  6. Ensure the following options are set:

    • Temporary redirect: On
    • Forward path: On
    • SSL: On

  7. Click ‘Forward’ to complete the configuration.

Google Domains may take several minutes to propagate the changes (which will include generating SSL certificates for the root domain) but within 5 minutes you should be able to point your browser to you root domain and see your blog.

Where Next?

I hope this overview proves useful in seeing some of the details in setting up a blog using Hugo and Netlify. Obviously, I have only scraped the surface of all the features available in Hugo and Netlify. Some possible future topics I hope to cover include:

Using Go Flags in Tests Starting a Blog - Part 3: Deploying