Nanobanana Icon

Tech Blog

WordPress不要！モダン技術とAntigravityで始める無料ブログ構築ガイド

2025-12-01（月）

WordPress不要。ドメイン以外無料で運用できるブログ構築ガイド

このブログ環境は、すべて無料枠で利用でき、必要な費用は「ドメイン代のみ」です。
Windows ユーザー向けに、最小構成でブログを公開する手順をまとめました。一緒にやってみましょう！

使用サービス

GitHub

コードの保管と Cloudflare Pages への自動デプロイに使用します。エンジニアの標準ツールですが、ブログ運用にも非常に便利です。

https://github.com/

Cloudflare Pages

11ty（Eleventy）を自動ビルドし、ブログを無料でホスティングします。

  • 高速: 世界中のCDNから配信されるため、表示が爆速です。
  • 無料: 個人利用の範囲なら、帯域幅やビルド回数を気にせず無料で使えます。
  • HTTPS対応: 面倒な設定なしで、最初から安全な通信が可能です。

アクセス方法: コンピューティングとAI → Workers & Pages
https://dash.cloudflare.com/

Cloudinary

無料枠で使える画像ホスティングサービスです。画像を最適化して配信してくれるため、サイトの表示速度を落としません。

アクセス方法: Assets → Media Library → Assets
https://console.cloudinary.com/

Antigravity

Google が開発した、AI ネイティブな次世代コードエディタです。 単にコードを書くだけでなく、AI エージェントが「コードの生成」「エラーの修正」「コマンドの実行」をサポートしてくれます。

ダウンロード: https://antigravity.google/download

事前準備（Git・Node.js・SSH設定）

ブログを構築する前に、以下の準備が必要です。

  1. Git と Node.js のインストール
  2. Git の初期設定（user.name / user.email）
  3. SSH 鍵の生成と GitHub への登録

詳細手順は以下の記事にまとめています。まずはこちらを済ませておいてください。
→ 【Windows】GitHubのSSH設定手順 - 初心者向け

プロジェクト開始手順

1. GitHub でリポジトリを作成

まずは GitHub で自分のブログ用リポジトリを作成しましょう。

  1. GitHub にログインし、右上の「+」から「New repository」を選択。
  2. Repository name に好きな名前（例: my-blog）を入力。
  3. 「Private」を選択し、「Create repository」をクリック。 ※ Cloudflare Pages は Private リポジトリとも連携できるので、無理に公開する必要はありません。

2. Git Clone

作成したリポジトリをパソコンにダウンロード（Clone）します。 Windows の PowerShell を開いて実行してください。

git clone https://github.com/xxxx/your-blog.git
cd your-blog

ダウンロードできたら、そのフォルダを Antigravity で開きます。

3. 11ty プロジェクトの初期設定

Antigravity で開いたプロジェクトに、11ty（Eleventy）のプロジェクトファイルを作成します。 Antigravity のチャットで以下のように指示してください。

AIへの指示例:

「11tyのブログプロジェクトを作成して。package.json、.eleventy.js、src/index.njk、src/layouts/base.njk、src/posts フォルダを作ってください。」

AIが必要なファイルを自動で生成してくれます。または、以下のリポジトリをベースにすることもできます。

[!TIP] Antigravity を使えば、複雑な初期設定も AI に任せられるので、初心者でも安心です。

4. パッケージのインストール

ブログシステム（Eleventy）を動かすための準備をします。 ここからは Antigravity 内のターミナルで実行してもOKです。

PowerShell -ExecutionPolicy RemoteSigned npm install

ExecutionPolicy はセキュリティ設定ですが、このコマンドの通り入力して問題ありません。

ローカルサーバー起動

自分のパソコン上でブログを表示してみましょう。

PowerShell -ExecutionPolicy RemoteSigned npm run serve

ブラウザで http://localhost:8080 にアクセスして、ブログが表示されれば成功です！

操作メモ

  • Ctrl + C … サーバー停止
  • ↑（上矢印）… 前のコマンドを復元
  • Ctrl + @ … ターミナル表示
  • Ctrl + L … チャット欄の ON / OFF
  • Ctrl + Shift + L … 新規チャットを開始

Cloudflare Pages との連携

ローカルで動作確認ができたら、次は Cloudflare Pages と GitHub リポジトリを連携して、インターネットに公開しましょう。

1. Cloudflare Pages にアクセス

Cloudflare のダッシュボードにログインします。

https://dash.cloudflare.com/

左メニューから「Workers & Pages」を選択します。

2. プロジェクトを作成

  1. 「Create application」→「Pages」→「Connect to Git」をクリック
  2. GitHub アカウントと連携（初回のみ）
  3. 先ほど作成したリポジトリ（例: my-blog）を選択

3. ビルド設定

以下の設定を入力します：

  • プロジェクト名: 好きな名前（例: my-blog）
  • ビルドコマンド: npx @11ty/eleventy
  • ビルド出力ディレクトリ: _site

「Save and Deploy」をクリックすると、自動でビルドが始まります。

4. デプロイ完了

数分待つと、デプロイが完了します。 https://your-project.pages.dev のような URL が発行されるので、アクセスしてブログが表示されるか確認しましょう！

[!IMPORTANT] 以降は、GitHub の main ブランチに push するたびに、自動的に Cloudflare Pages がビルドして公開してくれます。

作業フローの全体像

1. 記事を書く

Antigravity で Markdown ファイルを作成します。AI に「記事の構成案を出して」と頼むのもおすすめです。

2. GitHub に push

変更を保存し、GitHub に push します。

3. Cloudflare Pages が自動ビルド

GitHub の main ブランチに push されると、Cloudflare Pages が自動でビルドを開始します。

4. 公開完了

数分待つだけで、ブログが自動で更新されます。サーバーへのFTPアップロードなどは一切不要です。

画像の扱い（Cloudinary）

Cloudinary に画像をアップロードし、URL を記事の Markdown に貼り付けます。 これでサーバーの容量を気にせず、高画質な画像を記事に使えます。

パフォーマンス改善のポイント: URL の /image/upload/ の後ろに w_400,f_auto,q_auto を付けると、自動で軽量化・最適化されます。

例： https://res.cloudinary.com/dd2ivyxwt/image/upload/w_400,f_auto,q_auto/v1763648355/hero-bg_t9dyuh.png

フォルダ構成の例（11ty）

my-blog/
├─ package.json
├─ .eleventy.js
├─ src/
│  ├─ index.njk
│  ├─ posts/
│  │   └─ example.md
│  ├─ layouts/
│  │   ├─ base.njk
│  │   └─ post.njk
│  └─ assets/
│      └─ style.css
└─ _site/

まとめ

  • WordPress 不要: 重たい管理画面とはおさらばです。
  • ホスティング無料: お財布に優しい。
  • Antigravity: AIと一緒に楽しくブログ運営ができます。

PC と Google アカウントがあればすぐに始められます。ぜひ挑戦してみてください！