Github Pages 自订网域教学
使用你的网域替代原本的 github.io 网址
关于 Github Pages
Github Pages 是由 Github 提供的免费静态页面寄存服务，所有 Github Free 帐号只要是 Public Repo 都能直接使用，如果是 Private Repo 则须先付费升级 Github 帐号。
ZhgChgLi ZhgChgLi iOS Developer 求知若渴 教学相长 更爱电影/美剧/西音/运动/生活 zhgchg.li
限制
-
只能寄存静态档案资源： HTML, CSS, JavaScript, 字体档案, 图片档案, PDF, 音讯档案, 文字档案…等等
-
网站(Repo)大小不得超过： 1 GB 这猜测也是软限制，因为我的 Github Pages Jekyll Repo 已经快 5 GB 了。
-
部署工作时间最长： 10 分钟
-
每小时最多部署： 10 次 (软限制)
-
每月流量限制 ：100 GB (软限制)
-
请求过于频繁可能会响应 HTTP 429
⭐️⭐️⭐️若只想了解 Github Pages 自订网域教学 请继续往下阅读。
Github Pages 教学，搭配 ChatGPT 不会程式也能打造个人网站
以下以程式小白、不会 Git 为范例。
1.注册、登入 Github： https://github.com/
- 登入 Github 后选择右上角「+」->「New repository」
2. 输入 Repo 名称、设定
-
Repository name：
输入你的帐号.github.io -
Public：公开的专案
-
Add a README file：方便建立后可直接使用 Github Web 新增档案
-
Create repository
Respository name 的部分每个帐号或组织(Organization) 只能建立一个 你的帐号.github.io 的主 Github Pages Repo，其他 Repo 若也想要部署到 Github Pages 网址会是 你的帐号.github.io/Reop名称 ，例如：
-
你的帐号/你的帐号.github.ioRepo ->你的帐号.github.io -
你的帐号/mywebdemoRepo ->你的帐号.github.io/mywebdemo
如为非 你的帐号.github.io 的主 Github Pages Repo，需要再去 Settings 设定 Pages 才能启用 GitHub Pages：
例如我的 Repo zhgchgli0718/testgithubpage 也想有 Github Pages 页面。
-
Settings -> Pages -> Branch -> 选择
main/root-> Save -
完成
3. 建立你的首页 .html 档案
-
在 Repo 首页点击右上角绿色按钮「Code」
-
选择「+ Create new file」
4. 使用 ChatGPT 协助您产生页面 .html 档案
- 这边用最简单的 Prompt：
产生一个赛博庞克风的 欢迎页面 (.html)
5. 贴上 .html 回 Github Repo File
-
档案名称：输入
index.html -
Edit：贴上 ChatGPT 产生的 .html 内容，可以使用 ChatGPT 调整你要的 html 或是直接在这边编辑 HTML 内容
-
点右上角「Commit changes…」
- 选择「Commit directly to the main branch」
—
上传资源档案(例如：图片)：
- 一样点击「Add file」选择「Upload files」
-
拖曳或选择档案，等待上传完成
-
点击「Commit changes」
-
完成
6. 等待部署
如同前述，Github Pages 需要部署，不是存档就会出现；我们可以点 Repo 上方的「Actions」查看部署进度，直到橘灯🟠变成绿色勾勾✅代表部署完成了。
7. 查看成果
https://zhgchgli0718.github.io/
- 前往：
https://你的帐号.github.io查看成果
Github Pages 自订网域教学
再来才是本篇重点，Github Page 自订网域，如前述，预设我们只能使用 你的帐号.github.io 做为你的静态网站主网域；如果是其他 Repo 还只能透过 /路径 访问，没办法创造第二个 *.github.io 。
但 Github Pages 佛心的事是提供自订网域功能。
⭐️⭐️⭐️ 购买的网域同时也能用在： Medium 自订网域功能。
例如我的网域：
1. https://zhgchg.li -> 用在 Github Pages Jekyll Blog
2. https://blog.zhgchg.li -> 用在我的 Medium 页面
1. 购买＆取得域名 by Namecheap (老牌网域大厂)
首先到 Namecheap 官网首页 搜寻喜欢的域名：
得到搜寻结果：
右边按钮显示「 Add To Cart 」代表该域名还没有人注册，可以加入购物车购买。
如果右边按钮显示「 Make offer 」、「 Taken 」代表该域名已被注册，请选择其他后缀或换个域名：
加入购物车后点击下方「 Checkout 」。
进入订单确认页：
-
Domain Registration ：这边可以选择
AUTO-RENEW每年自动续费，也可以改要一次购买的年数。 -
WhoisGuard ：由于 网域资料可以公开让任何人自由查询 （注册时间、到期日、注册人、联系方式）；此功能可以将注册人及联系方式改为显示 Namecheap，而非直接显示你的个人资料，可以防止垃圾邮件讯息。 （此功能部分后缀是要收费的，如果是免费的话就用吧！）
撷取一些 google.com 的 whois 讯息结果，可 由此查询 。
- PremiumDNS ：我们知道域名等于门牌，也就是说看到门牌会去找位置在哪；这个功能就是提供更稳定安全的「找位置在哪」功能，我是觉得不必，除非是一点错误都不能出的高流量电商网站之类。
输入完信用卡资讯点「 Confirm Order 」
之后就购买成功啰！
会收到一封订单明细信件。
2. 网域设定by Namecheap
前往 Account -> Dashboard:
找到你要设定的网域 -> 右边点击「Manage」:
确定 Domain -> NAMESERVERS -> 选择「Namecheap BasicDNS」：
切换到「Advanced DNS」-> 加入 A Record：
-
点击「ADD NEW RECORD」
-
Type 选择「A Record」
-
Host 输入「
@」 -
Value 依序输入：
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
四笔纪录。
-
每一笔输入完就点「✔️」储存设定。
-
完成。
3. 依照想设定的 Github Pages Repo 加入 CNAME Record：
-
点击「ADD NEW RECORD」
-
Type 选择「CNAME Record」
-
Host 输入，看你希望的 subdomain，如果希望是一级网域则输入「
www」 -
Value 输入：
你的帐号.github.io
4. 回到 Github Repo 设定
-
Github Repo -> Settings -> Pages
-
Custom domain：输入
你的网域(若为www.可省略) -
点击 Save
- 可以勾选强制使用 HTTPS 增加访问安全性。
等待 DNS Check…
通常在五分钟内能确认，但依照 DNS 机制最长可能需要 72 小时设定才会生效， 如果确定步骤没错但一直确认失败不妨过几天再回来试试。
设定成功！
前往你的网域验证结果：
成功！🎉🎉🎉 现在我们不用在使用旧的 https://你的帐号.github.io 访问你的 Github Pages，可以直接使用 https://你的网域 进行访问啰！
其他 Repo 的 Github Pages 也可以透过
https://你的网域/Repo 名称进行访问。
其他文章
Medium 自订网域
无痛转移 Medium 到 Github Pages
留言 · Comments