ZhgChg.Li

GitHub Pages 免费快速建置个人 LinkTree 连结页面|linkyee 开源模板教学

透过 linkyee 范本在 GitHub Pages 免费部署专属连结页,支援自订网域与动态追踪数据,免广告且可客制化样式,几步骤完成快速上线,提升个人品牌曝光与连结管理效率。

GitHub Pages 免费快速建置个人 LinkTree 连结页面|linkyee 开源模板教学
本文使用 AI 翻译,如有不妥敬请告知。"

linkyee — 使用 GitHub Pages 快速免费建立个人类 LinkTree 连结页面

使用 GitHub Pages 快速建立自己的连结页面,100% 免费、客制化并支援自订义网域

成果

<https://link.zhgchg.li>

https://link.zhgchg.li

我以把成果开源并打包成 Template Repo (linkyee),有需要的朋友可以直接 Fork 快速部署使用。

优点:

  • 直接部署在 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.io Repo,那么 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 ❤️❤️❤️

<https://paypal.me/zhgchgli>

https://paypal.me/zhgchgli

如果这个专案对您有帮助,请考虑 Star Repo、推荐给朋友赞助我一杯咖啡。感谢您的支持!

欢迎提出 Issue,或透过 Pull Request 提交修正或贡献。:)

在 GitHub 上补充修正
编辑这篇文章
本文首次发表于 Medium
点此查看原文
分享这篇文章
复制链接 · 分享到社群
ZhgChgLi
作者

ZhgChgLi

An iOS, web, and automation developer from Taiwan 🇹🇼 who also loves sharing, traveling, and writing.

留言 · Comments