これはなんだ
このブログはこれまでHugoで生成し、GitHub Pagesでホストしていた。それをVercel上のNext.jsで動かすように切り替えた。
理由としては、単純に素振り。以前までのブログは だいたい1年半前 に実装したのだけど、そこから時間が経って自分の持っている技術スタックが変わったのでそれを反映したかたち。
あと、だいたい月1ペースで書いていて 1 あまり頻繁にリポジトリを確認していなかったので気づくのが遅れたが、利用しているテーマ、 panr/hugo-theme-terminal がいつのまにかArchiveされていたのも理由のひとつ。
この記事では、今回のブログで利用した技術について記録する。
コードは kei-s16/blog-next で公開しているので、詳細はそちらで。
このブログを支える技術
Next.js
職場のフロントに強い人がめちゃくちゃ推していて、触ってみたら感触がよかったので選択。
App RouterがExperimentalじゃなくなるかどうかのタイミングで微妙に資料がなかったが、公式ドキュメントがかなり充実していたので助かった。
tsconfigとかlint設定とかを自動でいい感じにやってくれるので、Node.jsのエコシステムにあまり詳しくなくてもそれっぽくプロジェクトを立ち上げられるのもいい。
いまいちだなと思ったのは Dynamic Routes の命名規則くらい。
たぶんいまどきの人はターミナルの中じゃなくてVSCodeとかで開発するから問題ないんだろう。 おじはおじなりに回避させてもらって開発を進めた 。
tailwind css
Material UIがApp Routerではまだちゃんとは使えなさそうだったという理由が9割くらいで選択。
スタイリングで楽するために使っている。
いまは学生時代からずっと使い回しているCSSと組み合わせてるからほんとにtailwind css使ってるのか？ と思うような見た目をしている。
そのうち雰囲気は残しつつもシュッとさせたいところ。
Contentlayer
めんどうなのでなるべくDBを持ちたくないが、fs で悩んだりデータ構造で悩んだりするのはいやだという気持ちを狙いうちしているすばらしいライブラリ。
Markdownの形式と置き場所を指定してあげるだけで、いい感じにアプリで取り扱いやすいようなもろもろを提供してくれる。
雰囲気で使っているのであまり詳しいことは書けない。詳細は 公式ドキュメント を。
Vercel
Next.js使うならお膝元を素直に使おうと雑に選択。Hobbyプランで遊ばせてもらっている。
デプロイもリポジトリとリンクするだけでいい感じに設定してくれる一方で、next lint が通らないとビルドしてくれない罠もあった。
Vercelのデプロイが走る前の段階(今回はPR)で発火する CIを書いて next lintが通っていないことを事前検知できるようにして対処している。
Cloudflare
独自ドメインを張るのに使っている。
これの実装を機に terraformで管理するようにした 。
レコードの張り替えが楽だったのでterraform化して正解だったなと思いつつ、果たして今後もありがたみを感じるほど頻繁に差し替えるのだろうかという気持ちもなくはない。
でも「趣味のものをterraformで管理してます」って言えるのはかっこいい。かっこいいものはだいたい正解。
〆
だいたいこんな感じ。
せっかくリニューアルしたのでコンテンツを充実させていきたい気持ち。
月1ペースで更新したいと言っていたころの熱量を取り戻せるようにやっていくぞ。
Footnotes
- 2023年7月現在はまったくそんなペースではないが ↩