Astroでブログを作る手順｜会社のオウンドメディアに使う判断と公開の仕組み

会社のブログを立ち上げる時や作り直す時に、制作会社やエンジニアから「Astro で作る」案が出ることがあります。検索で上位に出る Astro のブログの解説は、エンジニアが手を動かすためのチュートリアルが中心で、会社のメディアに使ってよいかを決める材料は多くありません。

Astro を選ぶと変わるのは、見た目よりも記事の書き方と公開の流れです。この記事では、Astro でブログを作るかの判断の仕方と、記事の置き方・会社のドメインへの置き方・公開の仕組みを作る手順を解説します。株式会社メリルが Astro で作った3つのメディアのページ数とビルドの時間も、判断の材料として示しました。

記事を読めば、自社のブログを Astro で作るかを決め、作る順番を担当者や制作会社と話せるようになります。Astro は、記事を Markdown のファイルで書き、公開をビルドとアップロードの仕組みで回せる会社に向く作り方です。

Astroでブログを作るかは記事の書き方と公開の流れで決める

Astro は、ブログやマーケティングのサイトのように、記事が中心のサイトを作るための仕組み(Web フレームワーク)です。WordPress などと比べて決める時の材料は、以下の3つです。

• AstroはページをHTMLに書き出してからサーバーに置く
• WordPressと比べて変わるのは記事の書き方と公開の流れ
• Astroのブログが向く会社と向かない会社

AstroはページをHTMLに書き出してからサーバーに置く

Astro のブログは、全ページの HTML を前もって書き出し、できたファイルをサーバーに置く作りです。ページを書き出す作業をビルドと呼びます。Astro は既定で、すべてのページを前もって書き出した静的なサイトを出力し、出力は dist というフォルダにまとまります。

WordPress は、サーバーで動く PHP とデータベースで記事を管理し、ページを返す仕組みです。WordPress を動かすサーバーには、PHP 8.3 以上と、MySQL 8.0 以上か MariaDB 10.11 以上が推奨されています。

Astro で書き出したページは HTML や画像などのファイルなので、ページを返す時のサーバーはファイルを返すだけで済みます。ページを開いた人のブラウザに送る JavaScript も、既定では入りません。

WordPressと比べて変わるのは記事の書き方と公開の流れ

Astro だけで作るブログでは、記事を管理画面ではなく、Markdown という書き方のテキストファイルで書きます。公開も、管理画面の公開ボタンではなく、ビルドした出力をサーバーに置く流れに変わります。WordPress と Astro の違いは、以下の表のとおりです。

項目	WordPress	Astro
記事を書く場所	管理画面	Markdown のファイル(外部の記事の管理サービスから読み込む作りもある)
公開の操作	管理画面で公開する	ビルドして出力をサーバーに置く
サーバーに要るもの	PHP とデータベース	ファイルを返すサーバー
見た目と機能の変え方	テーマとプラグイン	ページの型と部品のコード

記事の管理画面が要る場合は、記事の管理サービス(CMS)やデータベースから、ビルドの時に記事を読み込む作りにできます。主な CMS 向けの読み込みの仕組み(ローダー)は、すでに公開されています。

会社の判断に効く違いは、公開までの時間です。Astro のブログでは記事を足すたびにビルドとアップロードが要るため、公開の操作をしてからページに出るまでに時間がかかります。公開の仕組みが動き始めてから終わるまでの中央値は、メリルの Web集客ブック(hands-plus.com/media/)で約1分、WWS メディア(wwstd.jp/media/)で約4分半でした。

Astroのブログが向く会社と向かない会社

Astro が向くかどうかは、記事を書く人と公開を回す人が、ファイルとコードの作業を受け持てるかで決まります。Astro のブログが向くのは、以下の条件がそろう会社です。

• 記事を Markdown で書く人か、原稿を Markdown にして入れる担当がいる
• ページの型と公開の仕組みを作って直せる人が、社内か制作会社にいる
• 会員のログインや投稿の機能が要らない
• 記事の変更の記録を、ファイルの履歴として残したい

反対に、担当者が管理画面で記事を書き、その場で公開したい会社には、WordPress のような管理画面のある仕組みが合います。ログインして使う管理画面や受信箱のようなアプリは、Astro ではなく、Web のアプリを作るための仕組みが得意とする分野です。

