accelf.netをリニューアルしました!

By: kyori
Posted: February 22, 2021

notion-blogを利用してほぼすべてのコンテンツをNotionから更新できるように実装しました

サイトとかブログの更新って基本的にめんどくさいよね!

Motivation

旧accelf.netはPython製テンプレートエンジンのstaticjinja + ほぼHTML手打ちで構成されていたんですが、これの更新がとてつもなく苦痛だったというのが一番の理由です。

あと自分はブログを書くたびに新しいブログエンジンを立ち上げたくなってしまう病を患っているので、またブログを立てたい気分になっていたという理由もかなり大きかったと思います。

適当なCMSで記事を書いて静的サイトとしてデプロイする的な構成をやってみたいなと思っていたところにnotion-blogを発見してしまったので、これはやらざるを得ないと思いリニューアルに着手しました。

(ちなみに同じような仕組みでScrapboxをCMSにするやつを検討していたのですが、APIがつらそう(5%)だしめんどくさい(95%)という理由でやめました。)

自分はNuxt.js教でReactなんもわからんだったのですが、Reactやらんとなぁ(即挫折)していたこともあり、Next.jsならちょうどいいやということで頑張りました(Next.jsを勉強しなきゃいけない用事があったのもある)。

notion-blogとは

長ったらしい前置きはさておいて、notion-blogについて少し説明を入れておきます(正直Next.jsもVercelもNotionも何もわかってないのでこの記事の内容が間違ってたら教えてください。こっそり修正します)。

notion-blogではNotion上で記事を書くとアクセスに応じてNotionのAPIを叩いて記事を表示することができます。Next.jsのIncremental Static Generationを利用して、アクセスがあった際に必要に応じてAPIを叩き、ある程度キャッシュするという挙動をするようです。

ブログ自体はVercelでデプロイしておけば良く、記事の更新時には再度ビルドしたりする必要がないのが非常に優秀です(デザインの変更などのためにソースコードを変更した場合のみデプロイが必要です)。

notion-blog自体はNotionから記事を取得して表示する仕組みしか提供していないため、実際にブログとして使用するためにはフォークしてトップページなどをReactで実装しなければならないのが難点でしょうか。

本題とは全く関係ないんですが、notion-blogが使っているAPIはNotionのWebアプリで利用されている、仕様が公開されていないAPIです。ところがどうやら最近になってNotionがパブリックAPIの提供を目論んでいるんだとか。もうちょっと早く公開してくれたらクソみたいなAPIと格闘しなくて済んだのになぁ…

いざ改造!

どうせ改造しなきゃいけないなら全コンテンツをNotionで更新できるようにしたいという邪心が芽生えてしまいました。改造メニューはこんな感じです。

  • /[[...slug]](Optional catch all routes)のNotionからの生成 (これでサブディレクトリも含めて全URLをNotion上から編集できる状態になります)
  • Notionからヘッダーに表示するページの設定
  • しっかりと型をつける

何故か改造をしていたら型付けをしたくなってしまい、改造にかかった時間のほぼすべてをそこに費やしてしまいました。notion-blogはほとんどの変数をanyで定義するというラフさを見せていたのですが、コンポーネント化とかを考えていたらちゃんと型が欲しくなったという。静的型付け言語erの宿命なのでしょうか…←違うと思う

実は改装に時間がかかりすぎているのでこの記事は改造中にちょこちょこと書いています。本体が完成する前に中身を用意しておけるのはCMSの強み…なのかしら?スマホからでも普通に編集しやすくて助かる

An image from Notion※画像は開発中のものです

あまりにも気合を入れて型定義してるもんだからNotion API Type Definitionsっつってライブラリに出来るレベル(過言)

これまでのコンテンツ

これまで ((b|blog|me).)?accelf.net で公開してきたコンテンツは、全て accelf.net (このサイト) に移動されました(一部を除く)。

リンクが切れたりなどするかもしれませんがまぁ大丈夫でしょう(適当)

というわけで

改造のあとにはコンテンツをNotionに打ち込む作業が始まるわけですが、またそれは別のお話(ただの作業ゲー)。

ここまでNotion依存にしてしまうとNotionで書けるレベルの表現しか出来ないのが欠点かもしれませんが、更新のストレスとかを考慮するとこれで良いんじゃないかと思います。(ちなみにNotionの文章のパーサは100%自前で実装しているものなので、やろうと思えば独自文法の導入とかもできないことはないです。)

とにかく、しばらくはサイトの更新のためにエディタを開いてHTML(あるいはJSX)と格闘しなくて良いというのは非常に気が楽ですね。

次の目標はMastodonのAPI叩いて疑似コメント欄を再現するやつをやることかなぁ、設計は考えてあるし…(しばらくJSXと格闘しなくていいとはなんだったのか)