ZhgChg.Li

GitHub PagesでLinkTree風連結ページを無料高速構築|完全カスタマイズ&独自ドメイン対応

GitHub Pagesを活用し、無料で高速に個人用LinkTree風連結ページを作成。カスタマイズ自由&独自ドメイン対応で、自分だけのリンク集を簡単に実現します。

GitHub PagesでLinkTree風連結ページを無料高速構築|完全カスタマイズ&独自ドメイン対応
本記事は AI による翻訳です。お気づきの点があればお知らせください。

linkyee — GitHub Pages を使って個人用 LinkTree 風リンクページを無料で素早く作成する方法

GitHub Pages を使って自分のリンクページを素早く作成、100%無料でカスタマイズ可能かつ独自ドメイン対応

成果

<https://link.zhgchg.li>

https://link.zhgchg.li

私は成果をオープンソース化し、テンプレートリポジトリ(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 紹介リンクからドメインを購入する と、私に一部の報酬が入ります。これにより、オープンソースプロジェクトへの貢献を続けることができます。

コーヒーをおごってください ❤️❤️❤️

<https://paypal.me/zhgchgli>

https://paypal.me/zhgchgli

このプロジェクトが役に立った場合は、Star Repo、友達におすすめしてくださいまたは コーヒーをご馳走してください。ご支援ありがとうございます!

Issueの提出やPull Requestによる修正・貢献を歓迎します。:)

Post MediumからZMediumToMarkdownで変換。

GitHub で編集
この記事を改善
本記事は Medium で初公開
オリジナルを読む
この記事をシェア
リンクをコピー · SNS でシェア
ZhgChgLi
著者

ZhgChgLi

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

コメント