静的サイトの公開に最適なのはGithub Pages!privateでも公開可能です
2020-06-11
(LastUpdated: 2020-06-11)
あのGithubが提供する、静的サイトのホスティングサービスです。 しかも無料です。 以前は、無料プランだと公開リポジトリしか利用できず、ちょっと使い勝手が悪かったです。 公開リポジトリだと、サイトの内容も全て公開になります。 これで、躊躇する方も多かったのではないでしょうか。
しかし、今は、無料でプライベートリポジトリが使えるようになりました。 朗報、GitHub無料ユーザーも無制限にプライベートリポジトリを使えるようになる | TechCrunch Japan
github特に魅力的なポイントは以下の通り。
- 設定が簡単
- 独自ドメインを設定可能
- プライベートリポジトリでも公開できる
- ブランチへのプッシュするだけで公開(オートデプロイ)
- ハイスペック
これが無料なのですから、素晴らしいです。
作成から公開までのフロー
サイト作成から公開までのフローをざっと見てみると、以下のような感じです。
- リポジトリを作る
- サイトを作る
- 完成したデータをリモートにpushする
- リポジトリのpagesに公開するための設定を行う
- 公開状態になる
gitとgithubを普段利用している方にとっては、かなり簡単に使えることがわかります。 公開非公開を設定画面でできるのも、わかりやすくて良いですね。
GitHub Pagesで出来ること
海外のサイトではこんなふうに紹介されていました。
あなたのプロジェクトに既にGitHubを使用している場合は、とても使い慣れたインターフェースです。 簡単にセットアップできます。 静的なウェブサイトをgh-pagesブランチにプッシュするだけで、あなたのウェブサイトは準備が整います。 Jekyllをすぐにサポートします。 カスタムドメインをサポートします。 CNAMEサイトのルートに呼び出されたファイルを追加Aし、サイトのDNS設定でレコードを追加すれば、完了です。
Netlify vs GitHub Pages vs Firebase Hosting: Which one is better? - Progur!
基本的に、良いことばかりだし、実際の使用感としても、誇張も偽りもないと思います。 すごく使えるサービス。
ちなみに、現在はgh-pagesブランチ
を使う必要はありません。
以下で説明する設定画面で、簡単にセッティングが可能です。
Gighub Pagesのメリット
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のことを、また好きになりました。