下書きプレビューの仕組みを作った話

公開前に確認したい

ブログ記事を書いたら、公開する前にデザインを確認したい。テキストの分量、画像のサイズ、見出しのバランス。実際の画面で見ないとわからないことがあります。

WordPress なら「プレビュー」ボタンがあります。Astro にはありません。

最初に考えたこと

「Basic 認証をかけたプレビュー用のURLを作る？」「ステージング環境を用意する？」

どちらも大げさすぎました。やりたいことはシンプルで、「自分のPCでだけ下書き記事を見たい」だけ。

解決策：import.meta.env.DEV

Astro には import.meta.env.DEV という組み込みの環境変数があります。

• npm run dev（開発サーバー）では true
• 本番ビルドでは false

これを使って、開発時は下書き記事も含めて全記事を表示、本番では下書きを除外するようにしました。

仕組み

記事の Markdown ファイルの frontmatter に draft: true を設定すると、その記事は下書きになります。

ブログの一覧ページと詳細ページで、記事を取得するときにフィルターをかけます。

• 開発時：全記事を取得（draft も含む）
• 本番：draft が false の記事だけ取得

たったこれだけ。新しいファイルを追加する必要もなく、既存のコードに数行追加するだけで実現できました。

使い方

1. Decap CMS で記事を書くとき、「下書き」をONのまま Publish
2. ローカルで git pull して最新を取得
3. npm run dev で開発サーバーを起動
4. localhost:4321/blog/ で下書き記事のデザインを確認
5. 問題なければ「下書き」をOFFにして再 Publish

なぜこの方法がいいのか

本番に影響しない

下書き記事は本番ビルドに含まれません。URLを直接叩いても表示されません。安心して書きかけの記事を保存できます。

追加コストゼロ

ステージング環境を用意する必要がありません。Cloudflare Pages の無料枠を追加で消費することもありません。

特別なツール不要

必要なのは npm run dev だけ。ローカルの開発サーバーがプレビュー環境を兼ねています。

デザイナーにとってのプレビュー

デザイナーはデザインカンプと実装の差異に敏感です。フォントサイズ、行間、余白、画像の比率。意図通りに表示されているか、実際の画面で確認したい。

この仕組みがあるおかげで、「公開してから気づく」がなくなりました。些細なことですが、ブログを続けるモチベーションに直結する仕組みだと思っています。