本日はGitHubの小ネタ枠です。
GitHub Pagesを使用してWebページを公開する手順をご紹介します。
GitHub Pagesとは
GitHub Pagesは、GitHubが提供する無料のWebホスティングサービスです。
HTML、CSS、JavaScriptなどの静的ファイルをホスティングでき、個人のポートフォリオやプロジェクトのドキュメントなどに最適です。
リポジトリは公開（Public）である必要があるため、URLを入力すれば誰でもアクセス可能である点に注意してください。
前提条件
GitHub Pagesの作成にはGitHubアカウントが必要となります。ライセンスはFree(無料)プランで利用可能です。
事前に以下の記事を参考にGitHubアカウントを作成してください。
bluebirdofoz.hatenablog.com
1.Webページ公開用のリポジトリを作成する
初めにWebページを登録するリポジトリを作成します。
GitHubのページを開き、右上の[Sign in]からGitHubアカウントでサインインを行います。
github.com
アカウントのDashboardが開いたら左上の[New]ボタンをクリックしてリポジトリの作成を行います。
リポジトリの作成画面が開きます。以下の設定を行って右下の[Create repository]を実行します。
・Repository nameの項目に任意のリポジトリ名を入力する
・Public/Privateの選択肢で Public(公開) を選択する
このとき設定したRepository nameはそのままアクセスするURLの一部になるので分かりやすい名称を付けましょう。
https://(アカウント名).github.io/(リポジトリ名)/(HTMLファイル名)
因みに各設定項目の詳細は以下の通りです。
今回はRepository name以外はデフォルトのままで問題ありません。
| 設定項目 | 入力内容 | 説明 |
|---|---|---|
| Repository templete | No template | No templateの場合特にテンプレートは使用しない |
| Owner | (アカウント名) | 作成したアカウント名のままで問題なし |
| Repository name | (リポジトリ名) | 任意のリポジトリ名を設定する |
| Description | 入力不要 | リポジトリの説明文(任意) |
| Public/Private | Public(公開) | リポジトリを誰でも見れるようにする、GitHub Pagesを利用する場合はPublic必須 |
| Add a README file | チェック不要 | チェックを入れるとREADME.txtが自動生成される |
| Add .gitIgnore | None | Noneの場合リポジトリの登録ファイルに制限を掛けない |
| Choose a license | None | Noneの場合リポジトリの利用に関するライセンス文を追加しない |
これでWebページを登録するためのリポジトリが作成できました。
2.リポジトリにWebページのファイルを作成する
次にリポジトリにWebページのファイルを作成します。
今回はボタンを押すと英語の発音をしてくれるWebページのhtml文を用意しました。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CE Words - Click to Hear</title> <style> body { font-family: sans-serif; padding: 20px; } button { display: inline-block; margin: 5px; padding: 10px 15px; font-size: 16px; cursor: pointer; } </style> </head> <body> <h2>Click a CE word to hear it</h2> <div id="word-list"></div> <script> const words = [ "police", "office", "price", "juice", "piece", "face", "place", "practice", "dance", "science", "sentence", "advice", "service", "rice", "space", "voice", "choice", "notice", "surface", "device" ]; const container = document.getElementById("word-list"); words.forEach(word => { const button = document.createElement("button"); button.textContent = word; button.onclick = () => { const utterance = new SpeechSynthesisUtterance(word); utterance.lang = "en-US"; speechSynthesis.speak(utterance); }; container.appendChild(button); }); </script> </body> </html>
今回はGitHubのページから直接HTMLファイルを作成してみます。
リポジトリのページから[Creating a new file]をクリックします。
画面左上の入力欄にファイル名を入力します。
このとき、必ず (任意の名前).html という名前にして .html 拡張子を指定します。
このとき設定したHTMLファイル名前はそのままアクセスURLになるので分かりやすい名称を付けましょう。
https://(アカウント名).github.io/(リポジトリ名)/(HTMLファイル名)
[Edit]タブを選択して先ほど用意したhtml文をファイルの内容として入力します。
入力が完了したら右上の[Commit changes]を実行してファイルを保存します。
コミットメッセージの入力を求められるダイアログが表示されますが、特に入力せず[Commit changes]を実行して問題ありません。
これでリポジトリにWebページのファイルを保存できました。
他にも保存したいページがある場合は[Add file]をクリックして別名のファイルを同じように作成してください。
3.リポジトリをWebページとして公開する設定を行う
最後に作成したリポジトリをWebページとして公開します。
リポジトリのページにある[Settings]をクリックします。
Settingsページが開いたら[Pages]タブを開きます。
Branchのプルダウンを開き、[main]を選択します。
[main]の[/root(直下全て)]という表記になります。
[Save]を実行すると、作成したリポジトリのHTMLファイルがWebページとして公開されます。
公開が完了すると[GitHub Pages source saved.]のメッセージが表示されます。
4.URLでアクセスして試す
公開したWebページにアクセスしてみます。
以下のURLフォーマットで公開されています。
https://(アカウント名).github.io/(リポジトリ名)/(HTMLファイル名)
ブラウザにURLを入力してアクセすると以下の通りWebページを開くことができました。
これでGitHub Pagesを使用してWebページを公開する手順は完了です。
