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

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

• 静的サイトジェネレーターをGatsby.jsからNuxt.jsに変更した。
• ホスティング先をGitHub pagesからNetlifyに変更した。
• Markdownパーサーをmarkedからmarkdown-itに変更した。

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

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

• 2017-11-29：v1を公開した。当時はdev.toが話題になっていた頃で、爆速なブログにあこがれて始めた気がする。このときはまだ静的サイトジェネレータすら使わず、Markdownファイルからホームページを生成するパイプラインをGulpで作っていた。#304
• 2017-12-08：Circle CIでGitHub pagesへのアップロードを自動化した。#308
• 2018-01-12：Atom形式のフィードを配信するようになった。これでRSSリーダーで購読できるようになった。だけど、v2でGatsby.jsを導入したあと、フィードを配信する機能を実装する方法がよくわからなかったりして廃止されている。v3で今後復活させたい。#316
• 2018-09-01：v2を公開した。このときにGatsby.jsを導入してまともなホームページ作成環境になった。この頃からモダンなWebフロントエンド開発をたしなむようになった。#342
• 2018-12-12：ライブラリのアップデートをdependabotで自動化した。これによって面倒なアップデート作業が非常にラクになり、仕事でもアップデートの自動化を試みるようになった。#353
• 2019-03-02：ドメインをnaoty.github.ioからnaoty.devに変更した。devドメインが公開される日に急いでGoogle Domainsで取得した記憶がある。#363
• 2019-05-01：タグごとの記事一覧ページを実装した。Gatsby.jsだと簡単にできたんだけど、Nuxt.jsだとルーティングの関係でなんかうまくいってない。#369
• 2019-09-28：v3を公開した。