skip to content
私的歌詞倉庫

ブログをosmium + Vercelに引っ越しました

/ 3 min read

Updated:
Table of Contents

はじめに

Gatsby + GitHub Pagesで作っていたブログをosmium + Vercelに変えました。ついでにドメインも変更してみました。

https://github.com/osmium-blog/osmium

osmiumはNobeliumの進化系みたいなもので、Nobeliumと違いブログのfaviconやGoogle Analyticsのタグ設定などもNotionからできるようになっています。具体的には、Osmium Configurator を使って生成したJsonをosmiumのデータベースのConfigに貼り付けるだけで完了します。

https://github.com/craigary/nobelium

osmiumにした理由は以下の通りです。

  • Gatasbyのマークダウンの記事管理が面倒
    • osmiumはNotionで記事管理をします
  • デザインがシンプルでかっこよかった
  • 記事を書き始めるまでの設定と、Google Analyticsなどの連携が簡単にできる
  • 記事別の画像付きOGPを自動で生成

設定は基本的にREADMEに従ってしましたが、一部コードを変更した箇所があるのでそこも含めて紹介したいと思います。

変更箇所

デフォルトのosmiumは一部のコードのシンタックスハイライトの設定が入ってません。prismを使ってシンタックスハイライトをしているので、足りない言語の設定をosmium/components/notion-blocks/code.tsx に追加しました。自分はRuby、TypeScript、Kotlin、Groovy、TOMLなどの設定を追加しました。

RSSを出力するときにVercelのタイムアウト(10秒)に引っかかっていました。自分はホビープランのため、タイムアウトの時間は伸ばせそうになかったので出力する記事数を10から5に減らすことで対処しました。

const xmlFeed = await generateRss(posts.slice(0, 10))
const xmlFeed = await generateRss(posts.slice(0, 5))

終わりに

ブログをosmium + Vercelに引っ越しました。デザインもおしゃれで簡単にブログが始めれるのでおすすめです。

最初はNotionNextも試していたのですが、記事を管理するNotionテンプレートやコード内のコメントが中国語だったりで自分には難しくosmiumにしました。

https://github.com/tangly1024/NotionNext

記事を書く環境は整ったので、たくさん書きたいなと思います!

参考文献