静的サイトの公開に最適なのはGithub Pages!privateでも公開可能です

2020-04-01

(LastUpdated: 2020-04-01)

あのGithubが提供する、静的サイトのホスティングサービスです。 しかも無料です。 以前は、無料プランだと公開リポジトリしか利用できず、ちょっと使い勝手が悪かったです。 公開リポジトリだと、サイトの内容も全て公開になります。 これで、躊躇する方も多かったのではないでしょうか。

しかし、今は、無料でプライベートリポジトリが使えるようになりました。 朗報、GitHub無料ユーザーも無制限にプライベートリポジトリを使えるようになる | TechCrunch Japan

github特に魅力的なポイントは以下の通り。

  • 設定が簡単
  • 独自ドメインを設定可能
  • プライベートリポジトリでも公開できる
  • ブランチへのプッシュするだけで公開(オートデプロイ)
  • ハイスペック

これが無料なのですから、素晴らしいです。

  1. 作成から公開までのフロー
  2. GitHub Pagesで出来ること
  3. Gighub Pagesのメリット
  4. Gighub Pagesのデメリット
  5. privateでの公開設定とカスタムドメイン
  6. オート・デプロイするブランチを設定する
  7. まとめ:簡単・快適その上ハイスペック

作成から公開までのフロー

サイト作成から公開までのフローをざっと見てみると、以下のような感じです。

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

gitとgithubを普段利用している方にとっては、かなり簡単に使えることがわかります。 公開非公開を設定画面でできるのも、わかりやすくて良いですね。

GitHub Pagesで出来ること

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

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

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

基本的に、良いことばかりだし、実際の使用感としても、誇張も偽りもないと思います。 すごく使えるサービス。

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

Gighub Pagesのメリット

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

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

Gighub Pagesのデメリット

ストリートにかかる陸橋でうなだれる男性 用途が向いてないケースというのもありますので、出来ないことやデメリットも理解しておきましょう。

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

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

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

privateでの公開設定とカスタムドメイン

黄色のキャンバスに鉛筆が揃えて置かれる画像 private設定済みのリポジトリでも公開状態にすることができます。 publicリポジトリじゃなくても、大丈夫なので、ご安心を。

private設定済みでも公開できます

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

カスタムドメインも設定出来ます

リポジトリの設定画面から、かんたんにホスティングを開始することができます。 また、独自ドメインを持っている方は、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の中でサイトのデータはおろか、ホスティングまで全て完結できるのは、素晴らしいの一言。 とにかく簡単で難しい事を考えずに、すぐに使い始められるのが、嬉しい。😃

ブランチへプッシュしてからの「オート・デプロイ」。 これを、画面上の簡単な設定で済ませられる のは素晴らしい この魅力に争うのは難しいです。

また、見逃せないのは、機能のスペックが高いところ。 サーバーなどのチューニングの知識がなくても、良い感じになるように準備してくれています。

githubのサービスの中の、ほんの一つのpagesというサービス。 しかしながら、githubの哲学の一端を感じさせてくれる素晴らしいサービスだと思います。

githubのことを、また好きになりました。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。