AIに丸投げしてこのブログサイトを作った話

TL;DR

1. ニートだからお金がないよ！レンタルサーバーも借りられないよ！
2. そうだ！Cloudflareを使おう！
3. AIに丸投げするためにAIと要件をまとめたよ
4. 要件がバカスケールになってしまい、実際にできたサイトが激重だったよ！
5. 諦めて数ヶ月
6. デザインを大幅に変えるといっしょに別のフレームワークで作り直そう！要件も軽量なものしよう！
7. → 今このサイト
8. 今後はGoogleにindexしてもらうのが目標

はじめに

こんにちは！miyabittiです。こどおじニートです。

突然ですが、

と思いました。 でも、自分はニート、当然バイトすらしていないので本当にお金がありません。

レンタルサーバーを借りる資金すら無く、どうにかして無料で構築してみようと考えました。

本投稿では、このサイトの開設までの中身のない歴史を書いていきます。

個人開発の強い味方

ブログサイトを開設するにあたり、サーバーの費用は目を瞑ることができません。例えば、国内大手レンタルサーバー会社のWordPress込の月額料金は ¥500 ~ ¥1500 のものが多く、仕事をしている方なら問題なくPayできるレベルの料金ですが、ニートさんには死活問題レベルの料金です。

そんな人にとって強い味方である無料ホスティングサービス、探すとまぁまぁな種類がありました。

有名なところだと、以下のようなサービスがあります。

• Netlify
• Github Pages
• Vercel
• Firebase Hosting
• Cloudflare Pages
• etc…

では、この中でどれを選ぶのが良いのかですが、選定基準は無料枠の寛大さになります。

とりあえず以下の表を見てみてください。AIにまとめてもらいました。

この中で、無料枠の寛大さを考慮して残るものは、NetlifyとCloudflare Pagesですね。
転送量100GBは、よほどアクセスが多い、またはまじでありえんぐらいのクソデカページを配信しない限り到達し得ない量なので、問題にはなりません。
ビルド時間も、自分のPCでビルドしてしまえば制限にはかかりません。ではどちらにするか…

最終的にCloudflareを選びました。決め手は、既に Hono + Workers で apiサーバーを構築したことがある という理由でした。

要件を定義しよう

ブログサイトを構築するとなれば、記事を管理するために、CMS(コンテンツマネージメントシステム)がほしいです。最初は無料で使えるヘッドレスCMSサービスのmicroCMS

などを使おうかと考えたのですが、実際に使ってみると無料では非常に拡張性に乏しく、ちゃんと使おうと思ったら課金しないといけませんでした。

そこで、バカな自分は、CMSを自作しようかと思います。記事本文はZennの web editor が使いやすくて、md記法で書きたいと思っていたので、使用ライブラリ含めAIと壁打ちして要件を決めていきました。

• Nextや、CloudflareのCDNを活用し、表示が爆速であること
• Zennライクなエディタにすること

何をしてんの！？

はい、要件から分かる通り、Zenn風を意識しすぎてブログプラットフォームでも無いのにゴリゴリのWebアプリケーションを作ろうとしていました。

そして、実際にAIに丸投げして作り始めます。

最初のプロジェクトセットアップもAIに丸投げしていたら、open-next(Cloudflare Workers用)の方でセットアップしていて、一旦デプロイしてみようとしたらファイルサイズ制限のエラーが。特に、クライアントでレンダリングする必要がある管理ページがネックでした。

しかし、この時、Workersのファイルサイズ制限がPagesと同じだと思っており、まずは不必要な依存や、依存の動的読み込みを活用し、ファイルサイズを下げようとしました。

が、結局ファイルサイズ制限を回避することはできず。AIに相談したところ、WorkersとPagesでファイルサイズ制限が違い、Pagesのほうが緩いのと、特別な設定をしなくてもPagesでEdge Runtimeを動かすことが可能だということを知り、next-on-pagesに切り替えました。

