今回は「GitHubPages」というサービスを使ってみようという記事です。GitHubPagesを使うメリットは以下の通りです。（参照元：ChatGPT、 読み飛ばしてもらっても構いません。）
- 無料でホスティングできる GitHub Pagesは無料で利用可能で、個人プロジェクトやオープンソースプロジェクトのウェブサイトを簡単にホスティングできます。
- カスタムドメインに対応 デフォルトのusername.github.io形式に加え、独自のカスタムドメインを設定することができます。
- Gitによるバージョン管理 GitHub上にあるリポジトリをそのままウェブサイトとして公開できるため、バージョン管理が容易です。履歴管理も自動で行われるため、変更内容の追跡やリバートが可能です。
- 静的サイトのデプロイが簡単 静的サイト（HTML、CSS、JavaScriptベースのサイト）を簡単にデプロイできます。特にJekyllのような静的サイトジェネレータとも相性がよく、設定ファイル一つでブログやポートフォリオを作成できます。
- CI/CDの自動化が可能 GitHub Actionsなどを使って、自動的にウェブサイトのビルドやデプロイを行うことができ、効率的な開発フローが実現できます。
- SSL証明書が自動で提供される GitHub PagesはHTTPSに対応しており、SSL証明書が無料で自動的に設定されるため、セキュリティの向上も簡単です。
- コミュニティと連携しやすい GitHub自体が大きな開発者コミュニティであるため、他のプロジェクトと容易にコラボレーションしたり、コードレビューを受けたりできます。
step1 GitHubのアカウントを作成しよう！
この記事ではこれは省略します。調べればとても丁寧に解説してくれているサイトがたくさんあります。一例としてリンクを貼っておきます。step2 リポジトリを作成しよう！
GitHubのアカウントを作成することができたら次はリポジトリを作成しましょう！リポジトリとは１つのWebページやアプリケーションなどをGitHUb上で管理するためのプロジェクトのようなものです。簡単にいうと「ファイルやプログラム、設定情報などの保管場所」です。
下の画像のように新たなリポジトリを作成しましょう。
このとき、注意するのは以下の点です。
-
Publicに設定されていること - リポジトリ名が
<ユーザー名>.github.ioまたは<組織名>.github.ioになっていること（すべて小文字で記述すること）
また、 github.io のあとに -（ハイフン） をつけて管理しやすいようにすることも可能です。画像からもわかるように、今回私は末尾にtrialをつけておきました。
step3 リポジトリにファイルをアップロードしよう！
適当なフォルダ内に今回は以下のhtmlファイルを作成しましょう。ファイル名は必ず index.html にしておきましょう。
GitHub Pagesでは、サイト用のエントリファイルとしてこれを検索することになっているそうです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Github Pages公開練習</title>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>
作成できたら、 uploading an existing file を押してこのファイルをアップロードしましょう。
アップロードできたら、 Commit changes を押しましょう。
step4 ページを実際に見てみよう！
Settings → Pagesに行き、以下の画像のようにBranchを main に変更してセーブしましょう。しばらくしてデプロイが完了すると以下のように Pages の画面にURLが表示されます。
そこからWebページを見てみましょう！
デプロイの進行状況は Code のDeploymentsから見ることができます。
黄色の〇（進行中）から緑色の〇に変われば完了です。
おまけstep5 公開したページを更新してみよう！
ページをWeb上で公開することができたでしょうか？ さて、ここでは公開した後のWebページを更新する方法を紹介します。 「GitHub Pages」ではGitHubにアップロードしたファイルの内容を更新するだけで自動で公開したWebページも更新してくれます。 では、さきほどのindex.htmlに変更を加えていきます。具体的には、「こんにちは」を「こんばんは」に変更します。 ``Code`` からindex.htmlを開き、ペンのアイコンをクリックして以下のように以下のように編集します。<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Github Pages公開練習</title>
</head>
<body>
<h1>こんばんは</h1>
</body>
</html>
完了したら、また Commit changes を押しましょう。
そして、デプロイが完了したら再びサイトを訪れてみます。
以下のようになっていれば成功です。
おわりに
うまく実行できたでしょうか？この記事では、HTMLファイルしかアップロードしませんでしたが、もちろんお好みでCSSやJavaScriptなど様々な言語を組み合わせることもできます。より高度なものを作りたい場合は挑戦してみましょう！もし何かうまくいかないことがあったら公式ページを参照してください。
GitHub Pages サイトを作成する