Astroでブログを作る手順

Astro のブログは、設定・記事の置き方・ページの型・ビルドの順に作ります。作る手順は、以下の4つです。

• プロジェクトを作り、サイトのURLと置き場所を設定する
• 記事をMarkdownで置き、先頭に書く項目を決める
• 記事・一覧・カテゴリのページの型を作る
• ビルドして出力のファイルを確かめる

プロジェクトを作り、サイトのURLと置き場所を設定する

最初に、Node.js を入れたパソコンで Astro のプロジェクトを作り、公開する URL を設定します。2026年10月30日時点の Astro を動かすには、Node.js の v22.23.4 以上が必要です。

プロジェクトを作って URL を設定する手順は、以下のとおりです。

1. ターミナルで npm create astro@latest を実行する
2. 案内に沿って、プロジェクトのフォルダと最初のテンプレートを選ぶ
3. astro.config.mjs に、公開する URL(site)と置き場所(base)を書く

出典：Astro の公式ドキュメント「Astroをインストール」(https://docs.astro.build/ja/install-and-setup/)の一部を切り取って掲載(2026年10月31日の画面)。

site はサイトマップや canonical の URL を作る時に使われ、base はページと画像の URL の頭に付きます。会社のドメインの /media/ に置く場合の設定は、次のとおりです。

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  base: '/media',
  trailingSlash: 'always',
});

trailingSlash は、URL の末尾の / の有無をどう扱うかの設定です。メリルの3つのメディアは、どれも trailingSlash を always にしています。ページを「記事の名前/index.html」の形で書き出す設定(build.format の directory)と合わせて、記事の URL を /media/記事の名前/ のような末尾の / 付きにそろえる作りです。

記事をMarkdownで置き、先頭に書く項目を決める

記事は1本を1つの Markdown のファイルにして、決まったフォルダに置きます。ファイルの先頭にはタイトルや公開日などの項目を書きます。項目の名前と型を決める場所は、src/content.config.ts というファイルです。

