GitHub初心者向け：GitHub Pagesの始め方

**タイトル: GitHub for Beginners: GitHub Pages の始め方** GitHub for Beginners へようこそ。これまでに、GitHub Issues と Projects、GitHub Actions について説明し、セキュリティについても少し触れました。今回は、GitHub Pages についてお話しします。 GitHub では、どのプロジェクトでもすぐに利用できる無料で安全なホスティングサービスにアクセスできることをご存知ですか？それが GitHub Pages です。静的ウェブサイトを含む任意の GitHub リポジトリを、無料で公開されたライブサイトに変える方法です。必要なのは次の3つだけです： GitHub アカウント デプロイするプロジェクト GitHub Pages へのデプロイに要する数分間 このブログの手順に従えば、あなたのプロジェクトはライブになり、検索可能になり、共有する準備が整います。さあ、始めましょう！ いつものように、動画で視聴したい場合や参照したい場合は、GitHub for Beginners の全エピソードを YouTube でご覧いただけます。 **GitHub Pages へのデプロイ** 始めるには、サンプルリポジトリに移動し、ご自身で手順を試すためにリポジトリのフォークを作成してください。このリポジトリには Next.js で生成された静的ウェブサイトが含まれています。すでに GitHub にプッシュされているため、デプロイの準備が整っています。 プロジェクトを GitHub Pages にデプロイするには2つの異なる方法があります：ブランチからのデプロイ、または GitHub Actions の使用です。まず、ブランチからのデプロイを見てみましょう。 1. リポジトリの上部にある「Settings」タブを選択します。 2. 左側のメニューから「Pages」を選択します。これは設定の「Code and automation」セクションにあります。 3. 「Build and deployment」の下にあるドロップダウンメニューを使用し、「Deploy from a branch」を選択します。 4. 「Branch」の下で、ドロップダウンメニューを使用してデプロイ元のブランチとして「main」を選択します。 5. 「Save」をクリックします。 これにより、main ブランチからウェブサイトが公開され、一般に利用可能になります。 **GitHub Actions でのデプロイ** 次に、GitHub Actions ワークフローを使用した公開方法を見てみましょう。すでに適切な設定ページにいるので、ここから続けます。 1. 「Source」の下で、ドロップダウンメニューを使用して「GitHub Actions」を選択します。選択すると、GitHub はいくつかの推奨ワークフローを提供します。 2. 「browse all workflows」を選択して、利用可能なすべてのワークフローを表示します。これにより、さまざまな言語向けのあらゆるワークフローが表示された新しいページに移動します。 3. 検索ボックスに「next.js」と入力して、可能なワークフローをフィルタリングします。 4. 「Next.js」ワークフローボックスの「Configure」ボタンをクリックします。これにより、ワークフローファイルに移動します。 5. ファイルを確認し、設定されている権限とビルドおよびデプロイの指示を確認します。 6. ファイルに変更は必要ないため、ウィンドウの右上にある緑色の「Commit changes」ボタンを選択します。 7. コミットメッセージを入力するか、Copilot に作成させます。 8. main ブランチにコミットするオプションが選択されていることを確認し、ウィンドウ下部の「Commit changes」をクリックします。 9. 変更がコミットされたら、「Actions」タブを選択し、アクションが完了するのを待ちます。 10. 「Add GitHub Actions workflow for Next.js deployment」アクションの名前を選択します。同じ名前のアクションが2つあることに注意してください。アクションが正常に完了し、「deploy」ボックスにウェブサイトリンクが表示されない場合は、戻って同じ名前のもう一方のアクションを選択してください。 11. 「deploy」ボックス内のリンクを選択して、GitHub Pages でホストされているあなたのウェブサイトを表示します。 おめでとうございます！GitHub Pages へのウェブサイトのデプロイに成功しました。リポジトリがプライベートであっても、公開されたウェブサイトはパブリックになることに注意してください。誰が最も最近にあなたのウェブサイトをデプロイしたかを確認したい場合は、Settings -> Pages に戻ることで確認できます。 **カスタムドメインの追加** デフォルトでは、GitHub Pages 上のすべてのウェブサイトは次の URL になります：USERNAME.github.io/REPOSITORY-NAME。 ただし、必要に応じてカスタムドメインを使用するように更新できます。これを行うには、まずドメインプロバイダーで DNS レコードを設定する必要があります。カスタムドメインの管理に関するドキュメントを参照して、詳細を確認できます。また、組織またはプロファイルレベルでドメインを検証する必要があります。 DNS レコードを設定し、ドメインを検証したら、次の手順に従ってカスタムドメインを設定できます： 1. Settings -> Pages に移動します。 2. 「Custom domain」の下で、提供されたボックスにドメイン名を入力します。 3. カスタムドメインの横にある「Save」を選択します。ドメイン名を更新すると、GitHub は自動的にドメインの DNS 設定をチェックします。すべてが問題なければ、緑色のチェックマークが表示されます。 4. ドメインが検証されたら、「Enforce HTTPS」チェックボックスを選択します。これにより、無料の SSL 証明書でサイトが保護され、訪問者がブラウザで安全な南京錠を確認できるようになります。 **次のステップ** これで、デプロイするプロジェクトを選択し、ブランチから、または GitHub Actions を使用してリポジトリのウェブサイトを作成する方法がわかりました。それだけでなく、ドメインをカスタマイズすることもでき、すべて無料で利用できます！プロジェクト自体がプライベートであっても、これを使用してプロジェクトを宣伝したり、取り組んでいることを共有したり、ポートフォリオを充実させたりしてください。 GitHub Pages についてさらに学びたい場合は、次のリソースが参考になります： * GitHub Pages メインのドキュメントサイト * GitHub Pages サイトの作成 * カスタムドメインについて Happy coding！ この投稿「GitHub for Beginners: GitHub Pages の始め方」は、The GitHub Blog に最初に掲載されました。

GitHub初心者向け：GitHub Pagesの始め方

背景や根拠まで確認しますか？

このニュースを、実務の判断につなげる

調べる

選ぶ

サイト