ホームページをNuxtで作り直した

2019-09-28#meta#nuxt

このホームページをだいたい1年ぶりに作り直した。ホームページ作りは毎年一度、Webフロントエンドのスキルをアップデートする目的でやっている。今回の作り直しでv3となった。

v3の主な変更点は以下のとおり。

Nuxt.js

Markdownでブログなどの静的サイトを作りたい場合、正直Gatsby.jsの方がやりやすいと思った。今回、最も大変だったのはMarkdownコンテンツをどのようにNuxt.jsで扱うかだった。各記事のページであれば、MarkdownファイルをWebpackでimportできるように変換すれば割と簡単に実装できた。だけど、記事のインデックスページを実装するには、すべてのMarkdownコンテンツをまとめて扱うことになる。こういった実装は調べてもあんまり出てこず、しまいにはmarkdownコンテンツを返すWebサーバーをGoで実装してみたりもしたけど、HMRによるプレビューが使えないことを考えるとあまり現実的な解とは言えなかった。

一方で、Gatsby.jsだとコンテンツをGraphQLで取得できるようにするための仕組みが備わっていて、公式ドキュメントにも実装方法が紹介されていたため、あまり苦戦しなかった。

結局、Markdownコンテンツの変更をwatchしてパースするprocessmdのようなスクリプトを書いて、docker-composeでNuxtとは別プロセスで動かすという方法をとっている。

Netlify

以前から耳にしたことはあったけど触ったことがなかったので初挑戦してみた。感想としては、GitHub pagesでのホスティングに比べて非常によかった。

以前は、naoty/homepageというホームページを生成するリポジトリと、naoty/naoty.github.ioというホームページそのもののリポジトリが分かれていた。そして、Circle CIでホームページを生成してnaoty/naoty.github.ioのリポジトリにpushするような設定を書いていた。

Netlifyにした結果、そういったデプロイの設定がこれだけになり、Circle CIは使わなくなった。

# netlify.toml
[build]
command = "npm run build"
publish = "dist/"
environment = { NUXT_BASE_URL = "https://naoty.dev", TZ = "Asia/Tokyo" }

CHANGELOG

せっかくの機会なので、これまでのホームページの経緯を振り返ってみたい。