我们上一篇文章 vite 实战，开发一个周计划管理的页面，带截图功能
开发了一个周计划管理页面，同时使用 github发布到了网上。
因为 github自带的域名。国内访问受限。绑定自己域名之后，就可以在国内直接访问了。
所以今天来讲讲github如何绑定自定义域名。
这一步的前提是：你先要申请一个域名，并学会配置 DNS解析。不会的话你可以看下这篇文章，
docs.tangly1024.com/article/ver...
我们下面假定你申请了自己的域名，并知道在哪配置 DNS。
一、配置域名解析，允许域名解析到 github
1、填写 A 记录信息
这些是 github 服务器的 ip地址，添加 A记录，是让你的域名能够解析到这些机器上。
-
GitHub Pages 使用了全球分布式的服务器，这些 IP 地址对应不同的服务器。
-
添加多个 A 记录指向不同的 IP 地址，可以提高网站的可靠性和可用性。
我用的是 Cloudflare做的域名解析，在 DNS下的记录模块，可以添加自己的域名解析规则。
2、等待DNS生效
DNS 记录的更新可能需要一定时间（通常为几分钟到 48 小时）才能在全球范围内生效。我的基本上设置了就生效，速度很快。
二、github 安全处理
这一步是在github验证域名归你所有，防止域名被别人使用。
1、github点头像，左侧菜单点 Pages
2、添加域名
点击添加域名，输入你的域名，之后会有下面的提示。记住下面 2 个值，需要去域名解析后台配置的。
3、域名解析后台，DNS管理哪里，增加一条记录
类型：TXT。
名称：上面复制的第一个数据
内容：上面复制的第二个数据
4、配置好 DNS之后，返回 github验证
点击保存，如果没问题会有成功的提示，说你域名验证完成了。
三、配置子域名解析到github项目
1、使用子域名（如 www.example.com）时，需要添加 CNAME 记录。
什么是 CNAME 记录？
CNAME 记录（Canonical Name Record）将一个域名别名指向另一个域名。在这里，我们将子域名指向 GitHub 提供的用户名域名（如 username.github.io）。
说明：
-
将 username 替换为您的 GitHub 用户名。
-
www 表示子域名部分。
-
如果您想将其他子域名（如 blog.example.com）指向 GitHub Pages，同样可以添加对应的 CNAME 记录。
-
确保主机记录只包含子域名部分，不包含整个域名。
cloudflare案例截图如下：
因为我的主域名是 seven-ai.top，添加这条CNAME之后，就可以通过 plan.seven-ai.top 访问到我的github的服务了。
注意把目标中的名字换成你的。
2、github项目配置
以我上次做的一个小项目为例
当时是发布的 github pages。使用的是 github自带的域名。但是国内访问受限。绑定自己域名之后，就可以在国内直接访问了。
打开 setting、Pages，可以看到下面有一个 Custom domin。
这里就填写我们上一步配置的dns子域名： plan.seven-ai.top
点击保存，等域名验证。就是看我们上一步配置的 DNS子域名是否正确。
完成之后，就可以通过自定义的域名访问项目了。
3、修改项目
因为我们以前用的chenyk2016.github.io/week-plan/的...
现在我们换成了域名plan.seven.top。需要把尾巴去掉 ，要修改一下项目的配置。
这里以 vite为例，把 vite.config.ts文件中的base参数修改下，删除 week-plan，改成/。
然后等待github-actions自动打包部署，完成之后，就可以使用域名访问了。
到这里，你的网站就可以在国内访问了，快去发布一个试一下吧。
上面第一第二步，只需要配置一次就可以了。以后新增 github项目，只需要跟着第三步配置一遍。
如果你有问题，可以一起讨论，相信聪明的你会找到我的。
⭐往期干货：
4小时，我用 Cursor 开发了一个指纹浏览器工具，附详细操作教程。
CopyCoder+Bolt超丝滑开发上线一个网站，只要1分钟。适合0代码新手使用。
END
我是柒崽，8年前端开发，分享前端干货，职场经验，实用AI技巧。