個人サイトを nuxt で書き換え、netlify で公開するようにした

追記: 2018/03/28

唯一イケてなかったのは、netlify のビルドタスクを実行する環境の Node のバージョンが古いこと。async/await が使えず、プリレンダリングに失敗してしまった。これは、しょうがないので、dist もバージョン管理対象にした。

NODE_VERSION環境変数をセットすることで、async/await が使える Node.js でビルドできた。Continuous Deployment | Netlify

経歴や職歴が書かれた個人サイト https://www.kitak.info に久しぶりに手をいれた。

元々、サイトジェネレーターの hugo を使ってサイトを生成し、VPS で公開していたのだけど、nuxt で書き換え、netlify で公開するようにした。以下、それぞれに関する個人メモ。

プリレンダリングの機能があることを知って、前々からサイトジェネレーターとして使ってみたい気持ちがあった。

記事を markdown で書いていたので、プリレンダリング時に markdown から HTML を生成した。既存の markdown をレンダリングする Vue のライブラリは、slots や mounted hook を利用したクライアントサイドで実行する制約のあるものがほとんどだったので、実装は単純なのだけど、こんなかんじ( https://github.com/kitak/www.kitak.info-nuxt/blob/6af6c36755e75f98e641f614a18109f70f53a1d9/components/MdArticle.vue )の markdown-js をラップした Vue コンポーネントを用意した。別にクライアントサイドでレンダリングしてもよいのだけど、事前にレンダリングしておいたほうが表示が早いだろうという気持ちの問題。

/ にリクエストがきたときに /about と同じ内容を表示したかった(内部リダイレクトしたかった)。nuxt では pages ディレクトリの構造 = ルーティングの設定なので、リダイレクト先のコンポーネントをそのまま返すようなコンポーネントを用意すればよい( www.kitak.info-nuxt/index.vue at 6af6c36755e75f98e641f614a18109f70f53a1d9 · kitak/www.kitak.info-nuxt · GitHub )。

作成したサイトを配信するために netlify を利用することにした。静的ファイルの配信に特化したサービス。総じてよかった。今回、自分が利用した機能については無料プランの枠で収まっている。

管理画面が使いやすい
CDN で配信してくれる
独自ドメインのSSL証明書を Let’s Encrypt で取得してくれる
パス毎にカスタムヘッダーの指定ができる
(使っていないけど)SPA の Prerendering をしてくれる
(使っていないけど)特定のパスだけ api に proxy できる。SPA の場合、ページと api の origin が同じになるので CORS でハマることがなくなる

唯一イケてなかったのは、netlify のビルドタスクを実行する環境の Node のバージョンが古いこと。async/await が使えず、プリレンダリングに失敗してしまった。これは、しょうがないので、dist もバージョン管理対象にした。