github pagesの使い方を初心者向けにわかりやすく説明

GitHub Pagesとは

  GitHub Pagesとは…GitHubが提供するホスティングサービスのこと。
  GitHubのリポジトリがベースなので、GitHubを使っていれば簡単に公開することが可能です。

手順

注意

• GitHubのツールなので、アカウントを持っていないと使うことはできません。
• githubのアカウントがない場合はここから作成。

STEP1: リポジトリの作成

まず、GitHubにログインして右上のメニューから「New repository」で新しいリポジトリを作成。

引用元： https://i0.wp.com/colorfree-map.com/wp-content/uploads/2021/01/tsubasa-ito__tsubasa-ito_.jpg?resize=626%2C527&ssl=1

リポジトリ名を決める。

引用元: https://i0.wp.com/colorfree-map.com/wp-content/uploads/2021/01/Create_a_New_Repository.jpg?w=908&ssl=1

Create repositoryをクリックして新規リポジトリの作成が完了。ここで、緑で囲んだリンクをコピーしておいてください。後に使います。

Create repositoryをクリックしたら上のような画面になると思います。

STEP2: GitHubにプッシュする

ターミナルにて公開したいフォルダに移動。
git add .→git commit 'initial commit'→git remote add origin 先ほどコピーしたURL→git push origin mainでGitHubとファイルを連携させます。

自分GitHubのリポジトリのページに戻って更新してみてください。

引用元: https://i0.wp.com/colorfree-map.com/wp-content/uploads/2021/01/36bbbdce4ad05890f591e21202aaaf0e.jpg?w=1200&ssl=1

この画面になったら成功です。

STEP3: Step3：GitHub Pagesを設定

最後にGitHub Pagesで公開していきます。

引用元： https://i0.wp.com/colorfree-map.com/wp-content/uploads/2021/01/tsubasa-ito_github-pages-prekansei.jpg?w=1200&ssl=1

Setting>Options の下の方に『GitHub Pages』にいきます。

引用元： https://i0.wp.com/colorfree-map.com/wp-content/uploads/2021/01/Options.jpg?w=1026&ssl=1

「Source」の欄を『None』→『Branch : master』に変更します。

引用元： https://i0.wp.com/colorfree-map.com/wp-content/uploads/2021/01/Options-ok.jpg?w=1002&ssl=1

すると画面がリロードし、『https://GitHubのアカウント名.github.io/リポジトリ名/』 のように右上にリンクが発行されます。
例：https://tsubasa-ito.github.io/github-pages-pre/

そのリンクをクリックしてみると、Webページが公開できているはずです。

これで終わりです！お疲れ様でした！