● こんにちはねたろーと申します。
GitHub Pages で簡単にウェブサイトを公開する方法です。
正式なドキュメントはこちらに詳しいですが、英語です。詳しく知りたい方々のためにまとめました。
公式サイト：
https://pages.github.com/
細かく分けると方法は４つあります。（後述する）『方法１』でユーザーページを公開するか、『方法２−A』でプロジェクトページを公開するのが楽だと思います。
● 作成の方法は大きく分けて２つあります。
方法１：ユーザーページを公開する。（https://ユーザー名.github.io）
| リポジトリ名 |
ユーザー名.github.io |
| ブランチ |
master |
| index.html を置く位置 |
masterブランチ直下 |
| 公開URL |
https://ユーザー名.github.io |
リポジトリ名をユーザー名.github.ioにすることが特徴。つまり
１ユーザーにつき１つだけ与えられる。ゆえにポートフォリオサイトなどに使う人が多いようです。
方法２：プロジェクトページサイト：リポジトリのプロジェクトを公開する。（https://ユーザー名.github.io/リポジトリ名/）
| リポジトリ名 |
自由です |
| ブランチ |
master or gh-pages |
| index.html を置く位置 |
master or gh-pagesブランチ直下、もしくはmasterブランチ直下のdocsフォルダ内 |
| 公開URL |
https://ユーザー名.github.io/リポジトリ名 |
ユーザーページとは異なり、リポジトリを作成すれば無制限にサイトを作ることができます。
正確に言うと、GitHub Pages で公開することを指定したブランチ（master か gh-pages）直下のindex.html、もしくはmasterブランチ直下のdocsフォルダ内のindex.html が表示されます。
つまり３パターンあります。後述します。
GitHub Pages とは
HTML / CSS + JavaScript などの静的なWEBサイトを無料で公開することができます。動的なサイト（データベースとのやりとりがあるなど）は公開することはできません。
（今回は触れませんが）今ではサイトの公開のみならず、ブラウザのGitHub上での管理によってテーマを用いたサイトを生成することもできるようです。
GitHub Pages が正式サポートしている「Jekyll （ジキル）」という静的サイトジェネレーターを使用したサイト公開が有名なようです。
方法１：ユーザーページサイト（https://ユーザー名.github.io）を公開する
2段階。めっちゃ簡単です。
1. GitHubにリモートリポジトリ作成
2. ローカルで管理＋ファイル作成＋push（２通りあるのでAorBで好きなように）。
A：クローンして、touchかechoでindex.htmlを作る方法がもっとも簡単です。
git clone git@github.com:netaro-N/netaro-N.github.io.git
cd netaro-N.github.io
touch index.html
git add .
git commit -am "first commit"
git push origin master
B：または、リモートリポジトリ作成後に表示される画面通りのコマンド入力↓でも良いです（今回はecho でREADME.md ではなくtouch index.html にしました）。
ただこの際はディレクトリを作成しておくことが前提です。
mkdir github-pages-study
cd github-pages-study
その後ファイル作成とGit管理します。
touch index.html
git init
git add index.html
git commit -am "first commit"
git remote add origin git@github.com:netaro-N/github-pages-study.git
git push -u origin master
これでhttps://ユーザー名.github.io/ に生成されているはずです。（※つまりmasterブランチのindex.htmlが公開されているということ）
私のページはこちらです（https://netaro-n.github.io/）hugoという静的サイトジェネレーターで、academicというテーマを用いて最近作ったポートフォリオサイトです。
完全なる初心者です（笑）
方法２：プロジェクトページサイト（https://ユーザー名.github.io/リポジトリ名/）を公開する
（テスト用に作成したサイトはこちら→
https://netaro-n.github.io/github-pages-study/）
今回は『github-pages-study』というリポジトリ名（ディレクトリ名）で作成していきます。
基本的にはリポジトリ名がユーザー名.github.ioではなく自由なディレクトリ名なだけで、手順は同じです。
ただ上述した通り、厳密には３パターンあるので『方法2-A：master ブランチで公開』『方法2-B：master ブランチ/docs フォルダーで公開』『方法2-C：gh-pages ブランチで公開』とします。
テスト用に作成したサイトは『方法2-B』で作成しています。複雑だったので、試しにやってみました。
『方法2-A：master ブランチで公開』
1. GitHubにリモートリポジトリ作成
方法１参照
2. ローカルで管理＋ファイル作成＋push（方法１同様）。
A：クローンする
git clone git@github.com:netaro-N/github-pages-study.git
cd github-pages-study
touch index.html
git add .
git commit -am "first commit"
git push origin master
B：またはディレクトリ作成とgit init
mkdir github-pages-study
cd github-pages-study
その後ファイル作成とGit管理します。
touch index.html
git init
git add index.html
git commit -am "first commit"
git remote add origin git@github.com:netaro-N/github-pages-study.git
git push -u origin master
index.htmlの内容は画像の通りです。よしなに書いてください。
『方法2-B：master ブランチ/docs フォルダーで公開』
＊ 『方法2-A：master ブランチで公開』2.で、作成するファイルの位置をmaster 直下ではなく、docsフォルダを作成してその中にindex.htmlファイルを作ります。
mkdir github-pages-study
cd github-pages-study
mkdir docs
その後*docsフォルダに*ファイル作成。メインディレクトリでGit管理します(もちろんdocsフォルダではありません)。
touch docs/index.html
git init
git add .
git commit -am "first commit"
git remote add origin git@github.com:netaro-N/github-pages-study.git
git push -u origin master
* プッシュしたあと、setting画面で、GitHub Pagesとして反映させるソースをmaster branch/docs folder に変更します。
（ちなみに、他の『方法１：ユーザーページサイトで公開』『方法2-A：master ブランチで公開』では、index.htmlファイルが存在するのであれば、自動にソースがmaster branchとなっていて、勝手にGitHub Pagesとして公開されています。同様に、『方法2-C：gh-pages ブランチで公開』ではgh-pagesブランチをリモートにも適用することで、ソースがgh-pages branchとなっているはずです。）
更新されたら、URLにアクセスしてみましょう（※数分表示されないこともあります。しばらくしてからアクセスしてみましょう。）
こちらに作成したサイトがあります→（
https://netaro-n.github.io/github-pages-study/）
『方法2-C：gh-pages ブランチで公開』
＊ ブランチを特殊な「gh-pages」というブランチにすることで公開されます。『方法2-A：master ブランチで公開』のようにmasterブランチでそのまま公開できるようになっている現在では、あまり使う必要がないかもしれません。
『方法2-A：master ブランチで公開』の作業終了後、以下の通り実行します。gh-pages ブランチを作成し、その後ブランチを切り替えて、gh-pagesにpushという流れです。
git branch gh-pages
git checkout gh-pages
この後、フォルダ内やindex.htmlに何らかの変更を加えましょう。その後gh-pagesブランチにpushします。
git add .
git commit -am "comment"
git push origin gh-pages
これでhttps://ユーザー名.github.io/リポジトリ名/ にアクセスしてください。もしページが反映されないなら、『方法2-B』のように、setting画面で、GitHub Pagesとして反映させるソースを「gh-pages branch」になっているか確かめてください。
2. ローカルで管理＋ファイル作成＋push（２通りあるのでAorBで好きなように）。
A：クローンして、touchかechoでindex.htmlを作る方法がもっとも簡単です。
2. ローカルで管理＋ファイル作成＋push（方法１同様）。
A：クローンする
更新されたら、URLにアクセスしてみましょう（※数分表示されないこともあります。しばらくしてからアクセスしてみましょう。）
こちらに作成したサイトがあります→（https://netaro-n.github.io/github-pages-study/）
コメント