Site cover image

Site icon imageやぎにいのノート

やぎにいちゃんのノートパッド

🗒️astro-notion-blogで簡単にアウトプットできるようにしてみた

今まで数々のブログを作っては葬り去り(もしくは放置し)を繰り返してきた自分が、最終的な答えにたどり着いたかもしれないという話。

今まで

生まれて初めて立てたブログはレンタルサーバーを借りてそこでWordPressを動かしてブログを作って運用していた。

しかし、普通に運用が中学生〜高校生の自分には辛かったのと、データベース接続確立エラーとかいう悪魔の文字列を1,000,000回見てメンテするのを諦めて放置してしまった。

そこからはちょっとパソコンわかるになってイキっていたので、静的サイトジェネレーターとかを使って、GitHubにMarkdownでコミットしてmainブランチにマージされたらCI/CDが走ってデプロイされるということをやっていた。

Middlemanから始まり、nextraやHugoなどを色々使ったりした。

これらは実はまだ残っていて archive-blog.yagi2.devrandom.yagi2.dev などに残っている。特に後者はめちゃめちゃ速度を意識していて、Next.js + Nextra + Vercelを使っている。

大体の技術スタックは、GitHubリポジトリでエントリを管理し、そこからCI/CDを経て生成物がAWS S3にアップロードされる形。S3のコンテンツはAWS Cloudflontを介していい感じにCachedされてデリバリーされている。意外とここでこういうまわりの知見が身についたと行っても過言ではない、

今メインでブログとして使っているのは blog.yagi2.dev なのだが、これは1周戻ってWordPressになっている。SSGでのMarkdown管理は良かったのだが、いかんせんフレームワークのメンテや、別に本業WebフロントエンドエンジニアではないのでCSSもろくに適用させることができず純粋に技術力不足でメンテができなくなっていた。

ブログくらいもっと楽にアウトプットしてえよという気持ちからWordPressに戻ってきた。記事を書くことだけに集中したかった。豊富なテーマやプラグインがそれを支えてくれる。

ただ、やっぱり重いのと、管理画面にログインしてよくわからんヴィジュアルエディターでPostを書くのは割と苦痛であんまり書かなくなってしまった。

Notionとの出会い

現職の会社に入社して初めてNotionを使い始めたのが出会いで、めちゃくちゃこういうのだよ〜〜〜と思った自分は個人のメモスペースもNotionに集約してしまった。

元々はMarkdownで書けるいろんなノートアプリ・サービスを使っていた(BoostnoteやInkdropなど)が、Notionくらいの機能の豊富さを持ちつつも、常に何か考えたら書き出せるというハードルの低さを併せ持つサービスはNotionだった。

Notionはページを外部公開できる機能があるので「これでブログとか運用するのええな〜」とはずっと思っていた。

astro-notion-blog

astro-notion-blogというotoyo氏が公開してくださっているこのリポジトリを見つけて、デモページを開いて「これじゃん!」となった。

Notionのデータベースにページを追加して、いくつかの必須項目プロパティを埋めてあとはいつものようにNotionにテキストを打ち込むだけ。

インフラ構成もCloudFlare Pagesを利用しており、しかも無料範囲に収まっている。

GitHub Actionsで1日1回定時デプロイを行うように設定すれば書いとけばあとはパブリッシュされるし、記事作成直後に公開したいなら手動でWorkflowをトリガーすればすぐデプロイが終わる。

Notionデータベースのプロパティで published というBool値のプロパティがあり、このチェックを外す/入れるだけで簡単に公開/非公開の

ができるのも良い。下書き自体もNotionの同一データベースで書けて、書き上がったチェックボックスにチェックを入れるだけ。

これからの運用

一応 blog.yagi2.dev がメインブログなのは変わらないのでこのブログのドメインは note.yagi2.dev にしたわけだが、正直そのうちもしかするとメインがこっちになる気がする(多分そうなる)。

でも1度ドメインをつけて公開したものは中身を変更するのに大きな傷みを伴うので、ドメインはこのままなんだと思う。

Notionはカジュアルに書けてしまうので、身の回りのことから、技術っぽいこととか色々雑に書いていければいいな〜という感じ。