このサイト(2021/02/22 時点)がまさにそれです。
Jekyll で作ったやつを使っていましたが、画像を.mdと同じディレクトリに置けなかったり色々不便だったので React の勉強がてら GatsbyJS で作り直してみました。
マークダウンで書いた記事をいい感じに表示することができます。
作業
公式のチュートリアルを読みながら雰囲気で頑張りました。
https://www.gatsbyjs.com/docs/tutorial/
GraphQL について調べる
公式ドキュメントで雰囲気をつかもうと思ったらまさにやりたいことが書いてあった。
Adding a List of Markdown Blog Posts | Gatsby
ブログ用のひな形もあったのでソースコード読んで参考にしました。
https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog
旧ブログから記事の移動
適当にスクリプト書いて今回のディレクトリ構成に合わせてファイルをコピーしただけ。
画像の表示
.mdから同じディレクトリ内に置いた画像を相対パスで表示するためにプラグインを追加。
ドキュメントの通りにgatsby-config.jsに追記するだけで動きました。
Embed の表示
React のレンダリングの関係上<script>タグなどが動かないのでプラグインを追加。
シンタックスハイライト
技術系のブログなら必須かなと思ったのでこれまたプラグインを追加。
PrismJSを使っていて別途 CSS を読み込む必要があったので、CSS 内で
@import "https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-highlight/prism-line-highlight.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.css";みたいな感じで CDN の CSS を読み込むようにした。
prism-line-numbers.min.cssを読み込まないと行数表示が出来ないので注意が必要。
ついでに CSS でmax-heightとかpadding周りの調整もしておいた。
HTML メタデータの更新処理を追加
これまた公式ドキュメントにちゃんと書いてあります
https://www.gatsbyjs.com/docs/add-page-metadata/
gatsby-starter-blogのseo.jsもめっちゃ参考になりました。
https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/src/components/seo.js
おわりに
GraphQL が思った以上に奥が深くて Query の書き方とか仕様もまだ完全に把握できていません。
ひとまず動くようにはしましたがタグとかサムネイルの実装も気が向いたらやってみようかなと思います。
ソースコードは…内緒です。
以上です。