Custom Domain Tutorial for Github Pages

Custom Domain Tutorial for Github Pages

Use your domain to replace the original github.io address

About Github Pages

Github Pages is a free static page hosting service provided by Github. All Github Free accounts can use it directly for Public Repos, while Private Repos require a paid upgrade of the Github account.

ZhgChgLi ZhgChgLi iOS Developer eager for knowledge, learning through teaching, loves movies/TV shows/Western music/sports/life zhgchg.li

• My Jekyll Blog deployed using Github Pages.

Limitations

• Can only host static file resources: HTML, CSS, JavaScript, font files, image files, PDFs, audio files, text files, etc.
• Website (Repo) size limit: 1 GB This seems to be a soft limit, as my Github Pages Jekyll Repo is almost 5 GB.
• Longest deployment time: 10 minutes
• Maximum deployments per hour: 10 times (soft limit)
• Monthly traffic limit: 100 GB (soft limit)
• Excessive requests may result in an HTTP 429 response

⭐️⭐️⭐️If you only want to learn about customizing domains for Github Pages, please continue reading below.

Github Pages Tutorial, creating a personal website with ChatGPT without programming knowledge

Illustrated for beginners and non-Git users.

1. Register, log in to Github: https://github.com/

• After logging in to Github, select the top right corner “＋” -> “New repository”

2. Enter Repo name, settings

• Repository name: enter youraccount.github.io
• Public: Public project
• Add a README file: Convenient for creating and directly using Github Web to add files after setup
• Create repository

For the Repository name, each account or organization can only create one main Github Pages Repo named youraccount.github.io. Other Repos wishing to deploy to Github Pages will have the address youraccount.github.io/RepoName, for example:

• youraccount/youraccount.github.io Repo -> youraccount.github.io
• youraccount/mywebdemo Repo -> youraccount.github.io/mywebdemo

If it is not the main Github Pages Repo youraccount.github.io, you need to go to Settings to enable GitHub Pages:

For example, if my Repo zhgchgli0718/testgithubpage also wants a Github Pages page.

• Settings -> Pages -> Branch -> Choose main/root -> Save
• Done

3. Create your homepage .html file

• Click on the green “Code” button at the top right of the Repo homepage.
• Select “+ Create new file”

4. Use ChatGPT to help you generate the page .html file

• Use a simple prompt: Generate a cyberpunk-themed welcome page (.html)

5. Paste the .html back to Github Repo File

• File name: enter index.html
• Edit: Paste the generated .html content from ChatGPT, you can adjust the html you want using ChatGPT or edit the HTML content here directly.
• Click on “Commit changes…”

• Select “Commit directly to the main branch”

---

Upload resource files (e.g., images):

• Click on “Add file” and select “Upload files”

• Drag and drop or select files, wait for the upload to complete
• Click on “Commit changes”
• Done

6. Wait for deployment

As mentioned earlier, Github Pages requires deployment, it won’t appear just by saving; you can check the deployment progress by clicking on “Actions” at the top of the Repo until the orange light 🟠 turns into a green checkmark ✅ indicating deployment is complete.

7. View the results

https://zhgchgli0718.github.io/

• Visit: https://youraccount.github.io to view the results

Github Pages Custom Domain Tutorial

Now, the main point of this article, Github Page custom domain. As mentioned earlier, by default, we can only use youraccount.github.io as your static website main domain; for other Repos, you can only access them through /path, without the ability to create a second *.github.io.

But the kind thing about Github Pages is that it offers custom domain functionality.

⭐️⭐️⭐️ The purchased domain can also be used for: Medium custom domain feature.

For example, my domains:

1. https://zhgchg.li -> Used for Github Pages Jekyll Blog

2. https://blog.zhgchg.li -> Used for my Medium page

1. Purchase & Obtain a Domain by Namecheap (A well-known domain provider)

First, go to the Namecheap homepage to search for your desired domain:

Get the search results:

The button on the right says “Add To Cart,” indicating that the domain is available for registration and can be added to the cart for purchase.

If the button on the right displays “Make offer” or “Taken,” it means the domain has been registered. Please choose a different suffix or change the domain:

After adding to the shopping cart, click “Checkout” below:

Proceed to the order confirmation page:

• Domain Registration: Here you can choose AUTO-RENEW for automatic renewal each year, or you can change to purchase for a specific number of years.
• WhoisGuard: Since domain information can be publicly accessed by anyone (registration date, expiration date, registrant, contact information); this feature allows you to display Namecheap as the registrant and contact information instead of showing your personal details directly, which can help prevent spam messages. (This feature may incur charges for some suffixes, so use it if it’s free!)

Extracting some whois information results for google.com, you can check here.

• PremiumDNS: We know a domain is like an address, meaning when you see an address, you look for its location; this feature provides a more stable and secure “location lookup” function. I think it’s unnecessary unless it’s for high-traffic e-commerce websites where no errors can be tolerated.

After entering credit card information, click “Confirm Order”:

Then your purchase is successful!

You will receive an order summary email.

2. Domain Settings by Namecheap

Go to Account -> Dashboard:

Find the domain you want to set up -> Click “Manage” on the right:

Confirm Domain -> NAMESERVERS -> Choose “Namecheap BasicDNS”:

Switch to “Advanced DNS” -> Add A Record:

• Click “ADD NEW RECORD”
• Select “A Record” for Type
• Enter “@” for Host
• Enter the following for Value:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Four records.

• Click “✔️” to save each entry.
• Done.

3. Add CNAME Record according to the desired Github Pages Repo:

• Click “ADD NEW RECORD”
• Select “CNAME Record” for Type
• Enter the desired subdomain for Host, or enter “www” for a top-level domain
• Enter Value: youraccount.github.io

4. Return to Github Repo settings

• Github Repo -> Settings -> Pages
• Custom domain: Enter your domain (you can omit www. if applicable)

• Click Save

• You can check the option to force the use of HTTPS to increase security.

Waiting for DNS Check…

Usually confirmed within five minutes, but according to the DNS mechanism, it may take up to 72 hours for the settings to take effect. If you are sure the steps are correct but the confirmation keeps failing, you might want to try again in a few days.

Setup successful!

Go to your domain verification result:

Success! 🎉🎉🎉 Now we don’t need to use the old https://youraccount.github.io to access your Github Pages, you can directly use https://yourdomain to access it!

Other Repo’s Github Pages can also be accessed through https://yourdomain/RepoName.

Other Articles

Custom Domain for Medium

Custom Domain for Medium

Painless Migration from Medium to Github Pages

Painless Migration from Medium to Github Pages

If you have any questions or suggestions, feel free to contact me.

===

本文中文版本

===

This article was first published in Traditional Chinese on Medium ➡️ View Here