reading and coding ...

ブログシステムを自作した

2/17/2019, 12:36:32 PM - 517 days ago

hellorusk.net のドメインを取得してからもうすぐ1年になります。
当初は jQuery のみを使った簡素なサイトでしたが、次第にモダンな JavaScript を用いて書き換えてきました。今年1月からは Next.js のフレームワークを新たに活用し始めました。その結果、CSS を styled-jsx によって個々の Component ごとに分解できるというメリットを得ることができました。たかが個人サイトといえど、CSS の管理が行いやすくなるというのはサイトを保守していく上で大きな利点であるのは間違いありません。
今回ブログを作成したのも、その Next.js をさらに活用したいという考えが一つにありました。
そしてもう一つ、Markdown を使って、見た目を逐次確認しながらブログを書く、ということをローカル環境で行いたいという考えもありました。はてなブログはブログサービスとして申し分無いですが、ネット接続せずに執筆を行えればより魅力的です。

ブログシステムを構築する上で大きく役に立ったのが MDX という技術です。

mdx-js/mdx: JSX in Markdown for ambitious projects

これは Markdown を JSX と対応が取れるように自然に拡張したもので、いま書かれているこの文章も 20190217.mdx というファイルの上に置かれたものです。
MDX においては通常の Markdown がサポートされているだけでなく、他のモジュールを import してそれを Markdown の文中に置いたり、逆にオブジェクトを定義してそれを export することもできます。このブログでも、前者はツイートボタンやmetaタグの記述などに、後者は記事のタイトル・日付等の export に活用されています。詳しくは GitHub のリポジトリで確認していただければと思います。

7ma7X/hellorusk.net: Blog (Next.js + MDX)

2020.04.05 追記

ブログシステムを自作のものから unix/unix.bio に移管しました。
こちらも Next.js + MDX で構成されているブログシステムですが、作者の witt 氏が ZEIT 社風の非公式の UI コンポーネント zeit-ui の設計を手掛けていることもあって、とても洗練されておりオススメです。