ブログを始めました。
Next.jsで作りました。
コードはGitHubで公開してます。
せっかくなので作ったブログの技術について説明します。
ブログを作るモチベーション#
仕事の同僚の方がブログを作っていたので触発された形です。
それに加えて、自分の好きな技術の話ができる場所が欲しかったものの、
自己満足な記事をzennに投稿するのは憚られたので、ブログを作ることにした次第です。
今まで何回かブログを作ったものの、長続きしなかったのでリベンジです。
技術構成#
今回はReactで書きたかったこと、デプロイが簡単であることを理由にNext.js + Vercelを採用しました。 正直最近のフロントエンドが追いきれていないこともあり、自分がそれなりに慣れている技術を選びました。
記事の管理#
作り始めた当初は記事はmicrocmsで管理することを想定し、記事を表示するところまで作ったのですが、気が乗らずにやめてしまいました。 なにかに依存するのってなんか怖いみたいな気持ちもありました。 結果として記事はmarkdown(もといmdx)で管理することにしました。
デザイン#
デザインは自分で考えるのが面倒だったこともありTailwind CSSを採用しました。 Tailwindは自分で具体的なwidthやpadding, marginなどの数値や色を決めなくてもいい感じのセットしてくれるので、 デザインに慣れていない自分でもそれなりの整頓されたUIを作ることができました。
記事の描画#
作っている中で一番苦労した部分です。最初は.mdファイルをremark を使ってhtmlに変換し、rehypeに食わせるのコードを自前で書いていました。
ただ作っているうちにこの方法は微妙だと感じて、Next.jsが公式にサポートしているmdxを使うことにしました。 Next.jsのmdxサポートはどうやら上で言及したrehypeやremarkの上で動いているようで、これを自前でやる必要がなくなるのはよかったです。
本文のスタイリングは@tailwindcss/typographyがよしなにやってくれています。 特に何も考えることなくいい感じに描画することができました。
ただ、本文中に出てくるコードスニペットに関してはrehype-pretty-codeを使いました。 これはコードブロックをシンタックスハイライトしてくれるrehypeプラグインです。 シンタックスハイライトを行うプラグインは他にもあるそうなのですが、例えばrehype-prism ではパースが崩れることもあるらしく、今回はrehype-pretty-codeを使うことにしました。
デプロイ#
デプロイはVercelを使いました。VercelはNext.jsの公式サポートをしているので、ゼロコンフィグでデプロイすることができました。 Vercel最高！
まとめ#
そんな感じで最小構成のブログはできたと思います。 まだまだ生やしたい機能や凝りたい部分はいくつかあるので、ちまちま更新できたらと思います。 記事の方ものんびり増やしていけるといいな、と思っています。