ご挨拶
こんにちは！
ソフトウェアを書くエンジニアをやっている RE-yura です。
さて、皆さんはブログ記事を書こうと思ったことはありますか？
僕が最初に書こうと思ったのは大学生の時で、ロボット・ROS・Ubuntu・機械学習・Web アプリ・GUI などなど（粒度がめちゃくちゃだが）、情報が一気に流れ込んできて頭に入りきらなくなってきたあたりでした。
当時の時代感や学生だったのもあり、とりあえず最初のブログは Word Press を自宅の Raspberry Pi から配信するという愚行。マンションの計画停電を忘れていて、お亡くなりになりました。（Cloud Service いつもありがとうございます。） そして Qiita などに書いたりもしてたのですが、せっかくならポートフォリオとブログをくっつけた自分のサイトを作ろうと思い、はや３年、社会人4年目の本日ようやく作りました。思い立ったら2日くらいでできたのでもっと早くやっとけば良かったと思いつつ、 LLM 君がいないとめんどくさい部分とかもかなりあったので後回しで工数減ってラッキー 😁という気持ちもあります。
というわけで、日頃の生活の出来事からテックブログまで日々の記録をしていこうと思うのでよろしくお願いします。
おまけ
せっかく作ったので、どうやってこのブログを作ったかを簡単に書き残しておきます。
結論としては、Next.js と Tina CMS という Headless CMS を組み合わせて作りました。
（余談ですが、法人のコーポレートサイトとかなら Kuroco が、ペラ１の LP やプロダクトページ等のちょっとしたコンテンツ管理であれば Studio CMS がおすすめです。）
まず、一時期 dev 環境があまりにも重すぎてアンチ Next.js 活動をしていたのですが、v16 からまともな速さで動くようになったのでデグレしないことを信じて Next.js を採用しました。
次に Headless CMS ですが、これは非常に選定が難しいです。調べてみると分かりますが、とんでもない数のサービスと OSS があります。
代表例は世界的に使われている Contentful、日本でよく見る microCMS です。ただ、最近ではコンテンツを編集してプレビューを確認するというこれまでの ザ・Headless CMS の時代から、プレビューを直接いじりたいという Visual Editing の時代に移りつつある？ような空気も感じています。有名どころでいえば、Sanity・Prismic・Storyblok、Builder などです。Self host 可能な OSS もたくさんあります。Strapi・directusなどです。
そんな中でなぜ Tina CMS を選んだか。それは Gitベースの CMS かつ、Visual Editing ができるからです。そもそもエンジニアならリポジトリに直接 Markdown でも MDX でも足せばいいじゃんという声が聞こえてきそうですが、自分はそうは思いません。ブラウザさえあれば記事を編集してデプロイまでできる。実際に記事の画面を見て、この文章を変えたいと思った場所をクリックすれば編集できる、そういった細かい UX の良さがブログを書こうと思う気持ちを削がない（湧き立たせるわけではない）のだと思っています。
ということで Next.js ＋ Tina CMS で作り始めると、特に難しいところはそんなにないですが、唯一困るのがコードブロックです。
Tina CMS は rich-text タイプのフィールドを用意していて、内部で AST に変換した上で GraphQL から段落ごとの要素を返却、それを <TinaMarkdown> コンポーネントでレンダリングするという仕組みを提供しています。
普通の記事を書く分にはそんなに困らないですが、コードブロックなどのスタイルをがっつりいじろうとするとかなり辛いです。僕は途中で諦めました。
最終的には普通に string フィールドに MDX テキストを書き、next-mdx-remote-client の <MDXClient> でレンダリングしました。
コードブロックには Shiki でシンタックスハイライトをつけました。
テーマはこれを採用→ https://textmate-grammars-themes.netlify.app/?theme=one-light&grammar=typescript
通常マークダウンは 👇 のリポジトリから Github のスタイルを拝借しました。
https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown.css
以上！！