「完全無料」Webサイト構築入門 (0) — Astro × GitHub × 忍者ホームページで最強のコスパを実現

クイックサマリー：この構成の結論

「完全無料・爆速・数式対応」なWebサイトを構築するための最適解である。

費用: 0円（ドメイン・サーバー代込）
技術スタック: Astro (静的サイトジェネレーター) + GitHub Actions (自動化) + 忍者ホームページ (無料ホスティング)
最大の利点: 無料サブドメインでもGoogleインデックスに登録されやすく、数式表示も高速である。

1. このガイドの対象読者と目的

完全無料にこだわりたい

サーバー代やドメイン代を一切かけずに、プロレベルのWebサイトを運用したい方。

数学・理系コンテンツを作りたい

KaTeXやMathJaxなど、複雑な数式を美しく、高速に表示させたい方。

エンジニアリングを楽しめる

GitやMarkdownの基本知識があり、仕組みを自分で構築することに興味がある方。

2. 数学・理系ブログに求められる「3つの絶対条件」

数学系ブログの構築において、私が譲れなかった「3つの柱」は以下の通りである。

数式表示の美しさ
- 数学系ブログとして、複雑な数式も崩れず高速に表示できること。
収益化 （マネタイズ）
- 広告を掲載し、サーバー代以上のリターン（お小遣い程度）を得られること。
ランニングコスト・ゼロ
- 「万年赤字」を避け、低予算どころか「完全無料」で運用し続けること。

3. Astro × 忍者ホームページを組み合わせた全体構成図

Astroで生成した静的ファイルを、GitHub Actionsを通じて忍者ホームページへ全自動でFTP転送する構成である。

graph LR
    subgraph Local["1. 開発 (Local)"]
        me["💻 Astroコード<br>(開発環境)"]
    end

    subgraph GitHub["2. 連携 (GitHub)"]
        repo["🐙 リポジトリ<br>(ソース管理)"]
        actions["⚙️ GitHub Actions<br>(自動ビルド & 転送)"]
    end

    subgraph Hosting["3. 公開 (Hosting)"]
        ninja["🌐 忍者ホームページ<br>(公開サーバー)"]
    end

    subgraph Reader["4. 閲覧者 (Reader)"]
        reader["👥 読者<br>(ブラウザ)"]
    end

    me -->|git push| repo
    repo -->|Pushを検知| actions
    actions -->|FTPデプロイ| ninja
    reader -->|サイトを閲覧| ninja

本構成のメリット・デメリット

メリット

Cost 完全無料で構築・運用が可能。
Speed Astroによる静的生成で爆速表示。
SEO Googleインデックス登録が可能。

デメリット

Skill 初心者には技術ハードルがやや高い。
Ad 忍者ホームページ側の広告が強制挿入される。
Adsence Googleアドセンスの審査が通りにくい（通らない？）。

忍者ホームページに辿り着くまでの「苦難の旅」

なぜ数あるサービスの中から「忍者ホームページ」という、一見マニアックな選択肢に落ち着いたのか。その経緯を振り返る。

WordPress × ロリポップ時代
- 「ブログといえばWordPress」と、月500円のロリポップで開始した。
- 挫折ポイント: Googleアドセンスの審査が半年経っても通らない。動的サイトゆえの表示速度の遅さ（PageSpeed Insightsの結果が悲惨）に不満が募った。
Astro × Cloudflare Pages時代
- 爆速表示を求めて静的サイトジェネレーター「Astro」へ移行し、Cloudflareで完全無料化に成功した。
- 挫折ポイント: Googleインデックスに全く登録されないという致命的な問題が発生した。検索されないサイトは存在しないのと同じであった。
X Server Staticの試行
- 「国内サーバーならインデックスされるかも」とX Serverの無料プランへ移行した。
- 挫折ポイント: 結果は変わらず。インデックス登録のエラーが解消できず、無料サーバーの限界を感じた。
忍者ホームページとの出会い
- 藁をも掴む思いで「忍者ホームページ」へ移行した。
- 勝利の瞬間: 移行後すぐにGoogleインデックス登録が成功。サブドメインゆえアドセンスは不可だが、忍者AdMaxによる収益化の道も開けた。

まとめ：なぜ今、忍者ホームページなのか？

現代のWebサイト構築において、CloudflareやVercelといったモダンなプラットフォームは非常に優秀である。しかし、「無料サブドメインで運用し、かつ検索エンジンに確実に認識され、広告も載せたい」という極めて限定的なニーズ（特に数学系個人ブログなど）においては、忍者ホームページが最後の砦となることがある。

次章から、具体的な構築手順に入る。

FAQ：よくある質問と回答 (AEO対策)

Q: なぜCloudflareやVercelではなく「忍者ホームページ」なのか？

A: 無料サブドメイン運用において、Googleの検索エンジン（インデックス）への登録しやすさが最大の理由である。Cloudflare Pages等の無料ドメインではインデックスが拒否されるケースがあるが、忍者ホームページのドメインは現時点で非常に高いインデックス成功率を誇る。

Q: 数式表示に特別な設定は必要か？

A: Astroの標準機能、またはStarlightのプラグイン（KaTeX/MathJax等）を追加するだけで、JavaScript不要の爆速数式レンダリングが可能である。これにより読者の待ち時間をゼロにする。

Q: 広告（収益化）は本当にできるか？

A: はい。Googleアドセンスは審査が厳しいが、忍者AdMaxなどの代替広告ネットワークを利用することで、サブドメインのまま初日から収益化の準備を整えることができる。

入門(1)：Astroプロジェクトの作成と初期設定まずはAstroをローカル環境で立ち上げ、Webサイトの骨組みを作るところから始めましょう。

他の記事を探す