JeffreyFrancesco.org 公開日 タグ Tag Permalink 現在地 Facebook page Twitter RSS feed

GitHub Pages の常時 SSL 化については Cloudflare を使ってやってる人が多いようで、検索でもそのやり方はいっぱい引っかかるのだけど、それ以外には方法はないの? と思ったのでもう少し調べていたところ、Netlify は最強の静的ウェブサイトホスティングサービスかもしれない - yoshidashingoというブログ記事経由で Netlify というサービスがあるのを知った。

基本的には Git リポジトリに push すれば、あとは自動でビルドしてデプロイしてホスティングまで面倒見てくれるサービスのようで、それに付随するサービスとして独自ドメインや常時 SSL 化をサポートしている感じである。このサイトは今までずっと手動デプロイしてて(手元のマシンでビルドして gh-pages ブランチに push)そろそろ自動化とかしてみたいなあと思ってたところで、そんな自分にとってはまさにおあつらえ向きのサービスだ。

そんな訳で、さっそく登録して使ってみることにした。サインアップは GitHub(もしくは GitLabBitbucket)のアカウントを使って認証するだけで終わり。そうすると管理画面にアクセスできるようになる。ウェブサイトを追加するにはここから、

  1. “New site from Git” というラベルのボタンを押す
  2. Git プロバイダを指定して、出てくるリストからリポジトリを選択
  3. 必要であればビルドコマンドや、ビルド結果の出力先などを指定(修正)して登録

たったこれだけのステップで、あっという間に lorem-ipsum-12345.netlify.com のようなサブドメイン形式の URL に既存サイトのコピーが立ち上がる(ちなみにこのサブドメイン部分はあとで任意のものに変更可能)。簡単すぎてスクリーンショットも交えて分かりやすく説明しようという気にもならないくらい。

このサイトは現在 Jekyll プラス CSS/JS は Webpack でビルドという構成なので、もしかすると多少手間取るか失敗するかも…とか思ってたのだけど、あまりにもあっさり終わってしまったので逆に拍子抜けしたくらいだ。多分 Gemfile があれば自動で bundle install するし package.json があれば同じく npm install する仕組みなのだろう。手元でちゃんとビルドできるソースであれば、問題が起こることはまずなさそうだ。

あとは必要に応じて追加の設定をしていくのだけど、この辺りもある程度自分でウェブサイトを運用したことがある人なら、特に悩むことなく一瞬で終わるはず。独自ドメインは使用するドメインを入力したら、そのドメインが Netlify のサーバを向くように DNS レコードを登録するだけだし、Let’s Encrypt による SSL/TLS 証明書も、基本ワンクリックするだけで発行・インストールから自動更新の設定まで良きに計らってくれる。

あまりにも簡単なので一気に先に進めてしまいそうになるが、もちろんその前にやるべきことは忘れずやっておかないといけないので注意。常時 SSL 化したのに画像や外部リソースを非 SSL で読み込んでたら意味ないので、その辺は問題がないかをしっかり確認しつつ、必要なら修正してサイトに反映させながら、段階的に証明書や Force TLS connections を有効にしていった方がいいだろう。

他にもいろいろ盲点はありそう。ちなみに自分は Search Console や Google Analytics の設定変更をうっかり忘れるところだった。


実をいうとこの個人サイト、そのうちどこかにサーバ借りて新ドメインでリスタートする方向で考えていたので、常時 SSL とかその時に対応すりゃええやろくらいに思ってたのだけど、最近のブラウザ関連の動きとこちらの作業の進捗状況を考慮した結果、どうやらリスタートする日よりも先に「いまどき常時 SSL 化してないウェブサイトはゴミクズ」呼ばわりされる日が来そうな気配を感じたので、やっぱり今のうちに対応しとくか…と思って重い腰を上げてみた次第。

ドキュメントを読んでみると、どうやらキャッシュ・バースト的な仕組みが丸投げできそうだったり、フォームからのメール送信も HTML 書くだけで簡単に実装できそうだったりする。他にも(Netlify が自前で用意している DNS サーバを使う必要があるものの)別ブランチ切るだけで簡単にベータ版プレビューしたり A/B テスト的なことができるっぽいので、機会があれば試してみたい気はする。