デジタル丸鋸。digimaru始動

プロフィール

広島在住アラフォー。Web技術と日曜大工を愛するエンジニア。

なぜ「digimaru」なのか

デジタルを中心とした知識整理。丸鋸で色々ぶった切って日曜大工するが、整理整頓と片付けが苦手。年も変わったことだし、今年は５Sを頑張ろうかとGeminiと対話しているうちにできちゃった。ありがとう、Gemini。

このブログのスタック

  • Framework: Astro v5
  • Hosting: Cloudflare Pages
  • Editor: VS Code

ホスティングサービスの比較検討

プログラミングが得意で、コストを最優先する場合の「静的サイトホスティング」候補を以下の通り整理した。 自宅は火災のリスクを背負いたくないのでなしで。

サービス名月額コストHTTPS特徴
Cloudflare Pages0円標準対応一番おすすめ。 高速、高機能、制限が緩い。
GitHub Pages0円標準対応GitHubのリポジトリと直結。手軽さは随一。
Vercel0円標準対応Next.jsなどを使うなら最適。商用利用は無料版制限あり。
AWS (S3+CloudFront)数十円〜手動設定自由度は高いが、Route 53などの維持費で月数百円かかる。

1. Cloudflare Pages（コスト重視のエンジニアに最適→採用！）

世界最強のCDN（コンテンツ配信網）を持つCloudflareが提供している。

  • 強み: 無料プランでも「帯域無制限」「商用利用OK」という破格の仕様。
  • バックエンド: Cloudflare Workers というサーバーレス関数を簡単にデプロイでき、そこでフォームのバリデーションやメール送信APIの叩き込みができる。
  • 向いている人: コストを0円に抑えつつ、仕事用のポートフォリオやビジネスサイトを作りたい人。

2. GitHub Pages（最もシンプル）

GitHubリポジトリにファイルを置くだけで公開される。

  • 強み: 設定がほぼ不要で、エンジニアにとって最も馴染みのあるフローで完結する。
  • 弱み: 動的な機能（バックエンド）を一切持てない。問い合わせフォームを作るには、必ず外部のAPIサービス（Formspreeなど）に頼る必要がある。
  • 向いている人: 凝ったことはせず、HTML1枚とCSSだけでサクッと公開したい人。

3. Vercel（開発体験が最高）

Next.jsの開発元が運営しており、世界で最も人気のあるホスティングサービスの一つ。

  • 強み: デプロイの速さ、プレビュー機能の使い勝手が抜群。
  • 弱み: 無料（Hobby）プランは商用利用が禁止されている。「サイトを通じて利益を得る」場合は月$20の有料プランが必須になるため、今回の「コスト優先」という目的からは外れる可能性がある。
  • 向いている人: Next.jsをフル活用して、最高の開発体験を味わいたい人。

ブログ構築手法の検討

Cloudflare Pagesでブログを構築するにあたり、エンジニアにとって最適な3つの手法を比較した。

1. 静的サイトジェネレーター (SSG) を使う（王道）

プログラミングが得意であれば、この方法が最もおすすめ。自分のPCでMarkdown形式の記事を書き、GitHubに push するだけでブログが更新される。

  • Hugo: Go言語製。ビルドがとにかく一瞬で終わる。テーマが豊富。
  • Astro: 今、最もエンジニアに人気がある。JavaScriptを最小限に抑えるため、表示速度が極めて速い。
  • Next.js / Nuxt: ReactやVueに慣れている場合。
  • メリット: データベース不要でコスト0円。全ページがHTMLとして生成されているため、瞬時に表示される（爆速）。

2. 「Headless CMS」と組み合わせる（管理画面が欲しい場合）

Markdownファイルを自分で管理するのが面倒な場合、記事の入稿だけを行う外部サービス（MicroCMSやContentfulなど）と連携させる。

  • メリット: スマホから記事を書きたい場合や、非エンジニアと一緒に運営する場合に便利。

3. Cloudflare独自のDB（D1）を使って「動的」に作る

最近のCloudflareは、D1 という分散データベースを無料で提供している。

  • メリット: コメント機能や検索機能など、リアルタイムな処理が必要な機能を自前で実装できる。

最終的な構成案：コスト最優先・エンジニア向け

検討の結果、「Astro + GitHub + Cloudflare Pages」 の構成を選択した。

  1. Astro でブログの骨組みを作る。
  2. 記事は Markdown (.md) で書く。
  3. GitHub にリポジトリを作る。
  4. Cloudflare Pages と連携。

これだけで、HTTPS対応・独自ドメイン運用・月間数十万アクセスまで無料のブログが手に入る。さらに、問い合わせフォームをCloudflare Workersで作ってブログ内に埋め込めば、理想通りの構成となる。