はじめに
Github Pagesを使うと手軽にWebサイトを公開することができます。
備忘録も兼ねGithub Pageの使い方をまとめていきたいと思います。
Github Pagesの詳細につきましては下記公式サイトよりご確認をお願いします。
Github Pages公式サイト
手順
大まかに手順をまとめると以下の通りです。
- 公開するWebページを作成
- Githubに新しいリポジトリを作成する
- 作成したリポジトリとローカル環境を連携する
- リポジトリにファイルを追加する
- コミット＆プッシュをする
- Github Pagesの公開設定をする
1. 公開するWebページを作成
公開するWebページを作成し、PCに保管します。
2. Githubに新しいリポジトリを作成する
Githubアカウントにサインインして、画面右上の+のアイコンをクリックし、
New repositoryを選択します。
Githubアカウントをお持ちでない方は、こちらよりアカウントを登録します。
Create a new repositoryの画面の Repository name にリポジトリ名を記入し、
画面下部の Create repositoryを選択します。
下図のような画面が表示され、リポジトリが作成できていればOKです。
3. 作成したリポジトリとローカル環境を連携する
リポジトリ作成時の画面(上図)に記載のいずれかの方法を用いて、リポジトリとローカル環境を連携します。
今回は ..or create a new repository on the command line の方法を使用します。
まず、ターミナルを開きます。
必要に応じて作業用フォルダに移動します。
(ここではホームディレクトリにtemplateというフォルダを作成し、作業を行う例を書きます)
$ mkdir template
$ cd template
リポジトリ作成時の画面に書かれているコマンドをコピーし、実行します
$ echo "# template" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/ユーザー名/template.git
$ git push -u origin main
これでリポジトリとローカル環境の連携は完了です。
ちなみに上記コマンドはREADME.mdファイルを作成・ファーストコミットをし、
リポジトリにプッシュしている動作となります。
4. リポジトリにファイルを追加する
作業フォルダにWebページに必要なファイルを追加します。
5. コミット&プッシュする
ファイルを追加したら、コミットとプッシュをします。
(ここではmainブランチに直接コミット、プッシュします)
$ git add .
$ git commit
$ git push origin main
6. Github Pagesの公開設定をする
Settingタブを選択します。
左サイドバーにあるCode and automationの Pages を選択します。
Noneを選択し、公開用ブランチを選択します。
必要に応じてフォルダを設定し、Saveを選択します。
数分程度待つとデプロイされ、公開したWebページのURLが表示されます。
URLにアクセスすると、Webページを確認することができると思います。
最後に
以上がGithub Pagesを用いたWebページの公開手順となります。
Github Pagesは手軽にWebページを公開することができるツールです。
皆さんもぜひGithub Pagesを使って、Webページを公開されてみてはいかがでしょうか。