tsukurun-Lab

このサイト tsukurun-Lab を、Codexと一緒に少しずつ作り直したときの記録です。

Node.jsやAstroの更新、Cloudflareでのビルド、BlogをNotionらしく見せるための調整まで。やったことと、つまずいたこと、そして最初の一歩を残しておきます。

このサイト tsukurun-Lab は、2023年の春ごろに otoyo/astro-notion-blog のかなり古いバージョンを取り込んで、TOPページを自分用にいじってみたところから始まりました。たぶん 0.4 系あたりがベースだったと思います。

Notionで書いたページがそのままBlogになって、Astroで静的に書き出せる。それだけのことが当時はすごく楽しくて、まずは「自分のサイトとして動く」形を作ってみたのを覚えています。

そもそも、この astro-notion-blog をつくってくださったのは おとよ さんです。Notionで書いたものがそのままブログになる、というこの仕組みがなければ、このサイト自体が始まっていませんでした。いつも本当にありがとうございます。

見た目の部分は、tsukurun-Labのデザインを手伝ってくださった mineral_30 さんが形づくってくださいました。TOPページ、画像、parallaxの動き、レスポンシブ、色味まで、いまのサイトに残っている空気感は、ほとんどあの頃につくっていただいたものです。

ただ、その後は日々の制作やテンプレートづくりのほうを優先してしまって、サイト自体のメンテナンスはずっと止まっていました。Node.jsもAstroも、Cloudflare Pagesのビルド環境も、GitHub Actionsも、気づけば少しずつ古くなっていて…。

今回はCodexと一緒に、その止まっていたサイトをもう一度動かして、今の tsukurun-Lab の雰囲気に合わせて育て直すことにしました。

きっかけは本当に小さくて、「Cloudflare Pagesで再デプロイしようとするとエラーになる」「ローカルでもNotionの設定が足りなくて npm run build が通らない」という、ただそれだけのことでした。

でも、いざ触りはじめると、やりたいことがどんどん増えていって。

最初は「動けばいい」だけのつもりでした。

でも気づけば、Node.jsとAstroのバージョンを上げて、Cloudflareのビルド環境に合わせて、TOPページも今の雰囲気に直して…。

テンプレート一覧の更新や、BlogをNotionらしく見せる調整まで、サイト全体を作り直すような作業になっていました。

我ながら、いつものパターンだなと思います。

まずCloudflare側でビルドが落ちていたので、Node.jsのバージョンから見直しました。最終的に Node.js 22.16.0 に揃えて、 .nvmrc と package.json の engines 、Cloudflare Pages側の NODE_VERSION も同じバージョンに合わせています。

Astroはいったん3系まで上げてビルドが通ることを確認してから、Blog周りを直したくなって5系まで移行しました。あわせて @astrojs/rss などを更新して、もう使っていなかった古いReactのホームコンポーネントや react-spring は思い切って消しました。

ここはけっこう手こずりました。

Cloudflareでは metascraper 系の依存が原因で、 re2 や node-gyp 、Pythonの distutils あたりのエラーに当たってしまって。本家の astro-notion-blog は、Bookmark表示のためにこの metascraper でリンク先のタイトル・説明・画像を取ってきています。

ただ、Cloudflare Pages上だとこの依存が重くて、ビルドが落ちる原因になっていました。

なので今回は metascraper は戻さず、OGPのメタタグだけ軽く読む自前の処理に置き換えました。BookmarkやLink PreviewはNotion風のカードに近づけつつ、Cloudflareでビルドしやすい形を保てたと思います。

GitHub Actions側も、古いworkflowがまだ yarn やNode 16のままだったので、今のnpm運用に合わせて npm ci / Node 22.16.0 / npm run lint / npm run build に直しました。

TOPページも、今の tsukurun-Lab らしい見た目に更新しました。

ここで大事にしたかったのは、Notionを完璧に使いこなすことではなくて、毎日少しずつ、自分らしく楽しめる形を見つけていく、という感じです。見出しや説明文も何度か書き直して、最初はちょっと強く聞こえる言葉もあったのですが、最終的には「無理なく、少しずつ、自分に合う形を見つける」くらいの温度に落ち着きました。

テンプレート一覧にも、これまで公開していたものに加えて新しいものを足しています。

• Spark Brain OS Pro
• Spark Brain OS Lite
• Color Palette
• Font Chooser
• Themes / Goal Management
• Themes / Goal Management Lite

