How to use customized domain for GitHub Pages

Posted on In

I managed to set up my own website(Blog, and personal homepage later) by GitHub Pages. The service provides default domains for the pages. But I would like to use my own domain.

Default domain

In detail, suppose that your GitHub username is <username>, then by default, the service gives the domains like:

  • For user page(in the special repository <username>.github.io), it provides the domain <username>.github.io for it.
  • For project page(in repository named <repo>), it provides the domain <username>.github.io/<repo> for it.

For more information, see the official documentation.

Buy own domain & Configure

I recommend namesilo to buy your own domain. Here is a good tutorial for it.

After that, use DNSPOD for DNS. It's easy: follow the instructions on DNSPOD to change the DNS server on namesilo DNS configuration page. After this step, everything you shall do is to configure DNS rules on DNSPOD, with no regard to the namesilo configuration.

Then we can transparent the domains by default.

To add coustomized subdomain and apex domain, see the official documentation. But here are some notations.

Firstly, If you change the user page domain <username>.github.io/ to customized domain <subdomain>.example.com/, then all the repository pages will be on <subdomain>.example.com/<repo>. If the user page is not transparented, the repository page remains <username>.github.io/<repo>. However, if you configure any repository page with customized domain with no customized domain for user page, supposing the domain for <another-subdomain>.example.com, the link to <username>.github.io/<repo> will be resolved automatically into <another-subdomain>.example.com/<repo>, where no site is here. As a result, always give a main page,

Secondly, here are some methods to use one domain to jump to another domain. Here is a template:

At the repository where we want to jump to another, we use a 404.html file only, which contains

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>Redirecting</title>
	</head>
	<body>
	</body>
	<script language="javascript">
        var domain = "<domain jump to>";
        var current = window.location.href;
        var target = current.substring(current.indexOf('/', current.indexOf(':') + 3));
        window.location.href = "//" + domain + target;
        location.href = "//" + domain + target;
    </script>
</html>