GitHub Pagesを活用しよう！その魅力と簡単な公開手順
おはようございます！こんにちはこんばんは！お疲れ様です！
今回は、GitHubPagesを利用する機会がありまして簡単かつ無料でしたので情報共有したいと思います！
まず何を書くかといいますと
GitHub Pagesとは何なのかと、私が初めて使って詰まったところを共有します！
GitHub Pagesとは何か？
GitHub Pagesは、GitHubが提供する無料の静的ウェブホスティングサービスです。
プロジェクトのリポジトリにHTML、CSS、JavaScriptなどの静的ファイルを配置するだけで、
独自のウェブページを公開できます。個人やプロジェクトのポートフォリオ、ドキュメント、ブログなど
様々な目的で利用されています。
GitHub Pagesの主な利点
GitHub Pagesを利用する主な利点は以下の通りです。
無料: GitHub Pagesは完全に無料で、制限なしにウェブサイトをホスティングできます。
シンプル: 静的ファイルのみを使用しているため、設定や管理が簡単です。
バージョン管理: ウェブページのファイルはGitHubリポジトリで管理されるため、バージョン管理が容易です。
カスタムドメイン: 独自のドメインを使用してウェブサイトを公開することもできます。
Jekyll対応: Jekyllを使って簡単にブログやウェブサイトのテンプレートを作成・管理できます。
GitHub Pagesを公開する手順
GitHubのアカウントが既に登録されていると仮定して、以下の手順でGitHub Pagesを公開できます。
リポジトリの作成: いつも通りGitHubで新しいリポジトリを作成します。
リポジトリ名は ユーザー名.github.io にすることで、自動的にGitHub Pagesとして認識されますが
他のリポジトリ名でも大丈夫です！
ですが、そのままですと画像やCSSが反映されないのです
ここが私が詰まったところなので後で書きます！
静的ファイルの作成: ローカルリポジトリ内に index.html ファイルを作成し、
必要なHTML, CSS, JavaScriptなどの静的ファイルを追加します。
index.htmlは必ずリポジトリ直下におきましょう！
── README.md ├── css │ └── style.css ├── images │ ├── black_zeen.jpeg │ ├── discussion.png │ ├── edit.png │ ├── footer.png │ ├── g_logo.webp │ ├── img.png │ ├── minizenn.png │ ├── user.jpeg │ ├── vscode.png │ └── zenn_logo.png └── index.html
こんな感じのツリー構造です！
コミットとプッシュ: 作成・編集したファイルをコミットし、リモートリポジトリにプッシュします。
さらっと画像で公開するまでの手順を説明します。
最初のデプロイしたいブランチを指定してsave(緑の枠)
次に赤い枠にデプロイしたサイトが出てきます。(ちょっと時間かかるのでご注意を)
画面リロードしてあげると出てくることが多いです！
ウェブページの確認: リポジトリ名をgithub.ioにした場合は
ブラウザで https://ユーザー名.github.io にアクセスし、公開されたウェブページを確認します。
こちらはプロゲートさんが提供している公開方法の手順です。
わかりやすいのでぜひ！↓
注意点と私が詰まったところです
ここからはリポジトリ名をオリジナルな名前にした時に起きる現象です。
GitHub PagesでCSSと画像が反映されない問題の解決方法
原因と対処法
ファイルパスの確認
まず最初に、HTMLファイル内のタグでCSSファイルへのパスが正しく指定されているか確認してください。
同様に、タグのパスも正しいか確認してください。
例えば、resumeというリポジトリ名とします
開発環境では：
<link rel="stylesheet" href="/css/style.css"> <img src="/images/logo.png" alt="logo">
これで大丈夫ですが
GitHub Pagesでデプロイする時は：
<link rel="stylesheet" href="/resume/css/style.css"> <img src="/resume/images/logo.png" alt="logo">
このようにパス先頭にリポジトリ名を入れることで解決できます！
若干読み込まれるまで時間かかる場合があるので心配せずに待ってリロードしてみましょう！
まとめ
GitHub Pagesは静的サイトのみとなってしまいますが、無料かつ簡単にデプロイできるのでおすすめです！
ここまでみてくださりありがとうございました！