その後、要件を実装しながら細かい部分の微修正を続けて、実際に完成させました。

AIに丸投げしていたのにも関わらず、出来上がるまでに2週間も要しました。

↓実際のリポジトリ

その後、実際に運用してみましたが、記事ページが激重。ものすごくパフォーマンスが悪く、ページ遷移遅い。

なぜそうなったのか

1. 無料でホスティングさせてもらっているからサーバーのスペックが低い
2. 面倒くさがってSSGをするためのCI/CDパイプラインを作らなかった → SSRで各ページが配信されていた
3. mermaidやKeXのレンダリングをクライアント側で行っていた + 不要な記事でもそれらのCSS/JSが読み込まれていた
4. 多分他にも大量にあるんだけどわかんない

自分のPC環境であれば、CPU資源が潤沢なこと、D1やR2も仮想的にローカルに作成しているので通信のオーバーヘッドが少ないことなど、表示のパフォーマンスが気にならない程度になっていたと考えられますが、実環境ではそんなにCPUが強いわけがなく、CDNを活用していても通信速度でローカルに勝てるわけがありません。

これらを含めた複数の要因から体感でわかるほどのパフォーマンス低下が見られたのだと思います。

疲れちゃった

もともと引きこもりで体力がない中、2週間ずっと10時間ぐらいAIとチャットしてにらめっこの作業を行って作ったサイトがゴミカスだったのでやる気をなくしました。 みんなには見られない、自分が使えさえすればいい管理者の部分に力を入れて作らせたのが今になって思えば本当にバカの極みだったと思います。

ワンチャン放置したらGoogleがindexしてくれないかな～って思って一応SearchConsoleに登録はしたものの、疲れちゃって記事も増やさなかったのでやはりインデックスはされず…

気がつけば4ヶ月経って12月になっていました。

作り直す

4ヶ月の間に、Nextの代わりに使える軽量なフレームワークが無いか調べてはいました。

そもそもの話、ブログサイトのような要件であれば、NextやNuxt(特にNext)は機能がベリースーパーオーバースペックすぎて、余計な機能のオンパレード、その分ビルドサイズもデカくなりがちなので使用すべきではありませんでした。完全にSSG用途で使えば強力なReactエコシステムが使用できるので、確かに選択肢に入るのですが、ただReactが使いたいだけならより軽量なReactRouterや、実はめちゃくちゃReact(厳密にはJSX)が使えるHono(フレームワークとしてHonoX)などもありますし、ブログサイトの用途では最強のSSGフレームワークであるAstroが使用できます。

しかし、自分が選んだのはSvelteKitでした。

なんでSvelteKit？

最初はビルドサイズをより小さくしてパフォーマンスを向上させるというモチベーションでwebエディター部分も含め完全に移植しようとしていたことでした。

Astroはコンテンツ表示中心のウェブサイトの構築に最適なので、複雑なユーザーの操作が伴う管理画面の構築には向いていないのです。

また、SvelteKitは、Nextのようなランタイムではなく、純粋なJSにビルドするコンパイラなので、よりビルドサイズを下げることができると考えたからです。

実際、管理者画面を途中まで実装したのですが、

ってようやく気がついてまた作り直し始めたのが理由です。

今思えば、新しい要件で作り直すなら圧倒的にAstroのほうが適していると思います。既に作った表示部分のSvelteコンポーネントを使うことだってできますし…

でも、

満足できるものになった

Astroで作ったほうが良かったなと結果的には思いつつも、現状のこのサイトも十分なパフォーマンスが出ていると思っていますし、Svelteの記法ともにらめっこできたので勉強にもなり良かったのかなと思います。おそらくAstroで作っていたらReactをそのまま使っていたでしょうからね。

Svelteの考え方はVueと似ている部分も多いらしい(Vueは触ったことがないから聞いたことがある程度)ので、もしかしたらVueやNuxtにも手を出してモダンフロントエンドの書き方わかるマンになれるかもしれませんね😀

