個人サイトを構築し直すのメモ

ありしま
·
公開:2026/2/13

今回はAstroというウェブフレームワークを使い、Github連携をしながら、Cloudflare Pagesでフロントエンドを開発していくこととする!

前回のテーマはベタhtmlでカステキストを書くのを目的にしてたけど(いにしえのホームページ感)、今回は勉強のために最新トレンド(?)のフレームワークを使ってちゃんと作り直しましょうねぇ~!という感じだ。


目標

  • なんかいい感じの個人サイトつくりた~い

  • html,javascript,phpまでは触ってるけど他の言語が全くしらんので(これを機会に頑張りたい)

  • できれば無料で目指す

  • ちなみに作り方は現代的にググれカスではなくGeminiに聞くことにする

まず用意したもの

  • VScodeを導入した

    ずっとテキストエディタに悩んでいたけど使ってみたところ今のところ使いやすい!君に決めた!

  • Geminiに課金した

    意味があるのかわからんけど

今回の構成をGeminiにまとめさせる

🚀 Discord × Astro × Cloudflare 構成まとめ

1. 入力層(CMS・管理画面)

  • プラットフォーム: Discord

    • 役割: 記事の執筆、画像のアップロード、データの編集。

    • 利点: UIを自作する必要がなく、スマホ・PC両方から最高に使いやすい投稿環境が手に入る。

    • 推奨形式: 「フォーラムチャンネル」を使うと、タイトル+本文+タグという構造化された投稿がしやすい。

2. 連携・中継層(API)

  • プラットフォーム: Astro (API Routes / Pages Functions)

    • 役割: DiscordからのWebhook(またはBotイベント)を受け取る窓口。

    • 処理内容: * テキストの抽出と整形。

      • Discord上の画像URLをフェッチして、実データをストレージへ転送。

      • DBへのメタデータ書き込み。

3. ストレージ・データベース層(保存先)

  • 画像保存: Cloudflare R2

    • 役割: 画像ファイルの実体保存。

    • 利点: Googleドライブと違い、爆速で直リンク可能。10GBまで無料かつ「配信転送量」が無料。

  • テキスト保存: Cloudflare D1 (またはさくらのVPS上のMySQL)

    • 役割: 記事タイトル、本文、R2の画像URL、投稿日時などの保存。

    • 利点: SQLで柔軟に検索・抽出が可能。

4. 表示層(フロントエンド)

  • プラットフォーム: Astro (SSG または SSR)

    • 役割: 保存されたデータを読み込んで、ユーザーに見せるウェブサイトを生成。

    • デプロイ先: Cloudflare Pages

    • 利点: JSを最小限に抑えた爆速なサイト。D1からデータを読み込んで一覧ページや詳細ページを自動生成。


この構成のメリット

  • 維持費がほぼ0円: Cloudflareの無料枠が非常に強力なため、個人規模ならサーバー代がかかりません。

  • 開発の効率化: ログイン機能や投稿フォームの実装をショートカットし、「サイトの見た目」や「コンテンツ」に集中できます。

  • 拡張性: 後から「特定の絵文字がついた投稿だけ公開する」といったフィルタリングも、Astro側のコード一行で制御可能です。

いきなり本番ではなくてテストでプレビューするためのやつ

Branch control で自動的にmainにpushされたものがデプロイされるようになってるのでこれを外す

Automatic deployments:Disabled

Cloudflareの [Deployments] 画面で、そのプレビューデプロイの右側にある [Promote to production](本番に昇格)というボタンを押す。

DBは本番と共通のを参照してるのでテスト環境でもデータ消すと本番でも死ぬから注意してとgeminiがいってた(いい話)

写真をいくつかあげるのでストレージを考えるけど

geminiの提案はこうである……カス呼ばわりも反映しててなかなかよい

カスが選んだのは「cloudinary」でした

よくわからないけど登録した

slack連携は爆速でしたのにDiscord連携が時間かかる

ん~~~~~~~~~~エンドポイントを自分で作ったりするせいなのか時間かかるクソがーーーーーーーーーー!!

あまり疲れたのでお嬢様になってもらって作業してるんだけど全然うまくいかなくてワロテル

せめてdiscordから投稿できるようになりてぇよ

@arismmn
それじゃ私、早乙女学園にいくね @arismmn