ブログをMarkdownで書いてiPhoneで確認するまで
Astroで作ったブログへ記事を追加してMacとiPhoneで確認してからGitへ残すまでの流れ。
この記事は、新しいブログの表示と執筆手順を確認するためのサンプルです。
ブログを作り直すなら記事の書き方まで面倒にはしたくない。
自分が欲しかったのは管理画面ではなくローカルでMarkdownを書いてGitへコミットするだけの流れです。 記事を書くための新しい操作を覚えるより普段使っているエディターとGitで完結するほうが多分続きます。
というわけで実際にこのブログへ記事を追加してMacとiPhoneで確認できるところまで試しました。 この記事自体も同じ手順で書いています。
今の公開フロー
やることは4つです。
- Markdownファイルを作る
draft: trueのまま本文を書く- MacとiPhoneで表示を確認する
draft: falseにしてビルドする
記事の本文も公開状態も一つのファイルに入ります。 Gitの差分を見れば何を直したか分かります。 自分にはこのくらいがちょうどよかったです。
下書きを作る
作業場所はAstroプロジェクトの site ディレクトリです。
用意してある下書きを複製します。
cp src/content/blog/first-post.md src/content/blog/my-article.mdmy-article.md の部分は記事に合わせて変えます。
このファイル名が記事URLの一部になるので半角英数字とハイフンにそろえました。
たとえば今読んでいる記事のファイル名は markdown-publishing-workflow.md です。
URLも /blog/markdown-publishing-workflow/ になっています。
Markdownの先頭へ公開情報を書く
ファイルの先頭には frontmatter と呼ばれる公開情報があります。 書き始めは次の状態にします。
---
title: "記事タイトル"
description: "記事の内容を一文で説明する"
pubDate: 2026-09-01
draft: true
---このブログで使っている項目は次のとおりです。
- title：記事ページと一覧に出すタイトル
- description：記事一覧などに出す短い説明
- pubDate：公開日
- updatedDate：更新日。更新していなければ省略可能
- draft：
trueなら下書き。falseなら公開対象 - sample：
trueならサンプル記事の表示を付ける
書きかけの記事には draft: true を付けておきます。
一覧ページと記事ページの生成処理がこの値を見て除外する実装です。
そのためビルドしても公開用ファイルへ入りません。
ここは地味ですが大事でした。
画像もMarkdownから入れる
文章だけでなくスクリーンショットや構成図も入れたくなります。
画像は public/images/ の中へ置くことにしました。
記事ごとにフォルダを分けると後から見ても迷いません。 この記事の説明画像は次の場所にあります。
public/images/markdown-publishing-workflow/image-example.svgMarkdownには画像の説明とパスを1行で書きます。
実際に表示するとこうなります。
画像の説明は空にせず何が写っているかを書きます。 スクリーンショットを使う場合は個人情報やIPアドレスが残っていないかも確認します。
画像もMarkdownと一緒にGitへコミットすれば記事と同じ履歴で管理できます。
Macで表示する
本文を書いたら確認用サーバーを起動します。
npm run devターミナルに表示されたローカルURLをMacのブラウザで開けば確認できます。 Markdownを保存すると表示も更新されます。 文章と見た目を行き来しながら直せます。
自分でHTMLを書き換える必要はありません。
iPhoneでも確認する
Macで読めてもiPhoneでは長いタイトルやコードがはみ出すことがあります。 今回はiPhoneでも見たかったので同じWi-Fiからアクセスできるように起動しました。
npm run dev -- --host 0.0.0.0ターミナルの Network 欄に表示されたURLをiPhoneで開きます。
実際に記事一覧と記事ページを表示して文字サイズや横幅を確認できました。
この起動方法はMacの開発サーバーをLANへ公開します。 自宅など信頼できるネットワークでの確認だけに使います。 終わったらサーバーを停止します。
公開対象へ切り替える
本文と表示を確認したら draft を変更します。
draft: false最後に静的ビルドを実行します。
npm run build今回の構成ではトップページと2本の記事ページが生成されました。
実行結果は 3 page(s) built です。
下書き用の first-post.md は生成対象に入っていません。
ビルドが通ったらMarkdownの差分を確認してGitへコミットします。 記事の追加と修正がそのまま履歴へ残ります。 専用の管理画面は必要ありません。
まだ公開環境にはつないでいない
ここまでで確認したのはローカルで書いて静的ファイルを生成するところまでです。 Cloudflareへのデプロイと独自ドメインの接続はまだ行っていません。
またiPhoneから見られるのは開発サーバーを起動している間だけです。 外出先から読める公開サイトになるわけではありません。
それでも記事を書く流れはできました。 エディターでMarkdownを書いてiPhoneで読みGitへ残す。
自分が欲しかったブログ運用は今のところこれで十分です。