項目の型を決めておくと、項目が抜けた記事や形の違う記事があった時に、Astro がエラーを出します。記事が増えても、項目の抜けに公開の前に気づけます。記事のフォルダと項目を決める書き方は、次のとおりです。

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const articles = defineCollection({
  loader: glob({ pattern: '*.md', base: './src/content/articles' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.coerce.date(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { articles };

メリルの3つのメディアは、どれも src/content/articles に記事を置き、ファイルの名前をそのまま記事の URL にしています。先頭に書く項目は、メディアごとに8〜13個です。3つのメディアで共通する項目は、以下のとおりです。

• タイトル
• 検索結果に出す説明文
• カテゴリ
• 公開日
• 狙う検索語
• 参考にしたページ

項目は、記事の一覧やカードに出す情報から逆算して決めます。下書きの印にする項目(draft)を足し、印の付いた記事をページの型で外す作りにすると、書きかけの記事を公開せずに置いておけます。オウンドメディア相談室は、draft を true にした記事をビルドに含めない作りです。

記事・一覧・カテゴリのページの型を作る

記事のページは1本ずつ作らず、1つのページの型から全記事分を書き出します。src/pages/[slug].astro のように、名前を角かっこで囲んだファイルが記事のページの型です。

記事のページの型で書くことは、以下の3つです。

1. getStaticPaths の中で getCollection を使い、公開する記事ごとの URL を返す
2. render で記事の本文を HTML にする
3. タイトル・公開日・本文・関連の記事を、決めた見た目に並べる

メリルの3つのメディアは、src/pages に11〜14個のページの型を置き、18〜315ページの HTML を書き出しています。トップ・記事・記事の一覧・カテゴリ・運営者の情報・404・RSS のページの型は、3つのメディアに共通しています。

ビルドして出力のファイルを確かめる

ページの型と記事がそろったら npm run build でビルドし、dist に書き出されたファイルを確かめます。dist の中身が、そのままサーバーに置くファイルになります。

このメディアのリポジトリで npx astro build を実行した出力の一部(途中の行は「…」で省きました)を、オウンドメディア相談室がターミナルの見た目の画像にしたもの(2026年10月31日)。

このメディアを2026年10月31日に手元でビルドすると、46ページを1.57秒で書き出し、最後に「Complete!」と出ました。画像の変換はキャッシュを使ったため、短く終わっています。

ビルドの後に確かめることは、以下のとおりです。

• 公開する記事の数だけ、記事のページの HTML ができているか
• 各ページの title・説明文・canonical が正しいか
• サイト内のリンクと画像の URL が、置き場所のフォルダから始まっているか
• 下書きの記事が出力に入っていないか

オウンドメディア相談室では、出力の確かめをスクリプトにして、ビルドのたびに動かしています。記事ごとの title・meta description・canonical・構造化データ、サイトマップと RSS への掲載、サイト内のリンク切れを確かめ、問題が1つでもあればサーバーに上げません。

画像は src のフォルダに置くと、Astro がビルドの時に変換して軽くします。public のフォルダに置いたファイルは、手を加えずにそのまま出力にコピーされます。

» 画像の圧縮方法は幅・形式・品質の順｜WebP変換の手順と画質の確かめ方

会社のドメインのサブディレクトリにAstroのブログを置く方法

会社のサイトが WordPress などで動いていても、Astro の出力をドメインの中の1つのフォルダに置けば、同じドメインでブログを公開できます。メリルの3つのメディアも、どれもドメインのサブディレクトリに置く作りです。サブディレクトリに置く時の手順は、以下の3つです。

• baseを設定し、リンクと画像のURLを置き場所から始める
• 置き場所のフォルダだけに入れるFTPアカウントを使う
• 既存のサイトのファイルに触れない送り方にする

baseを設定し、リンクと画像のURLを置き場所から始める

サブディレクトリに置く時は、base を設定し、サイト内のリンクと画像の URL をすべて置き場所のフォルダから始めます。base は、Astro がページと画像を置く場所の起点になる値です。自分でコードに書くリンクと画像の URL には、import.meta.env.BASE_URL で取れる base の値を頭に付けておきます。

メリルの3つのメディアは、内部のリンクと画像の URL を、/media/ や /owned-media/ から始まる絶対パスで出力しています。サーバーのフォルダに出力を置いても、サーバーの手前に置く中継の仕組み(リバースプロキシ)でフォルダだけを振り分けても、同じ出力のまま動かせるためです。

public のフォルダに置いたファイルは、置き場所のフォルダの直下に出ます。3つのメディアとも、サーバーの設定を書く .htaccess を public に置き、置き場所のフォルダに出しています。

» htaccessのリダイレクトの書き方｜301の設定例と確かめ方・注意点

置き場所のフォルダだけに入れるFTPアカウントを使う

出力をサーバーに上げる FTP のアカウントは、置き場所のフォルダだけに入れるものを用意します。サーバー全体に入れるアカウントで上げ先を間違えると、会社のサイトのファイルを上書きするおそれがあります。

メリルの3つのメディアの公開の仕組みは、置き場所のフォルダだけに入れる FTP アカウントなら、上げ先を指定しなくてよい作りです。サーバー全体に入れるアカウントを使う場合は、上げ先が /media/ や /owned-media/ で終わる場所でなければ、アップロードの前に止まります。

オウンドメディア相談室では、上げ先の中身を先に読む確かめも入れています。上げ先に wp-config.php などの WordPress のファイルが見つかったら、アップロードしない作りです。

既存のサイトのファイルに触れない送り方にする

アップロードは、前回から変わったファイルだけを送る作りにします。置き場所を空にしてから全部を上げ直す作りでは、上げ先を間違えた時に消えるファイルが多くなるためです。

メリルの3つのメディアの公開の仕組みは、前回送ったファイルの一覧をサーバーに残し、次の公開では変わったファイルだけを送ります。消すのは、前回の公開で上げて今回の出力から無くなったファイルだけで、ほかのファイルには触れません。

3つのメディアとも、送る時は通信を暗号化する FTPS を使っています。手動で動かす時に、何を送るかの表示だけを見る dry-run も選べる作りです。

記事を足したら公開まで進む仕組みをGitHub Actionsで作る

Astro のブログでは、記事を足すたびにビルドとアップロードが要ります。手作業で回すと人によって手順がずれるため、GitHub Actions で決まった順に動かすのがおすすめです。公開の仕組みで動かすことは、以下の3つです。

• mainに入ったらビルドしてアップロードする
• アップロードの前に出力を検査する
• 公開の後にページが見えているかを確かめる

mainに入ったらビルドしてアップロードする

GitHub Actions は、記事とコードを置く GitHub の保管場所(リポジトリ)で、決まった処理を自動で動かす仕組みです。ワークフローの設定には、公開する版を置く main のブランチへ変更が送られた時(push)に動く指定を書きます。push のきっかけはブランチで絞り込めて、メモや記録のファイルだけを変えた時に動かさない指定もできます。

オウンドメディア相談室のワークフローが動かす処理は、以下の順です。

1. リポジトリの中身を取り出し、Node.js を用意する
2. npm ci でパッケージを入れる
3. 型チェックとビルドを動かす
4. 出力を検査する
5. 上げ先の設定を確かめ、更新を知らせるために公開中のサイトマップを控える
6. ConoHa WING に FTPS で差分を上げる
7. 公開されたページを確かめ、検索エンジンに更新を知らせる

FTP のサーバー名・ユーザー名・パスワードは、ワークフローのファイルに書かず、リポジトリのシークレットに登録します。シークレットは、リポジトリの Settings の「Secrets and variables」から Actions を開き、New repository secret で登録できます。

アップロードの前に出力を検査する

アップロードの前に型チェックと出力の検査を入れ、どちらかが失敗したらサーバーに上げない作りにします。記事の先頭の項目の抜けやリンク切れを、公開される前に止められるからです。

オウンドメディア相談室では、astro check による型チェックと、出力の HTML を記事ごとに確かめるスクリプトを、アップロードの前に動かしています。検査で止まった時は、サーバーのファイルは前の公開のまま残ります。

公開の後にページが見えているかを確かめる

アップロードが終わったら、公開した URL を開いて、自社のメディアのページが返っているかを確かめます。上げ先の指定やサーバーの設定が違うと、アップロードが終わっても、公開した URL に別のページが出ることがあるためです。

オウンドメディア相談室の公開の仕組みが、アップロードの後に確かめることは以下の3つです。

• トップのページの canonical が、オウンドメディア相談室の URL になっているか
• 存在しない URL で、オウンドメディア相談室の404のページが返るか
• http:// と www. 付きの URL が、301で https://blog-soudan.com/owned-media/ に転送されるか

確かめた後は、新しく載った URL と更新日が変わった URL を、IndexNow で検索エンジンに知らせます。

メリルがAstroで作った3つのメディアのページ数とビルドの時間

メリルが Astro で作ったメディアは、WWS メディア(wwstd.jp/media/)・Web集客ブック(hands-plus.com/media/)・オウンドメディア相談室の3つです。2026年10月30日20時台の main の版を Mac mini(Apple M2 Pro)に写してビルドし、作り・ビルドの時間・git の記録を数え、公開の仕組みの実行の記録も集計しました。数えた結果は、以下の3つです。

• Astroで作った3つのメディアの置き場所と作り
• Astroのビルドの時間はページ数より画像の数で決まる
• 記事を足したコミットの大半はサイトのコードに触れていない

Astroで作った3つのメディアの置き場所と作り

3つのメディアの置き場所と作りは、以下の表のとおりです。記事の数は、下書きを除いた公開する分の数です。

項目	WWS メディア	Web集客ブック	オウンドメディア相談室
置き場所	wwstd.jp/media/	hands-plus.com/media/	blog-soudan.com/owned-media/
サーバー	Xserver	Xserver	ConoHa WING
最初のコミット	2026年10月7日	2026年10月29日	2026年10月30日
Astro の版	7.3.6	7.4.4	7.4.4
記事	263本	7本	23本
記事の先頭に書く項目	10個	8個	13個
ページの型	14個	11個	11個
部品(コンポーネント)	17個	9個	13個
src の中のコード(記事を除く)	4,928行	3,539行	3,774行
直接入れたパッケージ	4個	6個	8個

記事が263本ある WWS メディアでも、src の中のコードは記事を除くと5,000行に届いていません。1つのページの型から全記事のページを書き出すため、記事が増えてもコードはほとんど増えない作りです。

Astroのビルドの時間はページ数より画像の数で決まる

3つのメディアのビルドの時間を、各3回測った中央値は以下の表のとおりです。キャッシュなしは、画像の変換の結果を残すフォルダを消してから測った値です。

項目	WWS メディア	Web集客ブック	オウンドメディア相談室
書き出した HTML	315ページ	18ページ	36ページ
ビルドの時に変換した画像	2,745枚	309枚	140枚
ビルドの時間(キャッシュなし)	52.5秒	5.6秒	4.1秒
うちページの書き出し	1.3秒	0.1秒	0.1秒
うち画像の変換	47.8秒	4.0秒	1.5秒
ビルドの時間(キャッシュあり)	5.2秒	1.6秒	2.4秒

WWS メディアは、315ページの HTML を1.3秒で書き出し、2,745枚の画像の変換に47.8秒かかりました。ビルドの時間の9割は画像の変換で、時間を決めているのはページ数よりも画像の数です。オウンドメディア相談室のビルドの時間には、サイト内検索の索引を作る約0.6秒も入っています。

Astro は、変換した画像をキャッシュのフォルダに残し、次のビルドで使い回します。キャッシュがある状態では、WWS メディアの2,745枚はすべて作り直さずに使われ、ビルドは5.2秒で終わりました。

GitHub Actions で公開まで終えた実行の所要時間は、Web集客ブックが中央値63秒(12回)、WWS メディアが中央値276.5秒(86回)です。パッケージを入れる時間と、アップロード・公開の確かめの時間も含みます。記事に図や画面の画像を多く入れるメディアは、画像のキャッシュのフォルダを次のビルドに持ち越す設定も検討しましょう。

記事を足したコミットの大半はサイトのコードに触れていない

3つのメディアの git の記録で、記事のファイルを新しく足したコミット(変更を記録する単位)を数えた結果は、以下の表のとおりです。サイトのコードは、ページの型・部品・設定・公開のワークフローなどのファイルです。

メディア	記事を足したコミット	サイトのコードに触れなかったコミット
WWS メディア	264回	261回
Web集客ブック	3回	3回
オウンドメディア相談室	22回	18回
合計	289回	282回

記事を足したコミットの97.6%は、サイトのコードを変えていません。ページの型と公開の仕組みが先にできていれば、記事を足す作業は記事のファイルと画像を置いて main に入れるだけになります。

作る段階を制作会社に任せ、記事を足す段階を社内で回す分担も、この作りなら組めます。社内にコードを書ける人が少ない会社は、作る範囲と社内で受け持つ範囲を先に決めてから依頼してください。

Astroのブログで問い合わせフォームとサイト内検索を用意する方法

Astro で書き出した静的なページには、アクセスを受けてから処理をするサーバーのプログラムがありません。問い合わせフォームとサイト内検索は、別の仕組みで用意します。メリルのメディアが使っている方法は、以下のとおりです。

• 問い合わせフォームの送信は、同じサーバーで動く PHP のファイルで受ける
• サイト内検索は、ビルドの時に作った検索の索引をブラウザで読む

メリルの3つのメディアは、問い合わせを受ける PHP のファイルも、ビルドの時に出力の中に書き出しています。問い合わせ管理と連携するための鍵は、ビルドの時にリポジトリのシークレットから入れ、リポジトリのファイルには書きません。

オウンドメディア相談室は、ビルドの後に検索の索引を作り、ブラウザで検索する作りです。WWS メディアも、記事の一覧のデータをビルドの時に書き出し、検索のページで読み込んでいます。

» 問い合わせフォームの作り方｜項目の決め方とスパム対策・届くかの確かめ方

Astroのブログは記事の書き方と公開の流れを決めてから作る

Astro は、記事を前もって HTML に書き出してサーバーに置く仕組みです。WordPress と比べて変わるのは、記事を Markdown のファイルで書くことと、公開がビルドとアップロードの流れになることです。

Astro でブログを作る時の要点を、以下にまとめました。

• 記事を書く人と公開を回す人が、ファイルとコードの作業を受け持てるかで判断する
• 設定・記事の置き方・ページの型・ビルドの順に作る
• サブディレクトリに置く時は base を設定し、置き場所だけに入れる FTP アカウントで差分を送る
• GitHub Actions で、検査・アップロード・公開の確かめまでを決まった順に動かす
• 画像の多いメディアは、画像の変換がビルドの時間の大半になる

ページの型と公開の仕組みを先に作っておけば、記事を足す作業はファイルを置くだけになります。まずは、社内で記事を書く人と、公開の仕組みを作って直す人を決めるところから始めましょう。