← ブログ一覧

Sun Apr 26

DirectAdmin解説サイトをAstro + pitcms + Cloudflare Pagesで作った話

DirectAdmin解説サイトをAstro + pitcms + Cloudflare Pagesで作った話

WordPress使わんと、半日で公開環境作るまで

はじめに

サーバー管理ソフトとの付き合いは、もう長いわ。最初に使うたんはEnsimやってんけど、いつの間にか会社ごと消えてしもた。次にPlesk、ほんでcPanelへ。cPanelは確かに長いこと使うてきた。機能も多いし、安定してたからな。

ところが近年、cPanelの利用料金がえらい上がってもうた。しかも毎年上がり続ける気配があって、このまま使い続けるんはしんどい思て決断した。

ほんでたどり着いたんがDirectAdminや。

ただし、これがまた一筋縄ではいかんかった。日本語化の問題が立ちはだかってきたんやけど、その話は次の章で詳しく書く。そんな状況やからこそ、DirectAdminをあんまり知らん人向けの日本語解説サイトを、利用開始と合わせて作ろう思て決めた。

サイト構築にWordPress使う気はなかった。せっかく作るんやったら、モダンな構成を試しながら学びたかったからな。

選んだスタックはこの3つや。

  • Astro(フロントエンドフレームワーク)
  • pitcms(GitベースのヘッドレスCMS)
  • Cloudflare Pages(ホスティング)

結論から言うと、半日で公開環境まで作れた。 しかも費用はほぼゼロや。

日本語化の苦労話

DirectAdminには、今のところ公式の日本語表示が用意されてへん。バイナリを調べてみたら、対応言語のリストに「ja」も「ja_JP」も含まれてのうて、日本語のpoファイルを正規の場所に置いても、そもそも認識されへん仕組みやった。本体側で日本語が想定されてへん以上、正攻法では手の打ちようがない。

そこで思いついたんが、既存の言語ファイルを日本語で上書きする裏ワザや。最初は韓国語(ko.po)で試してみたけど、言語メニューに「한국어」と表示されるんは違和感が強すぎた。次に中国語簡体字(zh_Hans.po)を日本語に差し替えたところ、メニュー表示は「中文(简体中文)」のままやけど、中身は日本語っちゅう、ちょっと強引な状態を作り出すことに成功した。同じ漢字圏やから、視覚的にはまだ我慢できる。

肝心の翻訳作業は、いつも頼りにしてるくらさん(Claude Code)に依頼した。英語メニューを丸ごと渡して、用語の整合性を取りながら、サーバー管理特有の専門用語を自然な日本語に置き換えてもらうっちゅう、地味やけど手間のかかる作業や。それなりにコストかかるかと覚悟してたけど、蓋を開けてみると翻訳料金はわずか300円程度。コーヒー一杯にも満たん費用で、サーバー管理画面が母国語に変わってしもた。AIの恩恵をこんな形で受ける時代が来るとは、10年前には想像もしてへんかった。

ただしこの方法、DirectAdmin本体のアップデートが入るたびに上書きが戻る可能性があって、あくまで暫定対応にすぎん。長期運用を考えるんやったら、本家の翻訳プロジェクト(Weblate)に正式投稿する方向も、いずれは視野に入れる必要があるやろな。

ここまで泥臭い回避策に頼らざるを得ん現状こそ、日本語ユーザーの少なさを物語ってる。情報を探しても英語のフォーラムばっかりで、初めて触る人にとってはハードルが高い。せやからこそ、DirectAdminをあんまり知らん人でも踏み込めるよう、利用開始と合わせて日本語解説サイトを立ち上げることに決めた。同じ場所でつまずく人を一人でも減らせれば、この苦労話にも意味が出てくる。

なんでこのスタック選んだんか

Astro

静的サイトジェネレーターの中でも、Astroは「コンテンツ重視のサイト」に向いてる。ブログや解説サイトとの相性が抜群で、ビルドした後は静的ファイルになるからホスティングも楽や。

pitcms

今回の選定で一番悩んだんがCMSや。候補はmicroCMSやってんけど、最終的にpitcmsを選んだ。

pitcmsは2026年1月にリリースされたばっかりの新しい日本製ヘッドレスCMSや。microCMSとの一番の違いは、APIベースやのうてGitベースっちゅう点。

具体的には、コンテンツが全部自分のGitHubリポジトリに保存される。これが何を意味するかっちゅうと、

  • コンテンツのバージョン管理がGitで完結する
  • サービスが嫌になったらすぐ乗り換えられる(ベンダーロックインが弱い)
  • ローカルでAI使いながら大量のコンテンツを操作できる

特に3番目は魅力的やった。将来的にコンテンツを大量に移行したり整形したりする時に、ローカルでClaude Code使うて一括処理できるんは大きいメリットや。

