Article Image
Article Image

A random background story

I asked a dear friend of mine to make her a website. When I was showing here my personal website, I learned that my Github pages is broken - a rather typical problem. Production issues, anyone? How to mitigate that is a story for another day. Let’s focus on the task at hand.

To that dear friend - I’m making this tutorial as a gift to you.

What’s behind this?

Can you get a website cheaper than 12 dollars a year? The answer is Github Pages + Google Domains.

I trust that you can follow tutorials, and generally DRY is better than not. I’ll only outline the isn’t so obvioius steps.

  1. Folow this tutorial, and create a repository
  2. You should have
  3. Pick a Jekyll template, following their tutorial and move the code to your github pages repo. Start small your friend, don’t make a ton of changes here yet.
  4. Deploy your Github pages for free with Github Actions. You’ll see changes you push to your repo will be reflected to your github pages after a couple minutes.
  5. Follow Github Custom Domain tutorial:

You’ll want your settings to look something like

Github Pages Settings page

You’ll also want a CNAME file such as

CNAME file in github pages repo

  1. Go to your Google domains, set up your DNS mapping
Host name, Type, TTL, Data
<your-website>.com, A, 3600,
www, CNAME, 3600, <ghpages-repo>

You’ll want to see something like this

Google Domain Config

Where the heck is the magical from? I’m glad you ask. It’s the result of digging your github pages

$ dig <ghpages-repo> +nostats +nocomments +nocmd

; <<>> DiG .... <<>> <ghpages-repo> +nostats +nocomments +nocmd
;; global options: +cmd
;<ghpages-repo>		IN	A
<ghpages-repo>	3600	IN	A
<ghpages-repo>	3600	IN	A
<ghpages-repo>	3600	IN	A
<ghpages-repo>	3600	IN	A
  1. Go back to your github pages settings page, type in your new domain and check Enforce HTTPS
  2. After configuring all of that, you’ll want to double check your configuration
$ dig www.<customdomain>.com +nostats +nocomments +nocmd

; <<>> DiG .... <<>> www.<customdomain>.com +nostats +nocomments +nocmd
;; global options: +cmd
;www.<customdomain>.com.		IN	A
www.<customdomain>.com.	3600	IN	CNAME	<ghpages-repo>
<ghpages-repo>	3600	IN	A
<ghpages-repo>	3600	IN	A
<ghpages-repo>	3600	IN	A
<ghpages-repo>	3600	IN	A

That’s it. Congrats! You can now play with your brand new personal website and iteratively tweaking it.

Blog Logo

An Nguyen



An Nguyen

Random Thoughts on Random Topics

Back to Overview