Hexo博客多项目重定向配置多个顶级域名

- 【Hexo】GitHub博客多项目重定向配置多个顶级域名

闲来无事用博客名新注册了一个域名：www.bytefisher.top 刚开通博客的时候随便注册了一个: www.ai-fish.top 想着新域名和博客名称一致要好记一些，但是也不想直接替换原来的域名，毕竟花了钱买的，不能浪费。就想着给博客同时绑定两个顶级域名，然而GitHub Pages 只支持一个自定义域名，为了要兼容旧域名的访问，在网上一翻搜索查找，还真找到了一些方案：

301重定向
服务器重定向
GitHub多项目重定向
域名注册商重定向

大概看了一下，对于向我这种新手小白，还是觉得GitHub多项目重定向这一方案要简单一些。那就先折腾简单的吧，另外几种方案有机会再尝试。

- 建立中转仓库

需要在 GitHub 上再新建一个仓库，用来中转旧域名 www.ai-fish.top 中的访问到新的域名 www.bytefisher.top 中转仓库里面不会有过多内容。创建它只是为了存放 CNAME 文件和 404.html文件，告诉 GitHub Pages 我们有两个域名而已。我创建了一个名为ByteFisher的仓库，正常情况下，访问这个仓库 GitHub Pages 的域名前缀为用户名.github.io/ByteFisher
图1 创建中转仓库 ByteFisher

- 添加 GitHub Pages 服务

图2 中转仓库CNAME文件中填写旧的域名：www.ai-fish.top

图3 修改博客主仓库中CNAME文件，填写新的域名：www.bytefisher.top

图4 开启中转仓库GitHub Pages服务，并勾选Enforce HTTPS

图5 开启博客主仓库GitHub Pages服务，并勾选Enforce HTTPS

- 创建404.html跳转页面

在中转仓库中创建404.html跳转页面
404.html可以根据自已需要自行设计，但必须要实现域名重定向的js

var domain = "www.bytefisher.top";
var src = window.location.href;
var prtc = src.substring(0, src.indexOf(':'));
var target = src.substring(src.indexOf('/', src.indexOf(':') + 3));
window.location.href = prtc + "://" + domain + target;
location.href=prtc + "://" + domain + target;

其中：www.bytefisher.top 为新的域名。

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
	<head>
	<title>启用新的域名</title>
	<style>
		/* 设置页面样式 */
		body {
		background-image: url("bg.jpg"); /* 设置背景图 */
		background-size: cover;
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
		}

		.container {
		display: flex;
		justify-content: center;
		align-items: flex-start; /* 改为靠上对齐 */
		margin-top: 60px;
		height: 100vh;
		}

		.error-container {
		background-color: rgba(180, 220, 180, 0.3); /* 透明白色背景 */
		border-radius: 5px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
		max-width: 500px;
		padding: 40px;
		text-align: center;
		text-shadow: -1px -1px 0 #000, 
                1px -1px 0 #000, 
                -1px 1px 0 #000, 
                1px 1px 0 #000; /* 描边样式 */
		}

		h1 {
		font-size: 24px;
		margin-top: 0;
		color: #fff; /* 字体颜色 */

		}

		p {
		margin: 20px 0;
		color: #fff; /* 字体颜色 */
		
		}

		button {
		background-color: #889933;
		border: none;
		border-radius: 5px;
		color: #fff;
		cursor: pointer;
		font-family: Arial, sans-serif;
		font-size: 16px;
		padding: 10px 20px;
		}

		button:hover {
		background-color: #998833;
		}
	</style>
	<script>
		// 设置倒计时时间
		var countDownTime = 5;

		// 页面加载完成后开始倒计时
		window.onload = function() {
			// 显示倒计时时间
			document.getElementById("countdown").innerHTML = countDownTime;

			// 开始倒计时
			setInterval(function() {
				countDownTime -= 1;

				// 更新倒计时时间
				if(countDownTime < 0)
				{
					document.getElementById("countdown").innerHTML = 0;
				}
				else
				{
					document.getElementById("countdown").innerHTML = countDownTime;
				}

				// 当倒计时时间为0时，重定向到指定网址
				if (countDownTime === 0) {
					redirect();
				}
			}, 1000);
		};
		// 重定向到指定网址
		function redirect() {
			var domain = "www.bytefisher.top";
			var src = window.location.href;
			var prtc = src.substring(0, src.indexOf(':'));
			var target = src.substring(src.indexOf('/', src.indexOf(':') + 3));
			window.location.href = prtc + "://" + domain + target;
			location.href=prtc + "://" + domain + target;
			}
	</script>
	</head>
	<body>
		<div class="container">
			<div class="error-container">
				<h1>正在启用新的域名：https://www.bytefisher.top</h1>
				<p>跳转倒计时： <span id="countdown"></span> 秒.</p>
				<button onclick="redirect();">立即进入</button>
			</div>
		</div>
	</body>
</html>