GitHub Pages Custom Domain Setup｜Replace github.io with Your Own Domain

点击这里查看本文章简体中文版本。

點擊這裡查看本文章正體中文版本。

This post was translated with AI assistance — let me know if anything sounds off!

---

Github Pages Custom Domain Tutorial

Replace the original github.io URL with your own domain name.

About Github Pages

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

ZhgChgLi
ZhgChgLi iOS Developer eager to learn, teaching and learning together, loves movies/TV shows/western music/sports/life zhgchg.li

• My Jekyll Blog Deployed with Github Pages

• Seamless Migration from Medium to Github Pages ➡️➡️➡️

Limitations

• Only static file resources can be stored: HTML, CSS, JavaScript, font files, image files, PDF, audio files, text files, etc.

• Maximum website (Repo) size: 1 GB
  This is likely a soft limit because my Github Pages Jekyll Repo is already nearly 5 GB.

• Longest Deployment Time: 10 minutes

• Maximum deployments per hour: 10 times (soft limit)

• Monthly Data Limit: 100 GB (soft limit)

• Too many requests may result in an HTTP 429 response.

⭐️⭐️⭐️If you only want to learn about Github Pages custom domain setup, please continue reading below.

Github Pages Tutorial: Build a Personal Website with ChatGPT Without Coding Skills

The following is an example for beginners with no programming or Git experience.

1. Register and Log in to Github: https://github.com/

• After logging into Github, select the “+” icon at the top right -> “New repository”

2. Enter Repo Name and Settings

• Repository name: your-username.github.io

• Public: Public project

• Add a README file: Convenient for creating and directly using GitHub Web to add files afterward

• Create repository

Each account or organization can only create one main Github Pages repo named your-username.github.io. Other repos deployed to Github Pages will have URLs like your-username.github.io/RepoName, for example:

• your-username/your-username.github.io Repo -> your-username.github.io

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

If it is not a main GitHub Pages repo named youraccount.github.io, you need to go to Settings and configure Pages to enable GitHub Pages:

For example, my repo zhgchgli0718/testgithubpage also wants to have a Github Pages site.

• Settings -> Pages -> Branch -> Select main/root -> Save

• Completed

3. Create Your Homepage .html File

• Click the green “Code” button at the top right corner of the Repo homepage

• Select “+ Create new file”

4. Use ChatGPT to Help Generate Your Page .html Files

• Here is the simplest prompt: Generate a cyberpunk-style welcome page (.html)

5. Paste .html Back to Github Repo File

• File name: Enter index.html

• Edit: Paste the .html content generated by ChatGPT. You can use ChatGPT to adjust the HTML as needed or edit the HTML content directly here.

• Click the top right corner “Commit changes…”

• Choose “Commit directly to the main branch”

—

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

• Similarly, click “Add file” and select “Upload files”

• Drag or select files, then wait for the upload to complete

• Click “Commit changes”

• Completed

6. Waiting for Deployment

As mentioned earlier, Github Pages requires deployment; it won’t appear just by saving files. We can click on the “Actions” tab at the top of the Repo to check the deployment progress. When the orange light 🟠 turns into a green checkmark ✅, it means the deployment is complete.

7. Check the Results

https://zhgchgli0718.github.io/

• Go to: https://your-username.github.io to see the results

Github Pages Custom Domain Tutorial

Next is the main point of this article: GitHub Pages custom domains. As mentioned earlier, by default, we can only use your-username.github.io as the main domain for your static website; other repositories can only be accessed via /path and cannot create a second *.github.io domain.

But the great thing about Github Pages is that it offers a custom domain feature.

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

For example, my domain:

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

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

1. Purchase & Acquire Domain by Namecheap (Established Domain Provider)

First, go to the Namecheap official homepage and search for your preferred domain name:

Search results obtained:

The button on the right showing “Add To Cart” means the domain name is still available for registration and can be added to the shopping cart for purchase.

If the button on the right shows “Make offer” or “Taken,” it means the domain has already been registered. Please choose a different extension or try another domain name:

After adding to the cart, click the “Checkout” button below.

Enter the order confirmation page:

• Domain Registration: Here you can choose AUTO-RENEW for automatic yearly renewal, or select a one-time purchase for a set number of years.

• WhoisGuard: Since domain information is publicly available for anyone to query (registration date, expiration date, registrant, contact details), this feature lets you replace the registrant and contact info with Namecheap’s details instead of showing your personal info, helping to prevent spam.
  (This feature may require a fee for some extensions; if free, just use it!)

Extract some whois information results for google.com, available here.

• PremiumDNS: We know a domain name is like an address plate, meaning people look at the plate to find the location. This feature provides a more stable and secure “location finding” function. I think it’s unnecessary unless it’s a high-traffic e-commerce site where no errors are allowed.

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

The purchase was successful afterward!

You will receive an order detail email.

2. Domain Setup by Namecheap

Go to Account -> Dashboard:

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

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

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

• Click “ADD NEW RECORD”

• Type select “A Record”

• Host inputs “@”

• Enter values in order:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Four records.

• Click “✔️” to save the settings after each entry.

• Completed.

3. Add a CNAME Record According to the Desired Github Pages Repo:

• Click “ADD NEW RECORD”

• Type select “CNAME Record”

• Host input: enter the desired subdomain. If you want a primary domain, enter “www”.

• Value input: yourusername.github.io

4. Back to Github Repo Settings

• Github Repo -> Settings -> Pages

• Custom domain: Enter your domain (omit www. if present)

• Click Save

• You can check the option to enforce HTTPS to enhance access security.

Waiting for DNS Check…

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

Setup Successful!

Go to your domain verification results:

Success! 🎉🎉🎉 Now we no longer need to use the old https://yourusername.github.io to access your Github Pages. You can directly use https://yourdomain to visit it!

Other repos’ GitHub Pages can also be accessed via https://your-domain/Repo-name.

Other Articles

Medium Custom Domain

Medium Custom Domain

Seamless Migration from Medium to Github Pages

Painless Migration from Medium to Github Pages

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

---

This post was originally published on Medium (View original post), and automatically converted and synced by ZMediumToMarkdown.

Improve this page on Github.

Follow Me on Medium 1K+ Followers