GitHub Pages 免费快速建置个人 LinkTree 连结页面｜linkyee 开源模板教学
透过 linkyee 范本在 GitHub Pages 免费部署专属连结页，支援自订网域与动态追踪数据，免广告且可客制化样式，几步骤完成快速上线，提升个人品牌曝光与连结管理效率。
Click here to view the English version of this article.
點擊這裡查看本文章正體中文版本。
基于 SEO 考量，本文标题与描述经 AI 调整，原始版本请参考内文。
linkyee — 使用 GitHub Pages 快速免费建立个人类 LinkTree 连结页面
使用 GitHub Pages 快速建立自己的连结页面，100% 免费、客制化并支援自订义网域
成果
我以把成果开源并打包成 Template Repo (linkyee)，有需要的朋友可以直接 Fork 快速部署使用。
linkyee — Your Own Link Pages
优点：
直接部署在 Github Pages 稳定、免费
掌握 HTML 原始档案，可随意修改排版、样式、移除广告、版权宣告； (预设样式就是我用 GenAI ChatGPT 建立的)
支援自订域名
支援动态变数，例如我预设建了 Medium 追踪者、Github Repo 星星数变数，可自动带入、更新追踪者数量在页面上。 🚀🚀🚀
页面载入快速
照本文简单几步就能完成设定部署
Github Pages
Github Pages 是由 Github 提供的免费静态页面寄存服务，所有 Github Free 帐号只要是 Public Repo 都能直接使用，如果是 Private Repo 则须先付费升级 Github 帐号。
限制
只能寄存静态档案资源： HTML, CSS, JavaScript, 字体档案, 图片档案, PDF, 音讯档案, 文字档案…等等
网站(Repo)大小不得超过： 1 GB 这猜测也是软限制，因为我的 Github Pages Jekyll Repo 已经快 5 GB 了。
部署工作时间最长： 10 分钟
每小时最多部署： 10 次 (软限制)
每月流量限制 ：100 GB (软限制)
请求过于频繁可能会响应 HTTP 429
其他 Github Pages 应用文章
开始使用 — 部署在 GitHub Pages
步骤 1. 点击 linkyee 范本库右上角的「Use this template」按钮 ->「Create a new repository」：
步骤 2. 勾选「Include all branches」，输入您想要的 GitHub Pages 仓库名称，完成后点击「Create repository」：
GitHub Pages Repo 名称就会是访问网址。
如果将 Repo 名称输入为
your-username.github.io，那么这将成为您的 GitHub Pages 网站的直接访问网址。
如果您已有
your-username.github.ioRepo，那么 GitHub Pages 网址将会是your-username.github.io/Repo-Name。
等待 Fork 完成。初次建立时可能会遇到部署错误，这是由于 Fork 仓库的权限问题。接下来我们按照步骤进行调整。
步骤 4. 前往 Settings -> Actions -> General，确保选择以下选项：
Actions permissions: Allow all actions and reusable workflows
Workflow permissions: Read and write permissions
选择完毕后，点击 Save 按钮储存变更。
步骤 5. 前往 Settings -> Pages，确认 GitHub Pages 的分支设定为「gh-pages」：
「Your site is live at: XXXX」讯息即为您的 GitHub Pages 公开访问网址。
步骤 6. 前往 Settings -> Actions，等待第一次部署完成：
步骤 7. 访问 GitHub Pages 网址，确认 Fork 是否成功：
恭喜！部署成功，现在您可以修改设定档案，将其替换为您的资料。🎉🎉🎉
设定
设定档案
编辑位于根目录中的 config.yml 文件。
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
# 网站配置
# 主题名称，对应至目录：./theme/xxxx
theme: default
# HTML 语言设定
lang: "en"
# 插件（实作于 ./plugins/PLUGIN_NAME）
# 在下方设定中使用 {{ vars.PLUGIN_NAME }}
# 插件的输出结果可在下方使用，例如：{{vars.MediumFollowersCountPlugin}}
plugins:
# 自动获取 Medium 的追踪者数量
- MediumFollowersCountPlugin:
username: zhgchgli
# 自动获取 GitHub 仓库的星标数量
- GithubRepoStarsCountPlugin:
- ZhgChgLi/ZMarkupParser
- ZhgChgLi/ZReviewTender
- ZhgChgLi/ZMediumToMarkdown
- ZhgChgLi/linkyee
# Google Analytics 追踪 ID
google_analytics_id:
# HTML 标题
title: "ZhgChgLi 的连结集"
# 头像图片路径
avatar: "./images/profile.jpeg"
# 名称区块文字
name: "@zhgchgli"
# 标语区块文字
tagline: >-
一位来自台湾的 iOS、网页与自动化开发者，热爱分享、旅行与写作。
# 连结列表
# icon：使用 Font Awesome 图示 (https://fontawesome.com/search?o=r&m=free)
# text：显示在连结上的文字
# title：连结的标题
# url：连结的网址
# alt：替代文字（无障碍使用）
# target：`_blank` 在新页签打开，`_self` 在同页面打开
links:
- link:
icon: "fa-brands fa-medium"
text: "技术部落格 <span class='link-button-text'>({{vars.MediumFollowersCountPlugin}} Followers)</span>"
url: "https://blog.zhgchg.li"
alt: "ZhgChgLi 的技术部落格"
title: "ZhgChgLi 的技术部落格"
target: "_blank"
- link:
icon: "fa-brands fa-medium"
text: "旅行日志 <span class='link-button-text'>({{vars.MediumFollowersCountPlugin}} Followers)</span>"
url: "https://medium.com/ztravel"
alt: "ZhgChgLi 的旅行日志"
title: "ZhgChgLi 的旅行日志"
target: "_blank"
- link:
icon: "fa-solid fa-rss"
text: "个人网站"
url: "https://zhgchg.li/"
alt: "ZhgChgLi 的网站"
title: "ZhgChgLi 的网站"
target: "_blank"
- link:
icon: "fa-brands fa-swift"
text: "ZMarkupParser <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/ZMarkupParser']}} Stars)</span>"
url: "https://github.com/ZhgChgLi/ZMarkupParser"
alt: "ZMarkupParser 是一个纯 Swift 库，用于将 HTML 字串转换为具自订样式的 NSAttributedString。"
title: "ZMarkupParser 是一个纯 Swift 库，用于将 HTML 字串转换为具自订样式的 NSAttributedString。"
target: "_blank"
- link:
icon: "fa-brands fa-app-store-ios"
text: "ZReviewTender <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/ZReviewTender']}} Stars)</span>"
url: "https://github.com/ZhgChgLi/ZReviewTender"
alt: "ZReviewTender 是一个从 App Store 和 Google Play Console 获取应用评论并整合至工作流程的工具。"
title: "ZReviewTender 是一个从 App Store 和 Google Play Console 获取应用评论并整合至工作流程的工具。"
target: "_blank"
- link:
icon: "fa-brands fa-markdown"
text: "ZMediumToMarkdown <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/ZMediumToMarkdown']}} Stars)</span>"
url: "https://github.com/ZhgChgLi/ZMediumToMarkdown"
alt: "ZMediumToMarkdown 是一个强大的工具，可轻松下载并将 Medium 文章转换为 Markdown 格式。"
title: "ZMediumToMarkdown 是一个强大的工具，可轻松下载并将 Medium 文章转换为 Markdown 格式。"
target: "_blank"
- link:
icon: "fa-brands fa-github"
text: "linkyee <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/linkyee']}} Stars)</span>"
url: "https://github.com/ZhgChgLi/linkyee"
alt: "linkyee 是一个完全自订且开源的 LinkTree 替代方案，可直接部署在 GitHub Pages 上。"
title: "linkyee 是一个完全自订且开源的 LinkTree 替代方案，可直接部署在 GitHub Pages 上。"
target: "_blank"
# 社交媒体连结列表
# icon：使用 Font Awesome 图示 (https://fontawesome.com/search?o=r&m=free)
# title：连结的标题
# url：社交媒体连结的网址
# alt：替代文字（无障碍使用）
# target：`_blank` 在新页签打开，`_self` 在同页面打开
socials:
- social:
icon: "fa-brands fa-medium"
url: "https://blog.zhgchg.li"
title: "ZhgChgLi 的 Medium"
alt: "ZhgChgLi 的 Medium"
target: "_blank"
- social:
icon: "fa-brands fa-github"
url: "https://github.com/ZhgChgLi"
title: "ZhgChgLi 的 GitHub"
alt: "ZhgChgLi 的 GitHub"
target: "_blank"
- social:
icon: "fa-brands fa-twitter"
url: "https://twitter.com/zhgchgli"
title: "ZhgChgLi 的 Twitter"
alt: "ZhgChgLi 的 Twitter"
target: "_blank"
- social:
icon: "fa-brands fa-linkedin"
url: "https://www.linkedin.com/in/zhgchgli/"
title: "ZhgChgLi 的 LinkedIn"
alt: "ZhgChgLi 的 LinkedIn"
target: "_blank"
- social:
icon: "fa-brands fa-instagram"
url: "https://www.instagram.com/zhgchgli/"
title: "Instagram"
alt: "ZhgChgLi 的 Instagram"
target: "_blank"
- social:
icon: "fa-solid fa-envelope"
url: "zhgchgli@gmail.com"
title: "Email: zhgchgli@gmail.com"
alt: "zhgchgli@gmail.com"
target: "_blank"
# 页尾文字
footer: >
欢迎来到我的网站！追踪我在 Medium 或 GitHub 上的最新动态，或在 Instagram 和 LinkedIn 上保持联系。
# 页尾版权声明
# Linkyee 是一个 100% 免费的开源专案—您可以随意修改版权声明。:)
copyright: >
© 2024 <a href="https://zhgchg.li" target="_blank">ZhgChgLi</a>。由 <a href="https://github.com/ZhgChgLi/linkyee" target="_blank">linkyee</a> 提供技术支持。
请注意，每次修改文件后，您需要等待 GitHub Actions 完成自动建置和页面建置与部署任务。
重新整理页面以使变更生效。🚀
成功！！
自订风格样式、修改预设主题
./themes/default/index.html./themes/default/styles.css./themes/default/scripts.js
创建新主题
./themes/
YOUR_THEME在 config.yml 文件中更新为
theme:YOUR_THEME
没错，您可以使用像 ChatGPT 这样的 GenAI 工具，来帮助您创建自订的连结页面！(预设样式也是我用 ChatGPT 产的)
自动重新部署
预设情况下，专案每天会自动重新部署一次，以刷新插件的动态变数值。您可以在 Github Action — Automatic build ( .github/workflows/build.yml) 中调整 cron 设定：
1
2
schedule:
- cron: '0 0 * * *' # 每日午夜 00:00 (UTC) 执行
如果不需要定时重新部署，可以直接删除 schedule 区块。
自订网域 ❤️❤️❤️
您可以设置自订的 GitHub Pages 网域， 例如我的： https://link.zhgchg.li 。
可以找我之前的文章「 Github Pages 自订网域教学 」一步一步从购买到绑定网域，也可以通过 我的 Namecheap 推广连结购买网域 — 我将获得部分分润，这将帮助我继续贡献开源专案。
Buy me a coffee ❤️❤️❤️
https://www.buymeacoffee.com/zhgchgli
如果这个专案对您有帮助，请考虑 Star Repo、推荐给朋友 ， 或 赞助我一杯咖啡。感谢您的支持！
欢迎提出 Issue，或透过 Pull Request 提交修正或贡献。:)
有任何问题及指教欢迎 与我联络 。
本文首次发表于 Medium (点击查看原始版本)，由 ZMediumToMarkdown 提供自动转换与同步技术。