linkyee — GitHub Pages を使って個人用 LinkTree 風リンクページを無料かつ迅速に作成する方法
GitHub Pages を使って自分のリンクページを素早く作成、100%無料でカスタマイズ可能かつ独自ドメイン対応
成果
私は成果をオープンソース化し、Template Repo（linkyee）としてパッケージ化しました。必要な方は直接 Fork してすぐにデプロイできます。
linkyee — あなた専用のリンクページ
利点：
-
Github Pages に直接デプロイして安定かつ無料
-
HTML のソースファイルを完全に管理でき、レイアウトやスタイルを自由に変更可能。広告や著作権表示の削除もできます。(デフォルトのスタイルは私が GenAI ChatGPT を使って作成しました)
-
カスタムドメインに対応
-
動的変数をサポート。例えば、デフォルトで設定した Medium のフォロワー数や Github リポジトリのスター数を自動で反映し、ページ上でフォロワー数を更新できます。 🚀🚀🚀
-
ページの読み込みが高速
-
以下の簡単な手順で設定とデプロイが完了します
Github Pages
Github Pages は Github が提供する無料の静的ページホスティングサービスで、すべての Github Free アカウントは Public Repo であれば直接利用可能です。Private Repo の場合は、先に有料プランにアップグレードする必要があります。
制限
-
静的ファイルリソースのみホスティング可能： HTML、CSS、JavaScript、フォントファイル、画像ファイル、PDF、音声ファイル、テキストファイルなど
-
サイト（リポジトリ）サイズの上限： 1 GB これはソフトリミットと考えられます。私の Github Pages Jekyll リポジトリはすでにほぼ5 GBあります。
-
デプロイ時間の最大： 10分
-
1時間あたりの最大デプロイ回数： 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 のリポジトリ名がアクセスURLになります。
もしリポジトリ名を
your-username.github.ioにすると、これがあなたの GitHub Pages サイトの直接アクセスURLになります。
もし既に
your-username.github.ioリポジトリをお持ちの場合、GitHub Pages のURLはyour-username.github.io/Repo-Nameとなります。
Fork の完了を待ちます。初回作成時にデプロイエラーが発生することがありますが、これは Fork したリポジトリの権限の問題によるものです。次に手順に従って調整を行います。
ステップ 4. Settings -> Actions -> General に移動し、以下のオプションを選択してください：
-
Actions の権限：すべてのアクションと再利用可能なワークフローを許可する
-
ワークフローの権限：読み取りおよび書き込み権限
選択が完了したら、Save ボタンをクリックして変更を保存してください。
ステップ 5. Settings -> Pages に移動し、GitHub Pages のブランチ設定が「gh-pages」になっていることを確認します：
「Your site is live at: XXXX」というメッセージは、あなたの GitHub Pages 公開アクセスURLです。
ステップ 6. Settings -> Actions に移動し、最初のデプロイ完了を待つ：
ステップ 7. GitHub Pages の URL にアクセスして、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：リンク先URL
# alt：代替テキスト（アクセシビリティ用）
# target：`_blank` 新しいタブで開く、`_self` 同一ページで開く
links:
- link:
icon: "fa-brands fa-medium"
text: "技術ブログ <span class='link-button-text'>({{vars.MediumFollowersCountPlugin}} フォロワー)</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}} フォロワー)</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']}} スター)</span>"
url: "https://github.com/ZhgChgLi/ZMarkupParser"
alt: "ZMarkupParser はHTML文字列をカスタムスタイルのNSAttributedStringに変換する純Swiftライブラリです。"
title: "ZMarkupParser はHTML文字列をカスタムスタイルのNSAttributedStringに変換する純Swiftライブラリです。"
target: "_blank"
- link:
icon: "fa-brands fa-app-store-ios"
text: "ZReviewTender <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/ZReviewTender']}} スター)</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']}} スター)</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']}} スター)</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：ソーシャルメディアの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 紹介リンクからドメインを購入すると、私に一部の報酬が入ります。これにより、引き続きオープンソースプロジェクトに貢献できます。
コーヒーをおごってください ❤️❤️❤️
https://www.paypal.com/ncp/payment/CMALMPT8UUTY2
このプロジェクトが役に立った場合は、Star Repo、友達におすすめする か、コーヒーを一杯ご支援ください。ご支援ありがとうございます！ をご検討ください。
Issueの提出やPull Requestでの修正・貢献を歓迎します。:)
Post Mediumから変換 by ZMediumToMarkdown.
コメント