🚀Astro-notion-blog

Notion記事をAstroを利用してブログ化

🚀astro-notion-blog v0.4

本家のAstroも、このastro-notion-blogも進化が早く、どんどん機能が追加されて、頼もしい限りですね

astro-notion-blog v0.4がリリースされ、数々の変更点にて、デザインもNotionライクで、ますます洗練されてます

早速、今回もv0.3からv0.4へ移行してみました

v0.4ではデザインレイアウトがガラッと変更されましたので、レイアウトやCSSをカスタマイズしてた私の環境では、変更箇所が多すぎたため、v0.4の初期段階から構築開始です

移行とは言っても、.envや環境変数をv0.3のものに置き換えるだけの簡単さなんですがね

私の場合、Vercelで構築や独自ドメイン設定など、ほぼ佐藤さんと同じような環境なので、佐藤さんの記事を大変参考にさせていただいてます。(感謝!!)

構築に関して全て下記の記事に書いてあります

既にv0.4で構築されている八朔さんのastro-notion-blog

ノーコードで高速、しかも見やすいのは究極ですよね

記事の中で書かれている事は、正におっしゃる通りです。

こういったブログってカスタマイズできるのが楽しいというのはわかるのですが、ブログを継続するということに主眼を置いたときに、カスタマイズ>ブログ更新になってしまうと本末転倒というか。

私にメチャ刺さりましたわ (^^ ;;

気になった点
  • Vercelで下記のビルドエラー
file:///vercel/path0/dist/chunks/pages/all.f2ad99ae.mjs:1871
          ${post.Icon.Emoji ? post.Icon.Emoji : "\u{1F4C4}"}
                      ^
TypeError: Cannot read properties of null (reading 'Emoji')
    at file:///vercel/path0/dist/chunks/pages/all.f2ad99ae.mjs:1871:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async bufferHeadContent (file:///vercel/path0/node_modules/astro/dist/runtime/server/render/page.js:46:25)
    at async renderPage (file:///vercel/path0/node_modules/astro/dist/runtime/server/render/page.js:94:5)
    at async renderPage (file:///vercel/path0/node_modules/astro/dist/core/render/core.js:81:20)
    at async generatePath (file:///vercel/path0/node_modules/astro/dist/core/build/generate.js:288:18)
    at async generatePage (file:///vercel/path0/node_modules/astro/dist/core/build/generate.:112:5)
    at async generatePages (file:///vercel/path0/node_modules/astro/dist/core/build/generate.js:71:7)
    at async staticBuild (file:///vercel/path0/node_modules/astro/dist/core/build/static-build.js:68:7)
    at async AstroBuilder.build (file:///vercel/path0/node_modules/astro/dist/core/build/index.js:91:5) {
  id: 'src/pages/posts/[slug].astro',
  plugin: undefined,
  hint: undefined
}

絵文字関連でエラーが出てたようなので、Notion記事内で絵文字を使っているページを非公開にしたら、ビルドが通りました

  • ヘッダー画像がずれる

Notionのカバー画像とずれる

  • 記事内画像の取り扱いと最適化

Notion内で貼り付けている画像が、外部画像もPublicに保存されるようになったのかな?

高速化によるものかと思われますが、Publicに保存するのであれば、Imageコンポーネントで最適化されても良いように思えますが、現時点で最適化されていないようです

  • 検索フォーム

投稿記事が多くなってくると、やはり検索フォームが欲しくなります

Algolia検索をastroに導入できるようですが、私には敷居が高そうです (他力本願)

  • フッター配置

フッターがasideより前にあるので、スマホで閲覧した時に、メインの記事とサイドバーの間にフッターが来るのは不自然のような気がするが…

  • レイアウト崩れ FIX

記事の内容によって、右余白や記事内が折り返されなくレスポンシブが効かない

(min-width: 768px) ブレークポイント周り?)

原因は、上のコードブロックのようで、行数が長いと症状が起きる

  • 画像のサブパスが反映されない FIX

サブパスを設定し、ビルド後に静的ファイルが生成されるが、Notion内の画像だけサブパスが適用されない