サムネイルは、カードの中で切り取ってしまうと見切れて寂しくなるので、トリミングせずに余白を持たせて並べる形にしました。

今回いちばん時間をかけたのは、やっぱりBlog本文の表示でした。

最新の astro-notion-blog を見てみたら、昔のバージョンよりずっとNotionに近い見た目になっていて。そこで、TOPページは tsukurun-Lab の世界観を保ちつつ、Blog本文のNotionブロックは最新版に寄せていく、という方針にしました。

直したブロックは、たとえばこのあたりです。

• Heading 1 / 2 / 3
• Numbered List
• Callout
• Code block
• Mermaid diagram
• File
• Link to page
• Link Preview / Bookmark
• Table
• Pinterest / Instagram / TikTok / CodePen などのEmbed

Numbered Listは、階層ごとに 1, 2, 3 → a, b, c → i, ii, iii と変わるようにして、CalloutはNotion側で設定した絵文字アイコンがちゃんと出るようにデータの変換も直しました。Mermaidは、Astroのページ遷移のあとでも描き直されるように。FileやLink to pageも、本家に近い見た目に寄せています。

地味な作業の積み重ねでしたが、自分の書いたNotionがそのままきれいに表示されるのは、やっぱり嬉しいです。

Embed系は、正直いちばん苦戦しました。

Twitter、Instagram、TikTok、Pinterest、CodePenあたりは、HTMLを置くだけでは表示されなくて、それぞれの外部スクリプトが動いてはじめて埋め込みとして出てきます。

しかもAstro 5の ClientRouter を使うと、ページ遷移のあとに外部スクリプトが思ったように再実行されなくて。最初は、ページを開いた直後は埋め込みが出ないのに、F5で更新すると出てくる、という不思議な状態になっていました。

これは data-astro-rerun を使って、ページ遷移のあとにも外部ウィジェットを初期化し直すことで直りました。Pinterestは、Notion上だと中央に表示されるので、埋め込みも中央に寄るようにCSSを調整しています。

Astroのいいところは、静的生成による表示の速さだと思っています。

ただ、外部埋め込みが多い記事だと、どうしても重くなってしまう。Astro本体のHTMLは速くても、InstagramやTikTok、Pinterest、CodePenみたいな外部スクリプトやiframeは、見るときにそれぞれ読み込まれるからです。

なので、埋め込みをたくさん置くときは、表示速度とのバランスを見ながら使うのがよさそうだなと。いつかは「クリックしたら読み込む」みたいな形も試してみたいです。

今回の作業、もしひとりでやっていたら、たぶん途中でかなり詰まって、時間も掛かりすぎて、正直どこかで諦めていたと思います。。

Node.js、Astro、Cloudflare、GitHub Actions、Notion API、埋め込みスクリプト…と、触る場所が多くて、ひとつ直すと別のところでエラーが出る、みたいな作業でした。

それをCodexに相談しながら進められたことで、エラーをひとつずつ分解して、「今どこで詰まっているのか」を確認しながら進められました。Gitのコミットやpush、ブランチを切ること、PRの向き。このあたりは自分でもまだ慣れていなくて。

そこも一緒に確認しながら進められたのは、本当に助かりました。

そして何より、思っていたことが少しずつ形になっていくのが、すごく楽しい・・・！！

今回で、サイトの土台はだいぶ整ってきました。

次にやりたいのは、実際にNotionテンプレートの紹介記事を書いていくことです。SUZURIの販売ページに頼るだけじゃなくて、そのテンプレートを作った理由とか、こう使うといいかも、みたいなことを、自分の言葉で少しずつ残していきたいなと思っています。

それと同時に、Blogとして読みやすい場所にしていくための見直しも進めたいです。長い記事のための目次、まだ対応できていないNotionブロック、記事一覧やサイドバーを含めたサイト全体の整理…やりたいことはまだまだあります。

Stripe決済みたいなこともいつか整えたいですが、まずはこのBlogを、作ったものや考えたこと、試行錯誤のログを置いていく場所にしていきたいです。

今回の作業は、 codex/upstream-blog-renderer という別ブランチで進めて、Pull Requestを作って main に取り込み、Cloudflare Pagesで再ビルドされるところまで確認しました。

この記事は、その一連の作業をBlogとして残す、最初の投稿です。

古くなって止まっていたサイトを、Codexと一緒に少しずつ動かし直して、実際にサイトへ反映するところまで。ここをひとつの区切りにして、これからまた、 tsukurun-Lab を自分のペースで育てていきたいと思います。