前言

假设我们现在想要快速建立一个可供外部访问的网站，等不及去买服务器并进行备案（备案的话大概需要一周），此时我们就可以直接在github平台上搭建网站。

在搭建过程中，遇见了很多问题，我这里一一记录下来。

假设目前我们已经建立了一个github仓库，本地也与之进行了关联。那么我们要做的就是下面的事情。

一、部署网站

1.借助gh-pages

1-1.本地项目安装gh-pages

npm install gh-pages
复制代码

1-2.添加并执行部署命令

package.json文件中增加下面部署命令：

"scripts": {
    "deploy": "gh-pages -d build"
  },
复制代码

添加完成之后，先执行项目的打包命令再执行这个部署命令：

yarn build
yarn deploy
复制代码

执行之后我们可以在github远程仓库上可以看到多出了一个gh-pages分支：

2.github 进行pages服务

这样访问username.github.io/projectName 就可以进入网页了

二、域名映射

在上一步骤中，如果觉得username.github.io/projectName这样的域名不好看，想改成**.com之类的，那么我们就可以用到github的自定义域名功能，但同时我们还需要自己去购买域名。

1.购买域名

域名购买分为国内和国外两种买法，下面是它们两的差别：

其中最大的差别就是国内 需要备案才能使用域名，国外域名则是买了就能用。  现在备案也比较方便了，在小程序里就能完成。

但是一个比较坑的点是，必须要有 3 个租期以上的服务器才能开始备案，而且一台服务器只能为一个域名备案。  所以，会出现花 20 块买域名，但是要花 200 多先租台服务器（3 个月左右）来备案的坑爹情况。

国外购买域名的网站有很多，这里我在NameSilo上买域名：

2.DNS配置

在NameSilo官网上进入 Domain Manager，进入该域名的DNS设置。

2-1.新增4个A记录，配置4个IP地址

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
复制代码

四个IP地址可以看github doc- Configuring a subdomain

另外再新增2个CNAME记录：

• www  -  username.github.io 是将www.*.com 映射到 username.github.io
• projectName - username.github.io 是将www.*.com 映射到 username.github.io/projectName

结果如下：

4.gh-pages分支增加CNAME文件

在本地项目中执行了部署命令之后， 然后直接在github上操作，gh-pages分支增加CNAME文件，内容就是刚买的域名（假设为baidu.com）

baidu.com
复制代码

注意不是www.baidu.com，这一步是为了将username.github.io/projectName映射到刚买的域名上。

4.github 设置自定义域名

注意：DNS设置那个过程需要等待一段时间才生效，所以如果是设置完DNS之后立马进行了这一步，是不会立即生效的，一般要等待一段时间（当时等待了2h左右，网上说要等待一天）

4.问题排查

我的项目是React搭建的，当上述步骤完成之后去访问网页，发现网页是空白的，但是已经成功映射了，发现是静态文件请求错误，这里就将静态资源的请求地址从绝对位置改为相对位置：

在package.json文件里增加：

"homepage": "./"
复制代码

相关链接

Github docs - About custom domains and GitHub Pages

# 萌新建站教程（四）namesilo域名解析设置

Github 部署个人网页 | 自定义域名

docs.github.com/en/pages/co…

# Custom subdomains in GitHub project pages

# GitHub Pages 自定义域名实践整理