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ページが公開できているはずです。
これで終わりです!お疲れ様でした!