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 文件。
# 网站配置
# 主题名称,对应至目录:./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: "[email protected]"
title: "Email: [email protected]"
alt: "[email protected]"
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 设定:
schedule:
- cron: '0 0 * * *' # 每日午夜 00:00 (UTC) 执行
如果不需要定时重新部署,可以直接删除 schedule 区块。
自订网域 ❤️❤️❤️
您可以设置自订的 GitHub Pages 网域, 例如我的: https://link.zhgchg.li 。
可以找我之前的文章「 Github Pages 自订网域教学 」一步一步从购买到绑定网域,也可以通过 我的 Namecheap 推广连结购买网域 — 我将获得部分分润,这将帮助我继续贡献开源专案。
Buy me a coffee ❤️❤️❤️

如果这个专案对您有帮助,请考虑 Star Repo、推荐给朋友 , 或 赞助我一杯咖啡。感谢您的支持!
欢迎提出 Issue,或透过 Pull Request 提交修正或贡献。:)



留言 · Comments