Update fetched posts.

_posts/zmediumtomarkdown/2024-10-27-70aeddb1fd9b.md

@@ -0,0 +1,314 @@
+---
+title: "linkyee — 使用 GitHub Pages 快速免費建立個人類 LinkTree 連結頁面"
+author: "ZhgChgLi"
+date: 2024-10-27T05:36:34.772+0000
+last_modified_at: 2024-10-27T05:36:34.772+0000
+categories: "ZRealm Robotic Process Automation"
+tags: ["linktree","github-pages","automation","ruby","jekyll"]
+description: "使用 GitHub Pages 快速建立自己的連結頁面，100% 免費、客製化並支援自訂義網域"
+image:
+  path: /assets/70aeddb1fd9b/1*CbiCUtVY5CV4wRXBaZBoyw.jpeg
+render_with_liquid: false
+---
+
+### linkyee — 使用 GitHub Pages 快速免費建立個人類 LinkTree 連結頁面
+
+使用 GitHub Pages 快速建立自己的連結頁面，100% 免費、客製化並支援自訂義網域
+
+### 成果
+
+
+![[https://link\.zhgchg\.li](https://link.zhgchg.li){:target="_blank"}](/assets/70aeddb1fd9b/1*CbiCUtVY5CV4wRXBaZBoyw.jpeg)
+
+[https://link\.zhgchg\.li](https://link.zhgchg.li){:target="_blank"}
+
+
+> **_我以把成果開源並打包成 Template Repo \(linkyee\)，有需要的朋友可以直接 Fork 快速部署使用。_** 
+
+
+
+
+### linkyee — Your Own Link Pages
+
+
+[![](https://repository-images.githubusercontent.com/877945203/b2d2ec07-9a56-400c-b24c-db0b180f7d3e)](https://github.com/ZhgChgLi/linkyee){:target="_blank"}
+
+#### 優點：
+- 直接部署在 Github Pages 穩定、免費
+- 掌握 HTML 原始檔案，可隨意修改排版、樣式、移除廣告、版權宣告； _\(預設樣式就是我用 GenAI ChatGPT 建立的\)_
+- 支援自訂域名
+- **支援動態變數，例如我預設建了一個 Medium 追蹤者變數，可自動帶入、更新追蹤者數量在頁面上。** 🚀🚀🚀
+- 頁面載入快速
+- 照本文簡單幾步就能完成設定部署
+
+### 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 部署的 Jekyll Blog](../a0c08d579ab1/) ➡️ [**ZhgChgLi**](https://zhgchg.li/){:target="_blank"}
+- [無痛轉移 Medium 到 Github Pages](../a0c08d579ab1/)
+- [**Github Pages 自訂網域教學**](../483af5d93297/)
+
+### 開始使用 — 部署在 GitHub Pages
+#### 步驟 1\. 點擊 linkyee 範本庫右上角的「Use this template」按鈕 \->「Create a new repository」：
+
+
+![](/assets/70aeddb1fd9b/1*G6pU845OnIyEdl-Os0EnwQ.png)
+
+#### 步驟 2\. 勾選「Include all branches」，輸入您想要的 GitHub Pages 倉庫名稱，完成後點擊「Create repository」：
+
+
+![](/assets/70aeddb1fd9b/1*PN9zygdxqJmFtUz9Pq35cQ.png)
+
+
+
+> _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 倉庫的權限問題。接下來我們按照步驟進行調整。
+
+
+![](/assets/70aeddb1fd9b/1*EYXix1zABfKXboAxkn_-yw.png)
+
+#### 步驟 4\. 前往 Settings \-> Actions \-> General，確保選擇以下選項：
+
+
+![](/assets/70aeddb1fd9b/1*5c4TZm0ZjolIPPalwEbJMA.png)
+
+- Actions permissions: Allow all actions and reusable workflows
+- Workflow permissions: Read and write permissions
+
+
+**選擇完畢後，點擊 Save 按鈕儲存變更。**
+#### 步驟 5\. 前往 Settings \-> Pages，確認 GitHub Pages 的分支設定為「gh\-pages」：
+
+
+![](/assets/70aeddb1fd9b/1*2mmeneQOLEuhRqZIovSh9A.png)
+
+
+
+> _「Your site is live at: XXXX」訊息即為您的 GitHub Pages 公開訪問網址。_ 
+
+
+
+
+#### 步驟 6\. 前往 Settings \-> Actions，等待第一次部署完成：
+
+
+![](/assets/70aeddb1fd9b/1*mFQmtcTZr-OjBhqtHwebEw.png)
+
+#### 步驟 7\. 訪問 GitHub Pages 網址，確認 Fork 是否成功：
+
+
+![](/assets/70aeddb1fd9b/1*1vaJpnwjZtsWEjBvKcGjVw.png)
+
+
+
+> 恭喜！部署成功，現在您可以修改設定檔案，將其替換為您的資料。🎉🎉🎉 
+
+
+
+### 設定
+#### 設定檔案
+
+編輯位於根目錄中的 config\.yml 文件。
+```yaml
+# 網站配置
+
+# 主題名稱，對應至目錄：./theme/xxxx
+theme: default
+
+# HTML 語言設定
+lang: "en"
+
+# 插件（實作於 ./plugins/PLUGIN_NAME）
+# 在下方設定中使用 {{ vars.PLUGIN_NAME }}
+
+plugins:
+  # 自動獲取 Medium 的追蹤者數量
+  - MediumFollowersCountPlugin:
+      username: zhgchgli
+
+# 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)
+# title：顯示在連結上的文字
+# url：連結的網址
+# alt：替代文字（無障礙使用）
+# target：`_blank` 在新頁籤打開，`_self` 在同頁面打開
+links:
+  - link:
+      icon: "fa-brands fa-medium"
+      title: "技術部落格 <span class='link-button-text'>({{vars.MediumFollowersCountPlugin}} Followers)</span>"
+      url: "https://blog.zhgchg.li"
+      alt: "ZhgChgLi 的技術部落格"
+      target: "_blank"
+  - link:
+      icon: "fa-brands fa-medium"
+      title: "旅行日誌 <span class='link-button-text'>({{vars.MediumFollowersCountPlugin}} Followers)</span>"
+      url: "https://medium.com/ztravel"
+      alt: "ZhgChgLi 的旅行日誌"
+      target: "_blank"
+  - link:
+      icon: "fa-solid fa-rss"
+      title: "個人網站"
+      url: "https://zhgchg.li/"
+      alt: "ZhgChgLi 的網站"
+      target: "_blank"
+  - link:
+      icon: "fa-brands fa-instagram"
+      title: "Instagram"
+      url: "https://www.instagram.com/zhgchgli/"
+      alt: "ZhgChgLi 的 Instagram"
+      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-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 完成自動建置和頁面建置與部署任務。_** 
+
+
+
+
+
+
+![](/assets/70aeddb1fd9b/1*56qGAyuECrqDJQMoKbPiOw.png)
+
+
+
+> **_重新整理頁面以使變更生效。🚀_** 
+
+
+
+
+
+
+![](/assets/70aeddb1fd9b/1*CbiCUtVY5CV4wRXBaZBoyw.jpeg)
+
+
+成功！！
+#### 自訂風格樣式、修改預設主題
+- `./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\)](https://github.com/ZhgChgLi/linkyee/blob/main/.github/workflows/build.yml){:target="_blank"} 中調整 cron 設定：
+```yaml
+schedule:
+ - cron: '0 0 * * *' # 每日午夜 00:00 (UTC) 執行
+```
+
+如果不需要定時重新部署，可以直接刪除 `schedule` 區塊。
+### 自訂網域 ❤️❤️❤️
+
+您可以設置自訂的 GitHub Pages 網域， **例如我的： [https://link\.zhgchg\.li](https://link.zhgchg.li){:target="_blank"} 。**
+
+可以找我之前的文章「 [**Github Pages 自訂網域教學**](../483af5d93297/) 」一步一步從購買到綁定網域，也可以通過 [**我的 Namecheap 推廣連結購買網域**](https://namecheap.pxf.io/P0jdZQ){:target="_blank"} — 我將獲得部分分潤，這將幫助我繼續貢獻開源專案。
+### Buy me a coffee ❤️❤️❤️
+
+
+![[https://www\.buymeacoffee\.com/zhgchgli](https://www.buymeacoffee.com/zhgchgli){:target="_blank"}](/assets/70aeddb1fd9b/1*QCQqlZr6doDP-cszzpaSpw.png)
+
+[https://www\.buymeacoffee\.com/zhgchgli](https://www.buymeacoffee.com/zhgchgli){:target="_blank"}
+
+如果這個專案對您有幫助，請考慮 [Star Repo、推薦給朋友](https://github.com/ZhgChgLi/linkyee){:target="_blank"} ， **或 [贊助我一杯咖啡。感謝您的支持！](https://www.buymeacoffee.com/zhgchgli){:target="_blank"}**
+
+歡迎提出 Issue，或透過 Pull Request 提交修正或貢獻。:\)
+
+
+有任何問題及指教歡迎 [與我聯絡](https://www.zhgchg.li/contact){:target="_blank"} 。
+
+
+
+_[Post](https://medium.com/zrealm-robotic-process-automation/linkyee-%E4%BD%BF%E7%94%A8-github-pages-%E5%BF%AB%E9%80%9F%E5%85%8D%E8%B2%BB%E5%BB%BA%E7%AB%8B%E5%80%8B%E4%BA%BA%E9%A1%9E-linktree-%E9%80%A3%E7%B5%90%E9%A0%81%E9%9D%A2-70aeddb1fd9b){:target="_blank"} converted from Medium by [ZMediumToMarkdown](https://github.com/ZhgChgLi/ZMediumToMarkdown){:target="_blank"}._