Aimless

Netlifyを使ってブログをHTTPS化する

etc

背景

時代はHTTPSだということで、GitHub Pagesで公開している本ブログをHTTPS化しました。

実践

ホスティング先の選定

GitHub Pages+CloudFlareではなく、Netlifyを使うことにしました。

デプロイプロセスの整備

このブログは、CircleCIを中心としたデプロイプロセスで運営されています。Netlifyには、GitHubと連携しHogoを自動ビルトする機能があります。ですが、この機能を使うと、RedPenによる文書チェックが行われません。

そこで今回は、CircleCIのリリース先をGitHub PagesからNetlifyに切り替えることにしました。Netlifyにはnetlify-cliというCLIツールが用意されています。circle.ymlのデプロイ処理に、netlify-cliのインストールとnetlify-cliを使ったサイトのデプロイを追加します。

deployment:
  master:
    branch: master
    commands:
      - gem install asciidoctor
      - npm install netlify-cli
      - hugo -t angels-ladder-fork
      - rm -rf public/blog/categories
      - mv public/categories public/blog
      - node_modules/.bin/netlify deploy -t "$netlify_token"

netlify deployコマンドは、デプロイ先とデプロイするフォルダを.netlifyファイルから取得しますので、以下のフォーマットで記載します。site_idは管理画面のSite Infoに記載されています。

{"site_id":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx","path":"public"}

.netlifyにはAPIをたたくTokenを含めることもできます。しかし、.netlifyファイルをリポジトリにふくめたいので、TokneをCircleCIの環境変数に設定したうえで、netlify-cliに-tオプションで渡します。

独自ドメインの利用

Netlifyでは独自ドメインを利用できます。管理画面で独自ドメインを入力し、DNSサーバのCNAMEまたはAレコードをNetlifyに向けるだけです。シンプル。

参考:Using a custom domain

HTTPS化

ボタンぽちーでLet’s EncryptによるHTTPSが有効になります。NetlifyはHTTP/2による配信をサポートしていますので、HTTPS化によってHTTP/2の恩恵を得られます。

通知

Netlifyは以下の通知をサポートしています。今回は、デプロイの成功と失敗を自分のSlackチャンネルに流します。

このような通知が流れます。

Hugoのテンプレート変更

HTTP前提で作られているHugoのテンプレートを修正します。

  • Amazonアソシエイトが表示されなくなったので、&internal=1を追加
  • はてぶのブックマーク数表示をHTTPSに変更。
  • Hugoのbaseurlをhttpsにする勇気がなかったので、ブログのH1にHTTPSのURLを埋め込み、リンクの生成を.Permalinkから.RelPermalinkに変更

はてぶのブックマーク数は、まだhttpのURLを見に行っています。そのうち変えたい。

感想

ブログを静的サイトにしておいて本当によかったです。おかげで、Netlifyという高機能なホスティング先を切り替えることができました。

7 Sep 2016