GitHub PagesでLinkTree風連結ページを無料高速構築｜完全カスタマイズ＆独自ドメイン対応
GitHub Pagesを活用し、無料で高速に個人用LinkTree風連結ページを作成。カスタマイズ自由＆独自ドメイン対応で、自分だけのリンク集を簡単に実現します。
本記事は AI による翻訳をもとに作成されています。表現が不自然な箇所がありましたら、ぜひコメントでお知らせください。
記事一覧
linkyee — GitHub Pages を使って個人用 LinkTree 風リンクページを無料で素早く作成する方法
GitHub Pages を使って自分のリンクページを素早く作成、100%無料でカスタマイズ可能かつ独自ドメイン対応
成果
私は成果をオープンソース化し、テンプレートリポジトリ（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分
毎時最大デプロイ回数： 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 ファイルを編集します。
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：リンクの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：ソーシャルメディアの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_THEMEconfig.yml ファイル内で
theme:YOUR_THEMEに更新してください
その通りです。ChatGPTのような生成AIツールを使って、カスタムリンクページの作成を支援することができます！（デフォルトのスタイルも私が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 紹介リンクからドメインを購入する と、私に一部の報酬が入ります。これにより、オープンソースプロジェクトへの貢献を続けることができます。
コーヒーをおごってください ❤️❤️❤️
</contact>{:target=”_blank”}
このプロジェクトが役に立った場合は、Star Repo、友達におすすめしてください 、または コーヒーをご馳走してください。ご支援ありがとうございます！
Issueの提出やPull Requestによる修正・貢献を歓迎します。:)
ご質問やご意見がありましたら、こちらからご連絡ください 。
Post MediumからZMediumToMarkdownで変換。
本記事は Medium にて初公開されました（こちらからオリジナル版を確認）。ZMediumToMarkdown による自動変換・同期技術を使用しています。