昨今、自分のサイトを公開する方法は色々ありますが、今回はGitHub Pagesを使って公開する方法を実践してみたので、やり方を説明してみたいと思います。
1. コードエディター(Visual Studio Code等)でサイトの中身を作成する。
具体的にはindex.htmlファイル、必要であればCSSファイルや画像ファイル
(※トップページとしてindex.htmlを見に行くように設定されている為。)
index.htmlファイルはHTMLで記述されたファイルでサイトのコンテンツを記述したものです。
公開するだけであればindex.htmlファイルだけでも問題ありませんが、サイトを装飾したり画像を掲載したい場合はCSSファイルや画像ファイルを使います。
2. Gitを使ってコミットする。
Gitとはシステム開発で用いるバージョンを管理する為のツールです。
今回はGitHubにサイトを立ち上げるので、Gitツールを通してGitHubにデータを送ります。
必要なデータ(index.html, CSSファイル, 画像データなど)の作成が終わったら、Git Bash(gitコマンドを使う為のプログラム)を通してgit add, git commitのコマンドを使ってファイルをコミットする。
作成したデータは最初はワーキングツリーというエリアに存在します。
git add コマンドを使うことで対象のデータをステージエリアに移動することができます。
(※ステージエリアとはコミットする対象のデータを置くエリアです。
ステージエリアに移動するファイルは一つだけ指定したり、フォルダ全体を指定することが可能)
記入例１：git add .カレントディレクトリ以下の全てのファイル、フォルダの変更内容が対象
記入例２：git add ファイル名 or フォルダ名 指定したファイルやフォルダのみが対象
次にgit commit コマンドを使って対象のデータをローカルリポジトリに移動します。
(※ローカルリポジトリとはリモートリポジトリに移動する対象データを置くエリアです。)
記入例：git commit -m "コミットコメント"
-mでコメントを記入するというオプション指定、コミットコメント欄には何をコミットするか等を記入
ローカルリポジトリにデータを移動することでHPを掲載する場所であるGitHubへデータを移動する準備ができます。
3. Gitを使ってリモートリポジトリにPushする。
コミットまで終わらせたらGitHubにあるリモートリポジトリにPushする。
これにより編集した内容についてローカルリポジトリとリモートリポジトリの内容が同じになる。
(ローカルリポジトリの内容をリモートリポジトリに反映させることができる)
コマンドはgit push origin mainなどと記入します。
originとはリモートリポジトリのことでmainはリモートリポジトリのmainというブランチを指します。
(※ブランチとは１つのプロジェクトから分岐させることにより、プロジェクト本体には影響させずに開発を進められる機能を指します。初期状態ではmainのみだが、他にブランチを設定することが可能。)
4. GitHubの対象リポジトリでサイトの設定をする
対象リポジトリのページに移動して、①Settings → ②Pages → ③Branchに移動する
Branchの欄でサイト設定に必要なファイルがあるブランチを設定する
ブランチ直下に必要なファイルが置いてある場合は/(root)を置き場所として設定
もし他のデータと分ける必要がある場合は/(docs)というフォルダの下に配置することも出来る
ページ最上部のYour site is live at のURLが自分のサイトのURL
※もしindex.htmlファイルがフォルダの階層に入ってしまっている場合はURLの後に階層を入れる必要有り
例：https://tohru-f.github.io/resume/sample/index.html
これはresumeというリポジトリの中にsampleフォルダがあり、その下にindex.htmlがある場合
公開する時のブランチはmainである必要は無く、他のブランチから公開することも可能です。
稀にサイトを公開できない時がありますが、そんな時はリポジトリを一度削除して再作成もやってみましょう。
私は一度どうしても公開できなくて、リポジトリを作り直した経験があります。
5. サイトを変更する場合は新たにコミット、Pushを行う
サイトの内容を変更したり、追加したい場合は元のデータ(PC内にある)を編集して保存する。
編集して生まれた差分は初回と同様にgit add, git commitのコマンドでローカルリポジトリに移動させる。
ローカルリポジトリのデータをgit pushでリモートリポジトリに反映させる。