Domain Names

Buying the Name

Now it’s time to secure a domain name for our website. Consider the name you would like to use for your site and search for it using a DNS (domain name system) registrar like: name.com, Google Domains, iwantmyname. (I will be using name.com for demonstration) Depending on the TLD (top-level domain—.com, .net, .org, etc), most domain names are fairly cheap and usually only ask for a yearly fee. Because we’ll be using github pages to host our websites we won’t need to pay for monthly hosting fees and server space, which is normally the case.

When you’ve found the one you like, go ahead and purchase it.

Making a new repository

Next, we’ll want to set up a new repository in github—one that’s separate from our class site—so we can apply the domain name to the final project instead of the class site.

If you need a refresher, follow the instructions on the class site tutorial. Make sure to initialize the repository as public and with a readme and turn on GitHub pages like we did before. Clone the repository to your computer using the GitHub desktop app, just like before.

Next, we’ll want to transfer any existing files from the final project folder in the class site into the newly created local repository folder for the final project. At the very least, we’ll want to add an index.html file with some visible element (ie. “Hello World”) to the folder so we can test to make sure that the domain name works!

Connecting the Name

Now that we have the name and our new repository, we’ll need to create a connection between the github pages repository and our domain name.

First, navigate to the settings panel of your github repository and scroll down to the github pages segment. Input your new domain name into the “custom domain” field.

Now, log into your DNS registrar and find the section to edit the DNS records for the domain name.

(Note that the screenshots and actions are particular to name.com and may differ based on your DNS provider)

Make sure that the type of record you are adding is an “A” record. We’ll need to add 4 different A records that point to the following IP addresses:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

You can leave the “host” section empty (in some services like NameCheap they require something in the host field, if this is the case input “@” into the host field), but in the “answer” field paste the IP address and add each one individually.

Next, we’ll make a CNAME record, with “www” in the “host” field and our domain name in the “answer” field:

This will create a redirect to our domain name if someone were to type “www.” in front of our domain name. (all this information comes from here.)

Waiting

That’s all we need to do! The last step is to wait… It may take a few minutes before the server connects the domain to the repository, so try to exercise patience.

If it still doesn’t work after a while, try opening the website using the new domain name in another browser or using another device to make sure the browser cache isn’t causing problems.