脱線: Astroは全部使えるよ！

ちょっと脱線話ですが、Astroは主要なUIライブラリをすべてサポートしていて、React,Vue,Svelte,Solid,HTMXのコンポーネントで記述することができるそうです。

もし、自分のようにブログサイトがほしいと思っていて、これから作りたい方がいたらぜひAstroも選択肢に入れてみてください！公式のブログテンプレートもあって導入も簡単です。

このサイトについて

作り直した技術スタックやこだわった部分について紹介します。

技術スタック

デザイン

大部分をAIにつくってもらいました。自分が好きな色のパステルブルーをメインに使って世界観としては、“アホっぽいかわいさ”を再現してもらいました。本当に一部の細かい部分は自分で調整しています。

でも、パステルカラーに白文字でコントラストが確保できなくて泣いたのは内緒。見えづらいけど許しておくれ😭

ヘッダーアニメーション

GSAPを使って、スクロールに応じて見え隠れするアニメーションを実装してもらいました。スクロールしてみてね😀

Zenn風や独自マークダウン記法

Zennをパクっ参考にしたものやチャット風表示用の独自マークダウン記法を実装してもらいました。

メッセージボックス

:::message
これは情報メッセージです。重要なお知らせに使えます。
:::

↓実際の表示

:::message alert
これは警告メッセージです。注意が必要な内容に使います。
:::

↓実際の表示

折りたたみセクション

:::details クリックして展開
隠れたコンテンツがここに表示されます。
長いコードブロックや補足情報を隠すのに便利です。
:::

↓実際の表示

チャット風UI

:::chat-left
Hello world!
:::

↓実際の表示

:::chat-right
こんにちは、今日はどのような要件ですか？
:::

↓実際の表示

数式サポート

数式はLaTeX記法で記述できるようにしました。

$$
E = mc^2
$$
$$
{egin{bmatrix}1&2&4\2&5&6end{bmatrix}}
$$

↓実際の表示

インライン数式も $\alpha + \beta = \gamma$ のように書けます。

開発者ダッシュボード

執筆体験を向上させるため、開発環境専用のダッシュボードを実装してもらいました。

記事管理機能

• 公開記事・下書きの一覧表示
• 各記事へのクイックアクセス
• 公開状態のフィルタリング

メディア管理機能

画像をCloudflareR2へアップロードできるように実装してもらいました。以下のフローでアップロード、記事で使用できるようにしています。

1. ドラッグ&ドロップまたは選択でアップロード
2. sharp.jsを使用し、WebP変換用エンドポイントでファイルサイズ削減
3. Cloudflare R2 への自動保存
4. ワンクリックでMarkdown形式をコピー

記事の公開フロー

記事の公開は frontmatter の published フラグで制御しています。

---
title: "記事タイトル"
published: false # true にすると公開
---

開発環境では下書き記事もプレビューでき、本番環境では自動的に非表示になります。

テンプレート生成スクリプト

新しい記事のテンプレートを作成するスクリプトを書いてもらいました。以下のコマンドで使用できます。

bun run new-article --slug my-article-slug

これにより、デフォルトの frontmatter が含まれたテンプレートファイルが生成されます。

今後について

この記事を含め、サイト全体がみんなに見てもらえるようにGoogle先生にindexしてもらうことが目標です。 SEOについては本当に何も知らないので、コンテンツの書き方も学んで記事を増やしたりして育てていくとともに、勉強を進めたいと思っています。

AI検索時代に逆行しているようではありますが、GoogleにindexしてもらえなければAI検索ツールの参照元にもなれないので、そこを目標にこのサイトが成長できたらいいなと思っています。

まあこのドメインも取ったばっかりなのもあってしばらく時間がかかると思いますが、気楽に気長に運用していきますので、もしこの記事を見つけることができたら共有してくれると嬉しいです。