Site icon Tips Note by TAM

GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた

matsuo

Github Pages とは

GitHub Pages とは、GitHub による、静的サイトのホスティングサービスになります。GitHub のアカウントがあればすぐに静的サイトが公開できますので、非常にお手軽です。

2016年8月にアップデートされ、今までよりもさらに簡単に使えるようになりましたので、利用方法をまとめておきます。

特徴

  • 静的サイト (HTML や CSS, 画像など) を公開できます。JavaScript も動作します。
  • URLは https://ユーザまたは組織名.github.io/リポジトリ名 となります。(Project Pagesの場合)
  • 独自ドメインを割り当てることも可能です。(別途簡単な設定が必要)
  • 無料です。

なお、サイトの容量や転送量などには制限があります。詳細は公式サイトのヘルプをご確認ください。

使い方

1. GitHub にリポジトリを作成します

今回は gh-pages-sample という名前で作成しました。

gh-pages-1

2. ローカル環境にクローンしてきます

$ git clone 【GitHubリポジトリのアドレス】

3. ローカル環境で静的ページを作成し、GitHub にプッシュします

今回は以下のような感じで適当に index.html を作りまして、コミット〜プッシュを行いました。JavaScript が動くことも確認したかったので、console.log() を1行入れています。

ここまで、ごくごく普通の Git / GitHub の使い方です。

4. master ブランチを GitHub Pages として公開設定します

いよいよ GitHub Pages の設定です。GitHubリポジトリの Settings → GitHub Pages → Source のところで、master branch を選択し、その後 Save ボタンを押します。

これだけで、masterブランチの内容がそのまま GitHub Pages として公開されるようになります。(ここが 2016年8月からの追加機能です。以前は別途ブランチを切る必要がありました)

5. 所定のURLにアクセスします

URLは https://ユーザまたは組織名.github.io/リポジトリ名 となります。今回のサンプルだと
https://tipsnote.github.io/gh-pages-sample/ です。

表示できてる…
か、かんたん！

もちろん、ブラウザ上から直接 GitHub 内でコードを編集してもOKです。つまり、サイトのちょっとした修正を GitHub のサイトからも行えます。

こんな感じで、ブラウザ上でコードを修正しコミット → 即座にサイトに反映、というのも可能なお手軽さです。

その他の使い方

さきほどの Settings → GitHub Pages のところで、

  • /docs の内容だけを GitHub Pages として公開する

という設定を選ぶことも可能です。リポジトリの全体ではなく、一部分だけを公開できるようになりますので、いろいろと使えそうですね。以前までの gh-pages ブランチを使った方法と比べると、コードとドキュメントを別のブランチで管理する必要がなくなります。
(なお、以前までの gh-pages ブランチを使った方法も、そのまま利用可能です)

参考