GitHub Pagesでwebサイトを公開してみよう

GitHub上で新規リポジトリを作成

①自分のGitHubのページを開きます。
②「New Repository」をクリックします。

③「Repository name」に作成したいリポジトリの名前を入力します。今回は「githubpages_practice」とします。

④公開範囲は「Public」にします。無料プランでGitHub Pagesを使用したい場合はリポジトリは「Public」である必要があるため、注意してください。

⑤「Create Repojitory」をクリックします。今回は他の設定項目は変更しないで実施してみます。

⑥リポジトリ作成に成功した場合、以下のような画面に切り替わります。

GitHub Pagesで使用するファイルの作成、アップロード

①GitHubにアップロードしたいファイルを作成します。今回は以下のようなHTMLファイル１つ、CSSファイル１つ、画像１枚をアップロードしてみます。

index.html

styles.css

824.jpeg

②ターミナルを開き、下記のようなコマンド入力をし、リモートリポジトリにローカルリポジトリの内容をプッシュします。

$ git init

$ git add .

$ git commit -m "first commit"

$ git remote add origin https://github.com/octopus12176/githubpages_practice.git

$ git push -u origin main

③GitHubの「githubpages_practice」のページを再び開きます。成功したら以下のようにプッシュしたファイルや画像が表示されているはずです。

GitHub Pagesでwebサイトを公開する

①GitHub Pagesで公開したいリポジトリの「Setiings」のタブをクリックします。

②「Setiings」をクリックすると以下のような画面が表示されるので、左にある「Pages」をクリックします。

③そうすると、以下のような画面が表示されるので「Branch」の項目のプルダウンをクリックし、公開したいブランチを選択します。今回はmainブランチで実施してみます。

④公開したいブランチを選択すると以下のような画面が表示されるので、「Save」ボタンをクリックします。

⑤「Save」ボタンをクリック後に数分経過すると、以下のようにURLと「Visit site」ボタンが表示されるようになるので「Visit site」ボタンをクリックします。

⑥以下のように作成したHTMLファイルの内容が表示されていたら成功です。