静的サイト公開に最適すぎるGithub Pages!privateだとより便利に使えますよ!

無料でプライベートリポジトリが使えるように!
朗報、GitHub無料ユーザーも無制限にプライベートリポジトリを使えるようになる | TechCrunch Japan
これで、課金で悩む必要がなくなりましたね。

あのGithubが提供する、無料で使える 静的サイトのホスティングサービスです。
特に魅力的なポイントは以下の通り。

  • ブランチへのプッシュするだけで公開
  • 自分で取得した独自ドメインを設定可能
  • プライベートリポジトリでもホスティングは問題なし

無料の場合は、public repositoryというソースコードを公開した状態でのサービスのみが利用できます。
Publicで必要十分 なので、ソースコードが公開されるのが嫌という方以外は問題ないかと思いますよ。

すでに有料の契約をしている人は、private repositoryを利用しても変わらず便利です。
僕はprivateを利用しています。

privateでもホスティングできます

privateでもpublicでも、ホスティングされたサイトは公開状態 になります。
ググると、「リポジトリがPrivateモードになっていると公開されない」と書いてあったりしますが、いまはそんなことはないようです。
プライベートでも公開・非公開は、設定画面で切替可能です。

  1. GitHub Pagesで出来ること
  2. サイト作成から公開までのフローをおさらい
  3. Github pagesの設定
  4. 公開の設定
  5. まとめ:ハイスペックで簡単なのが魅力

GitHub Pagesで出来ること

海外のサイトではこんなふうに紹介されていました。

あなたのプロジェクトに既にGitHubを使用している場合は、とても使い慣れたインターフェースです。
簡単にセットアップできます。
静的なウェブサイトをgh-pagesブランチにプッシュするだけで、あなたのウェブサイトは準備が整います。
Jekyllをすぐにサポートします。
カスタムドメインをサポートします。
CNAMEサイトのルートに呼び出されたファイルを追加Aし、サイトのDNS設定でレコードを追加すれば、完了です。

Netlify vs GitHub Pages vs Firebase Hosting: Which one is better? - Progur!

いい事ずくめですよね。
ちなみに、現在はgh-pagesブランチを使う必要はありません。
以下で説明する設定画面で、簡単にセッティングが可能です。

メリット

Githubが用意するシステム上で動くので、機能はもちろん、UIの使いやすさなど、ベースのクォリティが高く信頼感があります。
セキュリティ面はもちろん、表示速度も早いんですよね。(おそらくデフォルトでCDNが適用されている・・・!)
こういう 難しそうな部分をgithubにまかせてしまえる ので、気遣うことが減ります。
そう、コンテンツ作成に集中することができるんですね。
これって、意外と重要ですよ。

また、公開する対象をブランチ単位やブランチのdocディレクトリを指定できます。
なので、ローカルからpushすればpublishが完了 するという、ファイル管理と公開を直列のフローで行なうことができます。
超効率的ですよね。
素敵です!

デメリット

用途が向いてないケースやデメリットも存在します。

  • Git と GitHub の基礎知識が必要なので、全く知らない人はそちらを覚える必要あり
  • 静的サイトのみなので、CMSなどが必要な場面では活用できません
  • 現在、カスタムドメイン用のHTTPSはサポートされていません

HTTPSがサポートされていない のはつらい・・・ただ、近い内にサポートされる可能性は高いと見て良いと思います。

なんと、HTTPSがカスタムドメインでも対応されたようです!!
GitHub PagesでカスタムドメインでもHTTPS化がサポートされた
むむー!漂う無敵感!

サイト作成から公開までのフローをおさらい

  1. リポジトリを作る
  2. サイトを作る
  3. 完成したデータをリモートにpushする
  4. リポジトリのpagesに公開するための設定を行う
  5. 公開状態になる

github pagesの設定

リポジトリの設定画面から、かんたんにホスティングを開始することができます。
また、独自ドメインを持っている方は、Custom domainを設定すればOK。

オートでプロイするブランチ設定する

公開設定で、どのブランチを公開するかを設定します。
サイトの開発状況によって、便利な使い方ができそうですね。

ブランチをプッシュした時点で、公開されているサイトにプッシュされた内容が反映されます。 つまり、スムーズに最新の情報を、公開することができるという訳です。

めっちゃ便利!

以下の場所から設定を行います。

Options -> Github Pagesの項目 -> Source

この中にある設定項目から、公開する場所を選択します。

  • master branch
  • master branch / docs folder
  • None

これらの意味を、以下に解説してみます。

master branch

Masterブランチのルートにあるwebページを公開

個人のサイトで、htmlやcssをそのまま触っていくようなスタイルであれば、master branch で問題ないと思います。

master branch / docs folder

Master branchの「docsフォルダの中だけ」公開

docs folder を使うのに便利なシーンは、作業ファイルと成果物のファイルが別々に存在する場合です。
htmlやcssのプリプロセッサを使ったりしてたら、これがとても便利でしょう!

None

公開しない

この設定にすることでサイトを非公開にできます。
privateリポジトリでも、非公開設定をすることができます。

まとめ:ハイスペックで簡単なのが魅力

ブランチへプッシュからのオートデプロイ。
これが一番の魅力ですね。

そして、それらの設定も、とにかく簡単😃
難しい事考えずに、すぐに使い始められるのが、嬉しい。

また、普通にデフォルトの機能のスペックが高いってのも見逃せないところですね。
こちらで気を使わなくても、良い感じに用意されている。

githubのサービスの中の、ほんの一つのpagesというサービスですが、githubの理念みたいなものを感じます。
githubのことを、また好きになりました。

the next
#github,#hosting

CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジ

脱WP。netlifyCMSなら静的サイトの記事作成を管理画面からできちゃいました!

設定が超簡単なnetlify!オートデプロイ機能はとにかく便利過ぎだ😄

爆速な静的サイト・ホスティングサービス選び Github Pages vs netlify vs Firebase

Github Issueでチームで本当に解決すべき課題を見極める