ワンコマンドでブログ記事を書いて即公開！Claude Code × ロリポップで実現する最速デプロイ

2026年2月27日
2026年3月3日
AI活用

ブログを運営していると、記事を書くだけでは終わらない作業がいろいろ発生します。

たとえば、WordPressを使わずに自分でサイトを構築している場合、ひとつの記事を公開するだけでも多くの手順を踏んでいる方が多いのではないでしょうか。

まず記事の文章を書く
画像を用意する
HTMLやマークダウンでページをつくる
次に、サイト全体のデータを最新の状態に変換する（これをビルドと呼びます）
そして最後に、できあがったデータをレンタルサーバーにアップロードして、ようやく公開

正直、やることが多いですよね。書くこと自体は楽しくても、そのあとの公開するまでの手順が面倒で、つい記事の更新が止まってしまうという経験はないでしょうか。

もし、これらの作業をぜんぶまとめて、コマンドひとつで終わらせられるとしたらどうでしょう？

この記事では、AIコーディングツール「Claude Code」を使って、記事の執筆からロリポップへの公開までをワンコマンドで完結させる仕組みの作り方をご紹介します。プログラミングの知識がなくても大丈夫。手順どおりに進めれば、誰でもこの仕組みを作ることができます。

1 まずは完成形を見てみましょう
2 セットアップ手順
3 まとめ

まずは完成形を見てみましょう

Claude Code を起動して、以下のように入力します。

/lolipop-deploy レンタルサーバーで静的サイトを運用するメリットについて

たったこれだけで、以下のことがすべて自動で行われます。

記事の作成 – 指定したテーマでMarkdown記事を自動生成
サイトのビルド – Next.jsが静的HTMLファイルを生成
ロリポップへのデプロイ – SCPでサーバーにファイルをアップロード

コマンドを入力してから、ものの数十秒でブログ記事が公開されます。簡単ですね！

ちなみに、今回使用した技術の組み合わせを表にすると以下のようになります。

技術	役割
Claude Code	AIコーディングツール。記事の生成・コマンドの実行を担当
Gemini CLI	Web検索によるリサーチ。記事の正確性を向上
Next.js（Static Export）	Markdownから静的HTMLを生成するフレームワーク
ロリポップ（SSH/SCP）	静的ファイルをホスティングするレンタルサーバー

セットアップ手順

ここからは、ワンコマンドデプロイの仕組みを一から構築する手順を説明します。難しそうなことが書かれていますが、基本的には書いているとおりに実施していけば問題ありません。

準備: Claude Codeをインストールする

Claude Codeはnpmでインストールできます。

npm install -g @anthropic-ai/claude-code

インストール後、claude コマンドを実行するとAnthropicアカウントとの認証が始まります。
詳しい手順は公式ドキュメントをご確認ください。

ステップ1: ブログプロジェクトを作る

Claude Codeを起動して、プロジェクトの作成を指示します。

claude

Claude Codeが起動したら、以下のように入力します。

Next.jsでMarkdownブログを作ってください。
- Static Exportで静的HTMLを生成する構成
- content/posts/ 配下にMarkdownファイルを置く形式
- フロントマターでtitle, date, tagsを管理
- トップページに記事一覧、/posts/[slug]で記事詳細を表示

プロジェクトの作成からコーディングまでを自動で行ってくれます。わずか数分でブログの雛形が完成します。

ステップ2: ロリポップへのSSH接続を準備する

デプロイにはSCP（SSH経由のファイル転送）を使います。初回のみ、SSH鍵の設定が必要です。

ロリポップのユーザー専用ページでSSHを有効にし、接続情報を確認してください。

その後、以下のコマンドを実行しましょう。

# SSH鍵を持っていない場合は生成
ssh-keygen -t ed25519

# ロリポップに公開鍵を登録（パスワードを1回入力）
ssh-copy-id -i ~/.ssh/id_ed25519.pub -p 2222 アカウント名@ssh.lolipop.jp

ステップ3: .htaccessを配置する

ロリポップのWebサーバーでクリーンURL（拡張子なしのURL）を実現するため、.htaccess ファイルを public/ ディレクトリに配置します。

RewriteEngine On

# HTTPS 強制リダイレクト
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# トレーリングスラッシュ削除
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [R=301,L]

# クリーンURL（.html 拡張子の自動補完）
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html [L]

# 404 エラーページ
ErrorDocument 404 /404.html

public/ に置いたファイルはビルド時に出力ディレクトリへ自動的にコピーされます。

ステップ4: カスタムスキルを定義する

ここまでの準備が整ったら、いよいよカスタムスキルを定義します。これがワンコマンドデプロイを実現する核心部分です。

.claude/skills/lolipop-deploy/SKILL.md を以下の内容で作成します。

---
name: lolipop-deploy
description: 新しいブログ記事を作成し、ビルドしてロリポップにデプロイする
disable-model-invocation: true
allowed-tools: Read, Write, Glob, Bash(gemini:*), Bash(npm run build:*), Bash(scp:*)
---

$ARGUMENTS の内容で新しいブログ記事を作成し、サイトをビルドしてロリポップにデプロイしてください。

## 1. リサーチ

- `gemini --prompt "WebSearch: $ARGUMENTS に関する最新動向"` を実行
- 検索結果から記事に盛り込むべきポイントを整理

## 2. 記事を作成

- content/posts/ 内の既存記事を参照してフォーマットを確認
- リサーチ結果を踏まえ、$ARGUMENTS の内容に基づき、適切な slug をファイル名として決定
- フロントマターに title, date（今日の日付）, tags を設定
- 本文を Markdown で記述し content/posts/ に保存

## 3. ビルド

- `npm run build` を実行して `out/` ディレクトリに静的ファイルを生成
- ビルドが成功したことを確認

## 4. デプロイ

- 以下のコマンドでロリポップにデプロイ:
  scp -P 2222 -i ~/.ssh/id_ed25519 -r out/* アカウント名@ssh.lolipop.jp:web/
  scp -P 2222 -i ~/.ssh/id_ed25519 out/.htaccess アカウント名@ssh.lolipop.jp:web/.htaccess

## 5. 結果を報告

- 作成した記事のファイルパスとタイトル
- デプロイ先のURL

カスタムスキルは、YAMLフロントマター（設定）とマークダウン本文（AIへの手順指示）で構成されています。$ARGUMENTS にはスキル呼び出し時の引数（記事のテーマ）が入ります。つまり、手順書をマークダウンで書くだけで、AIがその通りに実行してくれる仕組みです。

ここでのポイントは、最初のステップでGemini CLIを使ってWeb検索を行っている点です。Claude Code単体では学習データの範囲内でしか記事を書けませんが、Gemini CLIと組み合わせることで最新の情報を取り込んだ記事を生成できます。Gemini CLIはGoogle製のターミナルAIツールで、npm install -g @google/gemini-cli でインストールできます（macOSの場合は brew install gemini-cli でも可）。