Setting up a GitHub Pages site with a custom domain name is relatively easy and comes with extensive documentation. On the other hand, setting up two (or more) GitHub side sites within the same GitHub account has no documentation and can be confusing. It’s actually quite simple, as this step-by-step guide will show you.
- Background
- The problem
- The solution
- Step 1: Enable GitHub Pages
- Step 2: Navigate to Domain Settings
- Step 3: Open DNS Settings
- Step 4: Set DNS records
- Very Important Notes
- Step 5: Tell GitHub about the domain
- Step 6: Wait
- Step 7: Enable HTTPS
Background
GitHub Pages is a great way to host a static website for free for any GitHub repository create can have a corresponding website with a special URL.
Reading: How to create a 2nd page in github website
Assuming your GitHub username is “daattali”. If you create a repository with the special name daattali.github.io, GitHub Pages will generate your website for that repository at http://daattali.github.io. This is called a user site because any GitHub user can have such a repository with their username. Any other repository you create, such as “MyCoolProject”, is available at http://daattali.github.io/MyCoolProject. These are called project pages because each project (repository) you create can have a website with that URL.
If you want to use your own custom URL, you can purchase a domain name (I use Namecheap and pay around $100). . $10/year) and follow the GitHub documentation to connect your custom domain to your GitHub Pages site.
The problem
Since 2015, I’ve been hosting my personal website on the GitHub Repository “daattali.github.io” which means the URL for my website is https://daattali.github.io. I bought the domain name “deanattali.com” from Namecheap and connected it to my repository, so my website is now also accessible via https://deanattali.com. This is my user site.
I also have several projects on GitHub that have their own GitHub side websites. For example, my project shinejs has a project site, and according to the GitHub page URL rules, it is accessible at daattali.github.io/shinyjs. Since I have a custom domain for daattali.github.io, the shinyjs website is also available at deanattali.com/shinyjs. Likewise, every other GitHub repository I create has its project site at deanattali.com/After refreshing the page, you should see a green success banner telling you that this repository has now been published to http://deanattali.com/MyCoolProject.
Step 2: Navigate to Domain Settings
See also: Resume Objective Statements: Examples, How-To, and FAQ
Report Log into Namecheap and find the page that lists all your domains (the page that looks like the screenshot below). Click the Manage button next to the line that corresponds to the domain you want to use.
Step 3: Open DNS settings
Once you are on the settings page for the domain, go to the Advanced DNS tab, where you will be able to change DNS settings. DNS stands for “Domain Name System” and, to put it simply, binds your website to a specific URL.
Step 4: Specify DNS Records
In the Host Records section, you will see a few lines pre-filled. Delete any records that already exist and add the following 5 records:
- “A record” with host “@” and value “185.199.108.153”
- “A record” with host “@” and value “185.199.109.153”
- “A record” with host “@” and value “185.199.110.153”
- “A record” with host “@” and value “185.199.111.153”
- “CNAME record” with host “www” and value “daattali.github.io.”
Very important notes
- Be sure to click the green ticks to save the new records and refresh the page to ensure all 5 records have been saved
- The CNAME record should use your username instead of “daattali”
- Note that the CNAME record has a period at the end
- Most importantly, and this confused me: You may find that these are the exact same DNS records as used earlier with your user site. This was confusing for me because I expected the CNAME to be something like “daattali.github.io./MyCoolProject” but that’s wrong!
Step 5: GitHub over inform the domain
Having set the DNS records in Namecheap, it’s now time to inform GitHub of the URL. Go back to the GitHub Pages section of your repository’s settings and enter your domain under Custom Domain. Don’t forget to click the Save button!
See also: Beginners Guide to Drupal (How to Build a Website)
Step 6: Wait
If you’re in COVID lockdown, go for a walk or have a zoom date.
The banner with the website URL at the top of the GitHub Pages panel should now reflect the new domain, but it may take a few hours for these changes to take effect. Don’t panic if your new URL doesn’t work right away, it really can take a few hours!
Step 7: Enable HTTPS
Once your new domain is working, the final step is to ensure that your website is securely served over HTTPS instead of HTTP , so just tick the “Enforce HTTPS” box.
Refresh the page and the URL should show “https”. You’re done!
See also: How to Start a Blog on Facebook [Including 19 Post Ideas People Love]
.
