🆓

【初期費用ゼロ】Notion + Fruition + Cloudflareで始めるブログ【独自ドメイン】

2024/07/03に公開

CAREER SKILLS の影響でブログを始めた。

物事をするときに努力するのではなく楽できる仕組みを考えたいのがエンジニアの性だ。
ブログを習慣化するためには執筆や投稿の負荷をできるだけ軽くするのが望ましい。

結論としてはNotionで記事を書いてFruition + Cloudflareで公開することにした。

やりたいこと

ブログの趣旨と私の趣味で以下のような要件が挙がった。

Notionはデフォルトで $\TeX$ が打てる。git管理はできないけどMarkdownも使える。プレビューと本番の表示の差異を気にする必要もない。

しかもヘッダー画像も自分で見つける必要がなく、Unsplashがシームレスに使えるのだ。

…あれ、これが答じゃね？

ただ独自ドメインで運用しようとした場合Notion siteは有料プランが必要で、年19800円かかるので費用面だけ何とかしたい。

そんなことを思ってちょっと調べてみたらいっぱい情報あるじゃん。

FruitionのデメリットはCloudflareのセットアップが必要なことだといっているが、こちとらWebエンジニアだ。恐るるに足らん。

お名前ドットコムでドメインは初年度無料で取得できた（xserverドメインのほうが更新料含めると安かったので移管しよう）。Cloudflareもfreeプランでいい。

上のQiita記事などを参考にちょいちょいっと設定すれば…はいできた！

というわけでほぼ望み通りの環境が初期費用ゼロで構築できてしまいましたとさ。ブログは継続できるかどうか確実じゃないので初期費用がかからないのは嬉しい。

ちなみにconsoleになにやらAPI呼び出しのエラーが出ているが、簡易的な個人サイトなので目をつぶろう。。。

すでにネット上にたくさん情報があるので今さら詳しいやり方を書かなくてもと思い、参考にした記事のリンクをまとめておく。

特筆することとしては、主に古い記事などでCloudflareでAレコードに 1.1.1.1 を設定すると書かれているが、そこは3つ目の記事を参考にしてnotion.soのIPアドレス 104.18.23.110 を設定する必要がある。

また、Fruitionのスクリプトはダークモードのボタンがおかしいらしく、ブラウザバックするとNotionのログイン画面に飛んでしまう。
それを避けるためにはworker.jsのaddDarkModeButtonを呼び出している行をコメントアウトする。

ページ右上に出るNotionアイコンの消し方はこちら。