はじめに
GitHub Pagesを利用しようとしたのですが、公式ドキュメントは下記の点で読むのが大変でした。
-
GitHub公式ドキュメントのリンクが多すぎて集中できない
-
詳細に説明されていて、読み飛ばしていいところがわからない
今後、すぐにGitHub Pagesを利用できるようにするため手順をまとめました！
それではいってみましょう！
注意事項
GitHubのアカウントには3つの種類があります。
- ユーザー アカウント
- Organization アカウント
- Enterprise アカウント
そのうち、今回紹介するのはユーザーアカウントに該当する個人用アカウントのGitHub Freeアカウントを使った手順になります。
GitHub Pagesとは？
ところで、GitHub Pagesって何でしょうか。
答えは、静的サイトホスティングサービスになります。
って言ってもよくわからないので分解します。
-
静的サイト
- 誰がいつ、どこで見ても、同じコンテンツが表示されるWebサイト
-
ホスティングサービス
-
サーバーを提供するサービスのこと
-
ホストファミリーが家を提供して泊めてくれるみたいなものですね（？）
-
なるほど、結構分かってきました。
それでは、具体的な手順を説明していきます。
GitHub Page サイトを公開する
1.GitHubでリポジトリを作成する
サイト用のリポジトリを作成する場合
リポジトリ名を<user>.github.ioにします。
すると、この後で公開するサイトのURLがhttps://<user>.github.ioになります。
既存のリポジトリあるいは、名前を上記以外のものにする場合
https://<user>.github.io/<repository>となります。
ここでは、こちらの場合を例にして説明します。
hogeリポジトリをGitHubに作成します。
個人用アカウントのGitHub FreeアカウントでGitHub Pagesを使う場合は、リポジトリをパブリックにしないとGitHub Pagesが利用できないので注意してください
2.index.htmlファイルを用意する
Webページを公開するのに必要なindex.htmlファイルを用意します。
- index.html
- index.md
- README.md
上記のファイルであれば
サイト用のエントリファイルとして使用できます。
今回は下記の内容でindex.htmlを作ります。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
参考：
作成したらGitHubにpushします。
下図のようにGitHub上にindex.htmlファイルを配置できればOKです。
3.GitHub Pagesサイトを公開する
メニューバーのSettingsをクリックします。
Code and automationのPagesをクリックします。
下図のようになっているので、BranchをNoneからmainにします。
mainに変更したらSaveをクリック。
Saveを押して数十秒待った後リロードすると
下図のようにYour site is live at https://<user>.github.io/<resitory>と表示されます。
Visit siteをクリックしてみると・・・
表示されました！
終わりに
今回は、GitHub Pages サイトの公開方法について説明しました。
無料で使えるし、手軽に公開できるのでかなり使いやすいですね！
自己紹介用のWebページを公開するのが良い使い方かなと思いました！
参考