はじめに

GitHub Pagesとは？

GitHubから提供されている、HTML・CSSなどで構築された静的サイトのホスティングサービス。
GitHubのアカウントを持っていれば無料でインターネット上で自分が作成したサイトを公開することができる。(レンタルサーバーを契約しなくても良い)

流れ

githubで公開用レポジトリの作成(git accountは作成済みであること)
git cloneして、Webサイトを作成する
git push後、github pagesで公開を行う
※ gitの操作に関しては一部省略

githubで公開用レポジトリの作成

githubにて、

[New]からレポジトリ作成画面に移動する。

[Repository name]に作成したいレポジトリ名を入力する。
Publicレポジトリで作成すること！！
　→ Publicでないとgithub pagesにて公開ができないため
その他の設定に関しては任意。

git cloneして、Webサイトを作成する

レポジトリ作成後に以下の画面が表示されるので、URLをコピーする。
※設定次第では表示されないので、作成したレポジトリに移動し、[code]からURLをコピーする。

表示されているURLを使用して、下記のコマンドでcloneを行う
macの方はterminal、windowsの方はgit bash(インストール必要)などを起動して実行

git clone https://github.com/shiba30/レポジトリ名

clone後、カレントディレクトリにレポジトリ名のディレクトリが作成されているので、移動する。

cd レポジトリ名

gitの操作に関してはここでは割愛。

Webサイトの作成

test配下にHTML・CSSなどのファイル等を追加していく。
以下は一例である。

vim index.html

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

作成完了できたら、git pushを行う。git add, commitの操作に関してはここでは割愛。

git push origin ブランチ

git push後、github pagesで公開を行う

ようやく本題に入る。
githubの作成したレポジトリ配下の[settings]に移動する

左メニューにある[Pages]に移動する。

下記のBranchが[None]になっているので、プルダウンメニューから[git pushしたブランチ]を指定して、[Save]する。

↓

数秒後、リロードすると下記のようにURLが表示されている。
[https://shiba30.github.io/resume/]

実際のWebサイトの画面を表示するには、htmlファイルがあるファイルを指定しなければならない。
下記は一例である。
[https://shiba30.github.io/resume/startbootstrap-resume-gh-pages/index.html]

上記をブラウザで開くと画面が表示され、github pagesで公開できていることが確認できる。