GitHub Pagesとは
GitHub Pagesを一言でまとめると、
作成したWebページ(HTML/CSS,JSのWeb上で動作するページ)を
インターネット上で公開するための無料で使用できるサービスです。
上記を行うとなると
一般的に、まず使用するサーバーを立ち上げて、あれこれ設定が必要で、インフラに疎い人にとってはかなりハードルが高いものとなっています。
一方で、GitHub Pagesを使えば、簡単に作成したWebページをインターネット上に公開することができます。
手順
準備
GitHub Pagesを使用する前に
- 既にGitHubのアカウント登録の設定、初期設定が済んでいる
- 手元に公開するためのHTML/CSSファイルおよび画像が用意できている
ということを前提に話を進めていきます。
もしまだGithubの初期設定が完了していない場合は下記を参考にいただければと思います。
流れ
1. GitHub Pagesで使用するためのリモートリポジトリを作成する
2. 上記のリモートリポジトリに公開したいHTML/CSSファイルをローカルからプッシュする
3. ファイルがアップされたリモートリポジトリを開きSettings > Pagesにて上記ファイルの公開設定を行う
の３点となっております。
以下で詳細を説明していきます。
1.リモートリポジトリの作成
- 「Ripositories」タブにて「New」をクリック
↓
- 「Repository name」に任意の名前を入力
- 「Public」にチェックを入れる（※ここでPrivateにcheckを入れるとWeb上で公開できなくなるので注意！）
- 「Create repository」をクリックし、リモートリポジトリの作成完了
2.公開したいHTML/CSSファイルをローカルからリモートへプッシュする
-
ローカルにファイルを作成する
-
GitHubにて先ほど作成したリポジトリを開き、SSHのURLをコピーする。
↓
- ローカルPCにファイルを作成し、VSコードで開き、ターミナル画面にて
git clone 上記URLと入力
→リモートリポと接続されたローカルリポ(ここではresume)が作成される
↓
-
cdコマンドにてローカルリポジトリのファイルに移動する。 - リモートリポジトリのファイル(ここではresume)にWeb上で公開したいファイルもしくは画像を設置する。
↓
下記コマンドを実行し、今回Web上で公開したいファイルまたは画像をリモートリポジトリにpushする。
コマンド
git add ファイル名
git commit -m 'コミット名'
// ローカルリポジトリにファイルを反映
git push origin main
//リモートリポジトリにファイルを反映
3.Settings > Pagesにて上記ファイルの公開設定を行う
- 公開ファイルが置かれたリポジトリから「Settings」を選択
↓
- 「Pages」を選択
- 「Branch」から公開したいファイルが置かれたブランチを選択し「Save」をクリック
- 「Visit site」を選択
↓
- 目的のファイルをWeb上で公開することができました！！
おわりに
いかがだったでしょうか
GitHub Pagesを使えば、簡単に自分で作成したWebページをインターネット上で公開することができます。
便利かつ無料の機能なので是非とも活用いただければと思います。
最後まで閲覧いただきありがとうございました！！