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 ファイルを編集します。
# ウェブサイト設定
# テーマ名、ディレクトリに対応:./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_THEME -
config.yml ファイル内で
theme:YOUR_THEMEに更新してください
その通りです。ChatGPTのような生成AIツールを使って、カスタムリンクページの作成を支援することができます!(デフォルトのスタイルも私が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 紹介リンクからドメインを購入する と、私に一部の報酬が入ります。これにより、オープンソースプロジェクトへの貢献を続けることができます。
コーヒーをおごってください ❤️❤️❤️

このプロジェクトが役に立った場合は、Star Repo、友達におすすめしてください 、または コーヒーをご馳走してください。ご支援ありがとうございます!
Issueの提出やPull Requestによる修正・貢献を歓迎します。:)
Post MediumからZMediumToMarkdownで変換。



コメント