個人ブログを作ったので初記事を書く
# ポートフォリオサイト兼ブログを作った
個人ブログを作ったといっても、以前からポートフォリオサイトやブログ自体はすでに実装したことがあった。今回はそれらのリニューアルで、サイト自体も0から作ったし、ブログも0から書いていきたいと考えている。なのでまぁ、初記事といっても差し支えないだろう。
# Azuma-ya.dev を支える技術
- TypeScript
必須である。もう型がなければ生きていけない体になってしまった。 - React、Next.js
メインフレームワーク。よく使っている。 - Cloudflare Pages
デプロイ先である。 - unified.js、remark、rehype
Markdownをhtmlに変換するために利用しています。今回はReact Markdwonも利用した。
## Markdownの変換
今までにReact Markdownを使用したことはあったが、今回は独自記法も採用したかったため、remark、rehypeに入門してみた。入門といっても、ほんのさわりしかしていないので、理解はしていない。
今回実装したのは上記の
- remark plugins
- remark-rehypeのhandlers
- components
である。
### Remark plugins
ここのプラグインで独自記法を検知して、mdastに変換する。検知といっても、今回行ったのはremark directiveライブラリを利用して、カスタムディレクティブを実装したくらいである。今後はより自分好みな記法を実装したい。なおremark directiveに関しては、remark directiveを参考にしてほしい。
### Remark-rehypeのhandlers
remark-rehypeのhandlersで、mdastをhastに変換する。独自実装したmdastを対応するhtmlの構文木に直す必要があるためだ。
### Components
remark-rehypeのhandlersで、hastをreact componentsに変換する。独自記法を直接htmlに直しても大丈夫なのだが、せっかくなのでreact componentsを実装しそれを利用することにした。
したがって、remark-rehypeのhandlersでは独自記法のMarkdownを独自のhtmlタグに直している。
## Markdownのレンダリング
以下のページにAzuma-ya.devで利用できるMarkdownの記法についてまとめた。
Markdownのすすめ | Azuma-ya's Portfolio
Azuma-ya.devが使用できるMarkdownの記法と使い方をまとめた。
# 終わりに
日々考えたこと、感じたこと、学んだことを発信していきたいと思う。