まだ生まれたばっかりのサービスやけど、それがむしろ面白いと感じた。アーリーアダプターとして試す価値は十分ある。

Cloudflare Pages

無料・高速・SSL自動設定。Astroの静的ファイルをホスティングするには最適な選択肢や。GitHubと連携したら、pushするたびに自動でデプロイされる。

費用について

気になる費用面も整理しとく。

| サービス | 費用 | |---|---| | Astro | 無料(OSSフレームワーク) | | pitcms | 無料(Freeプラン・コレクション3つまで) | | Cloudflare Pages | 無料(帯域無制限・デプロイ500回/月) | | Cloudflare R2 | 無料枠内(10GB/月まで) |

解説サイト規模やったら、全部無料枠内で収まる。

pitcmsは今後有料プランが拡充される可能性はあるけど、仮にそうなってもコンテンツはGitHubに残るから、他のCMSへの移行コストが低いんが安心なところや。

実際の構築手順

1. GitHubリポジトリ作成

まずGitHubに da_guide っちゅうPrivateリポジトリを作った。Privateでも問題ない。pitcmsもCloudflare Pagesも、後の手順でアクセス許可を設定する。

2. pitcmsの設定

pitcms(https://pitcms.net)にGitHubアカウントでログインして、プロジェクトを作成する。

ダッシュボードに「設定ファイルが見つかりません」って表示されるけど、これは正常な状態や。次のステップで設定ファイルを作る。

pitcms.jsoncの作成

pitcmsはリポジトリのルートに pitcms.jsonc っちゅう設定ファイルが必要や。ここにコンテンツの構造(コレクション)を定義する。

今回はClaude Codeに作成を頼んだ。指示はシンプルや。

pitcms.jsoncを作成して。
DirectAdmin解説サイト用で、articlesコレクションを定義する。
フィールドはtitle(必須), category(必須), description, draft, createdAt, updatedAt。
仕様はhttps://pitcms.net/docs/pitcms-jsonc を参照。
作成後はGitHubにコミット・プッシュまでやって。

Claude Codeが pitcms.jsonc を生成して、コミット・プッシュまで全部やってくれた。その後pitcmsダッシュボードをリロードしたら、「解説記事」コレクションが表示された。

3. Astroプロジェクトの構築

これもClaude Codeに頼んだ。

C:\working\da_guide にAstro 6.xのblogテンプレートでプロジェクトをセットアップして。
pitcms.jsoncは消さんこと。
src/content/articles/ をContent Collectionとして設定して、
articlesのスキーマ定義もやって。
GitHubにコミット・プッシュ(「init astro project」)。

Astro 6.x・Content Collection・スキーマ定義まで一発で完了。38ファイルが生成された。

4. Cloudflare Pagesにデプロイ

Cloudflare(https://dash.cloudflare.com)にログインして、Workers & Pages → アプリケーションを作成 → Pages → Connect GitHubの順で進む。

ビルド設定は以下の通りや。

| 項目 | 設定値 | |---|---| | フレームワークプリセット | Astro | | ビルドコマンド | npm run build | | ビルド出力ディレクトリ | dist |

「保存してデプロイする」を押したら、数分で da-guide.pages.dev にデプロイ完了や。

5. カスタムドメインの設定

Cloudflare Pagesのカスタムドメイン設定画面で da.shizuku.net を入力したら、設定するCNAMEレコードが表示される。

名前: da
ターゲット: da-guide.pages.dev

このレコードをドメインのDNS管理画面(自分の場合はenom)に追加する。設定が反映されたら「アクティブ・SSL有効」になる。

まとめ

今日の作業をざっくり振り返ってみる。

  • DirectAdminのメニュー日本語化(中国語ファイル上書き・翻訳料300円)
  • pitcmsアカウント作成・GitHubリポジトリ連携
  • pitcms.jsoncでコレクション定義(Claude Code活用)
  • Astro 6.xプロジェクト構築(Claude Code活用)
  • Cloudflare Pagesデプロイ
  • カスタムドメイン da.shizuku.net 設定完了

所要時間：約2時間。費用：ほぼゼロ。

pitcmsはまだ生まれたばっかりのサービスで日本語記事も少ないけど、Gitベースのコンテンツ管理っちゅう考え方は非常に合理的や。特にAstroのContent Collectionとの相性が良うて、Jamstackアーキテクチャとの組み合わせに向いてると感じた。

DirectAdminそのものも、日本語ユーザーが少ないせいで情報が乏しいけど、cPanelからの脱出先としてはコスト面で十分検討に値する。同じようにcPanelの値上げに頭抱えてる管理者の参考になれば嬉しい。

次回はサイトのデザインカスタマイズと、実際のDirectAdmin解説記事の投稿について書くつもりや。

この記事はシリーズ連載や。次回：「pitcmsで記事を書いてAstroに表示するまで」