Next.jsでブログを作ってGitHub Pagesにデプロイした話
(どうでもいい) 背景
JavaScriptのフロントエンドフレームワークをこれまでまったく触ってこなかったので，触ってみたくなった． 食ったラーメンの記録とか技術系の備忘録をランダムに記録していく用にMarkdownで記事を書くブログを作ることにした． GitHub Pagesでホームページとかも作ってみたかったのでそれのついでにブログもデプロイすることにした．
使った技術
Next.jsのテンプレートのblog-starterをベースに使って開発を始めた． そのため使った技術はこのあたり．
-
TypeScript
TSはじめて触ったけどやっぱ型付けはあったほうがいいって再確認．
-
Next.js
TSX使うとTSの中でHTMLが書けるのが新鮮でめっちゃ面白かった．
-
Tailwind CSS
クラス名でスタイルを色々指定できるのはめっちゃ便利． だけどデフォルトで箇条書きの点とか消されてるのはきもいし，通常のCSSの書き方をしたファイルを使うところで躓いた
Markdownのパース & 変換にはremarkとrehypeを使っている． プラグインでGFMに対応とかコード部分のシンタックスハイライトとか色々できるので便利．
ブログの設計・デザイン方針
備忘録とかを適当にあげるだけのブログなので特に特別な機能はつけずに，デザインもなるべくシンプルを目指した． 記事部分のスタイルはGitHubのMarkdownの表示をベースにしている． というかGitHubで使われてるCSSをほぼまんま使ってる． あと，GitHub Pagesは静的なサイトしかデプロイできないので，難しいことはあまりできない．
Markdownパーサ
先述の通りMarkdownパーサにはremarkを使ってrehypeでHTMLに変換している． GitHub Flavored Markdown (GFM) に対応するためにremarkのプラグインであるremark-gfmを， シンタックスハイライトを使うためにrehype-highlightを， 目次のためにrehype-slugとrehype-tocを噛ませている．
rehype-highlightは内部的にhighlight.jsを使っているのでhighlight.jsのGitHubテーマを使っている．
目次の生成
目次の生成にはrehype-tocを使っているが，目次が生成される位置が記事と同じdivタグ内はデザイン上嫌だったので次のようにしてあげることで，目次のASTをtocNodeでゲットできる．
let tocNode = null
const result = await unified()
:
:
.use(rehypeToc, {
nav: false, // no wrapping with nav
customizeTOC: (toc) => {
tocNode = toc
return false
},
})
:
:
.process(markdown)
ASTをHTMLに変換するにはhast-util-to-htmlを使えばHTMLの文字列で得られる．
GitHub Pagesへのデプロイ
GitHub Pagesへのデプロイの準備の手順はこんな感じ
- GitHubのrepoのSettings -> PagesでSourceをGitHub Actionsにする．
- たぶんサジェストでNext.js用のGitHub Actionsのテンプレートが表示される (されなかったらNext.jsで検索する) のでそれを選ぶとyamlを編集できる．
- 特にこのyamlは編集する必要はないので右上のCommit changes...を押す．
これでこのrepoのmainブランチにプッシュされるたびに自動でActionsが走りサイトが静的ビルドされGitHub Pagesにデプロイされる． (GitHub Actionsのだんだん実行されていく感じ見てて楽しい) ビルドされたサイトはブランチとは別の場所に保存される．
感想
TypeScriptのプログラムの中に直接HTML書けるのが画期的でめっちゃ面白かった． 次はサーバとのやりとりとかするようなサイトも作りたい．
今後追加したい機能とか
-
前後の記事へのリンク2023-10-12に追加！ -
記事一覧ページのページネーション機能2023-10-05に追加！ -
記事のタグ機能
- タグをクリックするとそのタグを含んだ投稿の一覧が見れる & ページネーションもされる
-
Next.js 13への対応
blog-starter自体がNext.js 13より前の書き方で書かれているので，13の書き方に変更したい．