中小企業が簡単・低コストでブログを始める方法 ── Markdown×Cloudflare Pagesで年間約1,500円だけ
中小企業の経営者・IT担当者向けに、Markdownで記事を書き、Cloudflare Pagesで無料公開するブログ構築の全体像と具体的な作業手順を解説。WordPressと比較したコストメリット、Obsidian×Cursorでの執筆効率化まで。
想定読者
- 中小企業の経営者・経営層で、自社のブログを立ち上げたい方
- IT担当者で、低コスト・運用負荷の少ないブログ構築方法を探している方
- WordPressは重い・レンタルサーバ代を抑えたいと感じている方
- 記事はMarkdownで書きたい、図はMermaidで描きたい方
この記事で得られること
- ブログを「年間約1,500円(独自ドメイン代のみ)」で運用する全体像の理解
- 執筆〜公開までの流れ(Obsidian×Cursorで書く → Gitでpush → 自動公開)の把握
- 具体的な作業手順のゴールと、何を用意すればよいかのチェックリスト
- 今日からできる「まず一歩」のアクション
読了目安
約15分
本記事の信頼性
- 大手SIerでのシステム開発・コンサル経験ののち、事業会社の情報システム部で社内SEとして勤務
- 中小企業診断士として、デジタル化・AI導入・セキュリティを中心に中小企業を支援
- 本ブログ(Profectus Note)をAstro+Cloudflare Pagesで構築・運用している実績に基づいて執筆しています
目次
- はじめに ── 「ブログはやりたいが、コストと手間が気になる」
- この記事で使う用語の解説(IT初心者向け)
- なぜこの方法なのか ── コストと手間を比べる
- Astroを選ぶメリット ── 速さとSEOに強い理由
- 全体像 ── 何を使い、どう流れるか
- 事前準備 ── アカウントとツールの一覧
- 具体的な作業手順(5つのステップ)
- 記事の書き方と公開の流れ
- ★今日からできるアクション
- まとめ
はじめに ── 「ブログはやりたいが、コストと手間が気になる」
「自社のブログを立ち上げて、情報発信や集客に活用したい」と考えている中小企業の経営者やIT担当者の方は多いと思います。一方で、「WordPressだとレンタルサーバ代がかかる」「更新の手間が心配」といった声もよく聞きます。DX推進の全体像を把握したい方は「中小企業のDXロードマップ」もあわせてご参照ください。
本記事では、Markdownで記事を書き、Cloudflare Pagesで無料公開するブログ構築の方法を、経営者・IT担当者が「内容とメリットを理解し、自分でも構築できる」ように、具体的な作業手順まで含めてまとめます。
- 記事はMarkdownベースで書く
- 図はMermaid形式で描ける
- Cloudflare Pagesでブログを公開(ホスティング無料)
- Gitコマンドだけで、手間なく記事を公開
- コストは独自ドメイン費用(年間約1,500円)のみで済むケースも
プログラミングが初めての方でも、手順書に沿って進めれば、初回は4〜6時間程度でブログの土台まで用意できる構成にしています。
「自分で構築するのは難しそう」「相談したい」という方は、記事末尾の案内のとおり、X(旧Twitter)でお気軽にご連絡ください。
この記事で使う用語の解説(IT初心者向け)
ブログ構築の説明でよく出てくる言葉を、ITに詳しくない方でも分かるように簡単にまとめました。読み進めながら「これは何だろう?」と思ったら、ここに戻って確認してください。
| 用語 | 一言で言うと | もう少し詳しく |
|---|---|---|
| Markdown(マークダウン) | シンプルなルールで文書を書く形式 | ワードのようなリッチな編集ではなく、「# で見出し」「- で箇条書き」のように記号で装飾する書き方。メモやブログ記事をテキストで管理しやすく、多くのツールが対応しています。 |
| Node.js(ノードジェイエス) | パソコン上でJavaScriptを動かすためのソフト | ブログの土台(Astro)を動かすために必要です。公式サイトから「LTS」と書かれた版をダウンロードしてインストールすると使えます。 |
| Astro(アストロ) | ブログやサイトの「設計図を形にする」ツール | あなたが書いたMarkdownの記事やデザイン設定を、ブラウザで表示できるWebページに変換してくれます。軽くて速く、検索されやすい(SEOに強い)作りになるのが特徴です。 |
| Git(ギット) | ファイルの変更履歴を管理するソフト | 「いつ、何を直したか」を記録し、後から戻したり共有したりするために使います。ブログの記事や設定をGitHubに送る際にも使います。 |
| GitHub(ギットハブ) | プログラムや記事のファイルを預かってくれるクラウドのサービス | Gitで管理しているフォルダ(リポジトリ)をインターネット上に保存できます。無料で利用でき、Cloudflareと連携すると「ここにファイルを送ったら自動でブログが更新される」ようにできます。 |
| Cloudflare(クラウドフレア) | インターネット上の「配信のインフラ」を提供する会社 | その中の Cloudflare Pages は、GitHubに置いたブログのファイルを読み取り、世界中の人に速く・安全に表示してくれる無料のホスティングサービスです。 |
| Mermaid(マーメイド) | 図を「文章で書く」ための記法 | フローチャートや構成図を、プログラミングのように短い文で記述します。画像ファイルを作らなくても図を管理・更新でき、ブログ上でそのまま図として表示できます。 |
| Obsidian(オブシディアン) | メモやノートをMarkdownでまとめるアプリ | パソコンにインストールして使います。日々のメモやブログの下書きを、リンクやタグで整理しながら蓄積できるため、記事のたたき台づくりに便利です。 |
| Cursor(カーソル) | プログラミングや文章を書くための「AI付きの編集ソフト」 | コードやMarkdownを編集する画面の中で、AIに「この文章を整えて」「この部分を説明して」と頼めます。ブログ記事の推敲や、設定ファイルの修正を手伝ってもらうのに向いています。 |
| ビルド | 記事や設定を「本番用のWebページ」に変換すること | あなたが書いたMarkdownや設定を、ブラウザが表示できる形(HTMLなど)にまとめる作業です。Astroが自動で行い、Cloudflareがその結果を配信します。 |
| デプロイ(公開) | 作ったブログをインターネット上に載せて、誰でも見られる状態にすること | ここでは「GitHubにファイルを送る(push)と、Cloudflareが自動でビルドして公開する」流れを指します。サーバに自分でログインしてアップロードする必要はありません。 |
| 独自ドメイン | 「〇〇.com」のように、自社専用のWebアドレス | レンタルで借りる形で取得でき、年間約1,000〜2,000円程度です。取得すると、ブログのURLを「自社の名前やブランド」にできます。 |
なぜこの方法なのか ── コストと手間を比べる
コストの比較
| 項目 | WordPress+レンタルサーバ | 本記事の方法(Astro+Cloudflare Pages) |
|---|---|---|
| サーバ・ホスティング | 月額数百円〜数千円(年間で数万円) | 無料(Cloudflare Pages) |
| 独自ドメイン | 年間約1,000〜2,000円 | 年間約1,000〜2,000円(同程度) |
| 合計(年間) | 約1万〜5万円程度 | 約1,500円程度(ドメインのみ) |
WordPressではレンタルサーバ代がかかりますが、Cloudflare Pagesは静的サイトのホスティングが無料で、商用利用も可能です。無制限のサイト数・帯域、HTTPSも自動対応なので、中小企業の公式ブログとして十分なスペックです。
手間の比較
- WordPress:管理画面から投稿・更新。プラグインやPHPのバージョンアップ、セキュリティ対策の運用負荷がありがちです。
- 本記事の方法:記事はMarkdownファイルで管理。Gitでpushするだけで自動デプロイされるため、「更新作業」はファイルを編集してpushするだけです。サーバの保守やPHPの更新に追われる必要がありません。
さらに、Obsidianで下書きやナレッジを蓄積し、CursorでAI支援を受けながら執筆する構成にすると、記事を書く時間そのものも削減しやすくなります。
ご参考までに、このブログ(profectus-note.com)を実際に立ち上げたときの私自身の感覚値は、初期費用はドメイン取得料のみ・構築時間は3〜4時間程度 で形になりました。1記事を書くのに必要な時間も、Obsidianで下書きをして Cursor で清書する流れに慣れてくると、1本あたり2時間前後 で公開まで持っていけます。WordPressのように管理画面のプラグイン更新やテーマ調整に時間を取られず、「文章を書く時間」だけに集中できる というのが、運用してみてのいちばんの実感です。
Astroを選ぶメリット ── 速さとSEOに強い理由
この方法では、ブログの「形にする」ツールとして Astro を使います。ITに詳しくない方にもメリットが伝わるように、Astroの強みを整理しました。
パフォーマンスが高く、表示が速い
- Astroは静的サイトを生成します。あらかじめ記事をHTMLに変換しておくため、読者がアクセスしたときにサーバでその場計算をする必要がありません。
- その結果、ページの表示が速く、スマートフォンや回線が遅い環境でもストレスが少ないブログになります。
- 表示速度はGoogleの検索順位にも影響するため、「速いブログ」は結果的に集客や信頼につながりやすいです。
SEOに強い(検索されやすい)
- SEO(検索エンジン最適化)とは、Googleなどの検索結果で「自社のブログがより上に・見つけやすく表示されるようにする」取り組みです。
- Astroでは、記事のタイトル・説明文・見出し構造をきちんと出力できるため、検索エンジンが内容を理解しやすく、適切にインデックスされやすいです。
- サイトマップ(検索エンジン向けの目次)やRSSフィードも簡単に用意できるため、「ブログとして必要なSEOの土台」を整えやすいです。
記事をMarkdownのまま書ける
- 記事はMarkdownというシンプルな形式で書くため、Wordやメモ帳に近い感覚で執筆できます。
- 図はMermaidで記述できるので、フローや構成図を画像編集ソフトなしで管理・更新できます。
まとめ:なぜAstroか
| ポイント | Astroのメリット |
|---|---|
| 速度 | 静的生成で表示が速く、体感が良い |
| SEO | タイトル・説明・構造を整えやすく、検索されやすい |
| 執筆 | Markdown・Mermaidで記事と図を一元管理 |
| 運用 | サーバー側のプログラム(PHPなど)の更新に追われない |
「ブログを速く、検索されやすく、運用はシンプルに」を実現したい方に、Astroは向いています。
全体像 ── 何を使い、どう流れるか
ブログ構築の全体像を、システム構成として整理しました。
flowchart TB
subgraph 執筆
A[Obsidian] --> B[Cursor]
B --> C[Git]
end
C -->|push| D[GitHub]
D -->|自動デプロイ| E[Cloudflare Pages]
E --> F[読者]
| 役割 | ツール | 何をするか(初心者向けの言い換え) |
|---|---|---|
| ナレッジ・下書き | Obsidian | Markdownでアイデアや下書きを蓄積するメモアプリ |
| 記事編集・AI支援 | Cursor | 記事の清書・整形をAIの助けを借りて行う編集ソフト |
| バージョン管理 | Git | 変更履歴を管理し、GitHubへ「送る」ために使うソフト |
| コード置き場・連携 | GitHub | 記事や設定ファイルを預けるクラウド。Cloudflareと連携すると「ここに送ると自動でブログが更新される」 |
| 公開・配信 | Cloudflare Pages | 預かったファイルをWebページに変換し、HTTPSで配信する無料のホスティング |
記事を公開する流れは次のとおりです。
- ObsidianまたはCursorでMarkdownの記事を書く(図はMermaidで記述可能)
- プロジェクト内で
git add→git commit→git push - GitHubにpushされると、Cloudflare Pagesが自動でビルド・デプロイ
- 数分後、ブログに記事が反映される
サーバにログインしたり、管理画面で「公開」ボタンを押したりする必要はありません。Gitの操作だけで公開まで完結します。
事前準備 ── アカウントとツールの一覧
以下のアカウントとソフトウェアを先に用意すると、その後の手順がスムーズです。いずれも無料で始められます。
作成するアカウント(いずれも無料)
| サービス | 何をするか | 取得の目安 |
|---|---|---|
| GitHub | ブログの記事や設定ファイルを預ける「クラウドの保管庫」です。Cloudflareと連携すると、ここにファイルを送るだけでブログが更新されます。 | ブラウザで github.com を開き、「Sign up」からメールアドレスで登録 |
| Cloudflare | ブログをインターネット上に公開する「配信役」です。Pagesという機能で、GitHubに置いたブログを無料で公開できます。 | ブラウザで cloudflare.com を開き、アカウント作成 |
| アクセス解析(Google Analytics)や検索での表示改善(Search Console)に使います。既にGmailなどで利用していれば新規登録は不要です。 | 既存のGoogleアカウントでOK |
インストールするソフトウェア(パソコンに追加するもの)
| ソフト | 何に使うか | インストール方法(初心者向け) |
|---|---|---|
| Node.js(LTS版) | Astroを動かすために必要です。「LTS」は長期間サポートされる安定版という意味です。 | 1. ブラウザで nodejs.org を開く 2. 緑色の「LTS」ボタンをクリックしてダウンロード 3. ダウンロードしたファイルを実行し、画面の指示に従って「Next」で進め、最後に「Install」で完了 4. インストール後、パソコンを一度再起動すると確実です |
| Git | 記事や設定の「変更履歴」を管理し、GitHubに送るために使います。 | Windows: git-scm.com で「Download for Windows」をクリックし、ダウンロードしたファイルを実行。基本的にそのまま「Next」で進めてOK。Mac: 多くの場合すでに入っています。入っていない場合は、ターミナルで xcode-select --install を実行 |
| Cursor(推奨) | 記事の推敲や設定ファイルの編集を、AIの助けを借りながら行う編集ソフトです。 | cursor.sh を開き「Download」をクリック。ダウンロードしたファイルを実行してインストール |
| Obsidian(推奨) | メモやブログの下書きをMarkdownで蓄積・整理するアプリです。 | obsidian.md を開き「Get Obsidian」をクリック。お使いのOS用をダウンロードしてインストール |
インストールの確認(Node.jsとGit)
- Windows: スタートメニューから「コマンドプロンプト」または「PowerShell」を開く。Mac: 「ターミナル」を開く。
- 次の2つを順に入力してEnterを押す。
node --version→ 「v20.〇.〇」のように表示されればNode.jsはOK。
git --version→ 「git version 2.〇.〇」のように表示されればGitはOK。
独自ドメイン(任意だが推奨)
- 独自ドメインとは、自社のブログ用の「〇〇.com」のようなアドレスです。年間約1,000〜2,000円程度で取得できます。
- 取得できるサービス例:お名前.com、Cloudflare Registrar、Google Domains など。Cloudflare Registrarで取得すると、後の設定が楽になることが多いです。
具体的な作業手順(5つのステップ)
IT初心者の方でも「何を開いて、何を入力すればよいか」が分かるように、操作をできるだけ具体的に書いています。表示される画面や質問は、バージョンによって多少異なる場合がありますが、流れは同じです。
ステップ1:開発環境の準備(フォルダ・Git・GitHub)
1-1. 作業用フォルダを作る
- Windows: エクスプローラーで「ドキュメント」や「C:」を開き、右クリック→「新規作成」→「フォルダ」で、名前を「Projects」などにします。
- Mac: Finderで「ホーム」を開き、右クリック→「新規フォルダ」で「Projects」などを作成します。
- このフォルダのフルパス(例:
C:\Users\あなたの名前\Projectsや/Users/あなたの名前/Projects)をメモしておくと、あとで便利です。
1-2. ターミナル(コマンドを入力する画面)を開く
- Windows: スタートメニューで「cmd」または「PowerShell」と入力し、表示された「コマンドプロンプト」または「Windows PowerShell」をクリック。
- Mac: 「Launchpad」や「Spotlight」(Command+Space)で「ターミナル」と入力して起動。
1-3. 作業フォルダに移動する
- Windowsの例:
cd %USERPROFILE%\Projects - Macの例:
cd ~/Projects - 入力してEnterを押すと、これから実行するコマンドがこのフォルダ内で行われます。
1-4. Gitに自分の名前とメールを登録する(初回のみ)
- 次の2行を、あなたの名前とGitHubに登録したメールアドレスに置き換えて実行します。
git config --global user.name "あなたの名前"
git config --global user.email "your-email[at]example[dot]com"
※ [at] は @ に、[dot] は . に置き換えて、GitHubに登録したメールアドレスの形式で入力してください。
1-5. GitHubにログインできるようにする
- 方法A(おすすめ): GitHubのサイトで「Personal Access Token」を作成し、パソコンからGitHubに初めてpushするときに、パスワードの代わりにそのトークンを入力します。手順は GitHubのヘルプ「トークンの作成」 を参照してください。
- 方法B: 「GitHub CLI」をインストールし、ターミナルで
gh auth loginを実行すると、ブラウザが開いてログインできます。
ここまでで、「記事や設定ファイルをGitで管理し、GitHubに送る」土台ができます。
ステップ2:Astroでブログ用プロジェクトを作成
2-1. ターミナルで、作業フォルダ(Projects)にいることを確認する
- まだであれば
cd %USERPROFILE%\Projects(Windows)またはcd ~/Projects(Mac)を実行。
2-2. Astroのプロジェクトを作成する
- 次のコマンドを入力してEnter。
プロジェクト名の部分は、英数字で好きな名前(例:my-blog)にします。
npm create astro@latest プロジェクト名
2-3. 画面に出る質問に答える
- Where should we create your new project? → そのままEnter(指定した名前のフォルダが作られます)。
- How would you like to start your new project? → 矢印キーで 「Use blog template」 を選んでEnter。ブログ用のひな形が入ります。
- Do you plan to write TypeScript? → Yes を選んでEnter。
- How strict should TypeScript be? → Strict で問題ありません。Enter。
- Install dependencies? → Yes を選んでEnter。
- Initialize a new git repository? → Yes を選んでEnter。
2-4. プロジェクトのフォルダに入る
- 次のコマンドで、作成したプロジェクトの中に移動します(
プロジェクト名は2-2で付けた名前に合わせてください)。
cd プロジェクト名
2-5. ブログ用の追加パッケージを入れる
- 次のコマンドを実行します。サイトマップ(検索エンジン用の目次)やRSS(配信用)のために使います。
npm install @astrojs/sitemap @astrojs/rss
2-6. 自分のパソコン上でブログを表示してみる
- 次のコマンドを実行します。
npm run dev
- 画面に「Local: http://localhost:4321」のような表示が出たら、ブラウザでそのURLを開きます。ブログのトップページが表示されればOKです。
- 確認したら、ターミナルで Ctrl+C(MacはControl+C)を押して、開発サーバーを止めます。
ここまでで、「自分のパソコンの中でブログが動いている」状態になっています。
ステップ3:サイトの名前・URL・SEOの設定
3-1. 設定ファイルを編集する
- Cursor(またはメモ帳など)で、プロジェクトフォルダ内の astro.config.mjs を開きます。
site: 'https://〇〇〇.com'のような行を探し、本番で使うブログのURL(まだなければ仮のURLでOK)に書き換えて保存します。- 同じプロジェクト内の src/consts.ts を開き、サイトのタイトル(名前)・説明文・著者名などを、自分のブログ用に書き換えて保存します。
3-2. 検索エンジン向けの設定を用意する
- public フォルダの中に robots.txt というファイルを作成し、検索エンジンに「このサイトを巡回してよい」と伝える内容を書きます(詳細はセットアップガイドを参照)。
- RSS(記事一覧を配信するためのファイル)は、Astroのブログテンプレートによってはすでに用意されている場合があります。なければ src/pages に rss.xml.js を作成し、サイト名・URL・記事一覧を出力する設定を追加します。
ここまでで、ローカルで「ブログとして体裁とSEOの土台が整ったサイト」が動く状態になります。
ステップ4:GitHubに上げて、Cloudflare Pagesで公開する
4-1. GitHubで新しいリポジトリを作る
- ブラウザで github.com にログインする。
- 右上の「+」→「New repository」をクリック。
- Repository name に、わかりやすい名前(例:
my-blog)を入力。 - Public を選び、「Create repository」をクリック。
- 作成された画面に、「…or push an existing repository from the command line」という枠が出ます。そこに表示されている 2行のコマンド(
git remote add origin …とgit push -u origin main)をあとで使います。
4-2. 自分のパソコンからGitHubに送る(push)
- ターミナルで、プロジェクトのフォルダの中にいることを確認します(
cd プロジェクト名で移動)。 - 次の3つを順に実行します(2行目は「〇〇」の部分を、追加した記事の内容に合わせて短く説明する文に変えてOKです)。
git remote add origin https://github.com/あなたのGitHubユーザー名/リポジトリ名.git
git add .
git commit -m "初回:ブログのひな形を追加"
git push -u origin main
git pushのとき、GitHubのユーザー名とパスワードの代わりにPersonal Access Tokenを聞かれたら、トークンを入力します。これでGitHub上にブログのファイルがアップロードされます。
4-3. Cloudflare Pagesでブログを公開する
- ブラウザで dash.cloudflare.com にログインする。
- 左メニューで 「Workers & Pages」 をクリック。
- 「Create application」 → 「Pages」 → 「Connect to Git」 をクリック。
- GitHub を選び、表示に従ってGitHubとCloudflareを連携する。その後、先ほど作ったリポジトリ(例: my-blog)を選ぶ。
- Build settings で、次のように入力します。
- Framework preset: Astro
- Build command:
npm run build - Build output directory:
dist
- 「Save and Deploy」 をクリックする。
- ビルドが終わると、〇〇〇.pages.dev のようなURLが表示されます。そのURLをブラウザで開くと、ブログがインターネット上に公開されています。
ここまでで、「GitHubにpushするだけで、自動でブログが更新される」状態になります。
ステップ5:独自ドメインとSSL(HTTPS)の設定(任意)
- 独自ドメイン(例: company-blog.com)を取得している場合、Cloudflareの「Custom domains」からそのドメインを追加できます。
- 画面の指示に従い、ドメイン取得先(お名前.comなど)で表示されたネームサーバを、Cloudflareに表示されているものに書き換えます。
- SSL(HTTPS) は、Cloudflare側で自動的に有効になるため、多くの場合は追加の設定は不要です。ブラウザのアドレスバーに鍵マークが出ていれば、安全に通信されています。
ここまでで、「独自ドメイン+HTTPS」のブログが公開されている状態になります。
💡 私が実際にハマったポイント:このブログの構築で個人的に手間取ったのは、Cloudflare側のドメイン設定(ネームサーバ書き換え後の反映待ちと、Pagesへの紐付けの順序)と、OGP画像(SNS共有時に表示されるサムネイル)の自動生成 の2点でした。前者はネームサーバの伝搬に時間がかかる(数分〜数十分)ことを知っていれば落ち着いて待てます。後者は、各記事ごとに heroImage を用意するか、自動生成スクリプトを組むかで運用方針が分かれるところで、サイト立ち上げの最初に方針を決めておく ことをおすすめします。
記事の書き方と公開の流れ
記事はMarkdownで、図はMermaidで
- 記事本文は Markdown(.md)で記述します。「# 見出し」「- 箇条書き」「| 表 |」などのルールで書くと、そのままブログの見出し・リスト・表として表示されます。
- フローチャートや構成図は Mermaid で書けます。記事内で「mermaid」と指定したコードブロックに図の指示を書くと、ブログ上で図として表示されます。画像ファイルを別途用意する必要はありません。
各記事に必要な「見出し情報」(Frontmatter)
ブログの1記事は1つのMarkdownファイルです。ファイルのいちばん上に、次のような「見出し情報」を書きます。これを Frontmatter(フロントマター) といいます。
---
title: 記事のタイトル(日本語でOK)
description: 記事の短い説明(検索結果・OGPに表示される)
pubDate: 2026-02-11
updatedDate: 2026-02-11
category: digitalization
tags: []
heroImage: /images/blog/my-first-post.png
ogpCatchphrase: OGP画像用のキャッチフレーズ(未指定時はdescriptionを使用)
type: article
draft: false
relatedPosts:
- dx-subsidy-flowchart-comparison
popularityRank: 5
---
必須項目
| 項目 | 説明 |
|---|---|
| title | ブログに表示される記事タイトル |
| description | 検索エンジン・SNS・OGPで表示される説明文 |
| pubDate | 公開日(YYYY-MM-DD または ISO形式) |
| category | カテゴリ(digitalization / ai / cybersecurity / ceo-interview / case-study / news / subsidy / tools / josys のいずれか) |
オプション項目
| 項目 | 説明 | デフォルト |
|---|---|---|
| updatedDate | 更新日 | なし |
| tags | タグの配列 | [] |
| heroImage | ヒーロー画像のパス(/images/blog/ など) | なし |
| ogImage | OGP専用画像(未指定時はheroImageを使用) | なし |
| ogpCatchphrase | OGP画像用キャッチフレーズ(未指定時はdescriptionを使用) | なし |
| type | 記事タイプ(article / interview / case-study / news) | article |
| actionItems | 今日からできるアクションのリスト | なし |
| draft | true で下書き(RSS・サイトマップから除外) | false |
| relatedPosts | 関連記事のスラッグのリスト | なし |
| popularityRank | 人気記事ランキング(1〜10、サイドバーに表示) | なし |
このブロックの下から、通常のMarkdownで本文を書いていきます。
公開までの流れ(日常の更新)
- 下書き:Obsidianの「drafts」フォルダなどで、Markdownの記事を書く。
- 清書:必要に応じてCursorで文章を整えたり、AIに推敲を頼んだりする。
- 配置:完成した記事ファイルを、プロジェクト内の src/content/blog/ フォルダに置く。ファイル名は英語とハイフンがおすすめ(例:
my-first-post.md)。 - Frontmatterを書く:上記のとおり、記事の先頭にタイトル・説明・日付・カテゴリなどを書く。
- 公開(GitでGitHubに送る):ターミナルでプロジェクトフォルダに移動し、次の3つを実行する。
git add .
git commit -m "記事追加: 〇〇のポイント"
git push
- git add . = 変更したファイルを「この内容で公開します」とマークする
- git commit -m ”…” = その内容をひとまとまりの「更新」として記録する
- git push = その記録をGitHubに送る
GitHubに送られると、Cloudflare Pagesが自動でビルド(記事をWebページに変換)し、数分後にブログに反映されます。日々の更新は、この3コマンドで完結します。
Obsidian×Cursorで執筆効率を上げる
- Obsidian:日々のメモやナレッジをMarkdownで蓄積し、ブログの下書きのたたき台に使う。
- Cursor:AIに「この文章を整えて」「見出しを付けて」と頼み、記事のクオリティを上げつつ手間を減らす。
「ブログ用の記事だけ別ツール」にせず、普段のメモと記事執筆を同じMarkdownベースでつなげると、継続しやすくなります。生成AIの業務活用の全体像については「中小企業向け生成AI活用ガイド」で解説しています。
私自身、本ブログを運用していて「やっぱりWordPressにすればよかった」と感じた瞬間は、正直に言って一度もありません。Cloudflare × Astro の構成は Markdownで記事が書け、サイト構成も自由に修正でき、AIによる改修・機能追加も非常にやりやすい。さらに、WordPressのように GUIでブログ設定を細かく調整する手間がほぼない ため、サイト運用の心理的負担が一段低くなります。プラグイン依存・PHPバージョンの世話・有料テーマ選び、といった「WordPressならでは」の手間を一切踏まずに済むのが、長く運用するうえで効いてくる選択だと感じています。
★今日からできるアクション
この記事を読んで、明日からすぐに取りかかれるアクションをまとめました。
すぐできる(10分以内)
- GitHub・Cloudflareのアカウントを作成する(まだの場合)
- Node.jsとGitが入っているか、ターミナルで
node --versionとgit --versionを実行して確認する
今週中に
- Astroのブログテンプレートでプロジェクトを1つ作成し、
npm run devでローカル表示を確認する - Cloudflare PagesにGitHubリポジトリを連携し、
.pages.devのURLで公開できるところまで進める
今月中に
- 独自ドメインを取得し、CloudflareでカスタムドメインとSSLを有効にする
- 1本だけ、Markdownで記事を書き、
git pushで公開する流れを体験する
まずは「アカウント作成」と「Node.js・Gitの確認」から始めると、心理的ハードルが低く、その後の手順書も進めやすくなります。
まとめ
本記事の内容をまとめると、次のとおりです。
- 低コスト:Cloudflare Pagesでホスティングは無料。かかるのは主に**独自ドメイン代(年間約1,500円程度)**で、WordPressのレンタルサーバ代を抑えられます。
- シンプルな運用:記事はMarkdownで管理し、Gitでpushするだけで自動公開。サーバの保守や管理画面の操作に追われません。
- 図はMermaidで記述できるため、フローや構成図をコードで管理でき、更新も容易です。
- 執筆効率:Obsidian×Cursorで下書き〜清書までをMarkdownベースでつなげると、記事作成の手間を削減しやすくなります。
中小企業の経営者・IT担当者の方が、「内容とメリットを理解したうえで、自分でもブログを構築できる」ように、事前準備の一覧と5つのステップ、記事の書き方と公開の流れまでを具体化してご紹介しました。
詳細な手順(各コマンドの説明・トラブルシューティング・Obsidianとのシンボリックリンク設定など)は、プロジェクト用のセットアップガイドにまとめてある形式で進めると、初回4〜6時間程度でブログの土台まで用意できると思います。
ブログは、継続してこそ集客や信頼づくりに効いてきます。まずは「小さく立ち上げて、1本記事をpushで公開する」ところから始めてみてください。記事の作成にAIを活用する場合は「中小企業向け生成AI活用ガイド」で、効果を測定する考え方は「生成AIの効果測定の進め方」で解説しています。
ブログ構築の相談・サポートについて
「手順を見ても自分で進めるのが難しそう」「ここまで一緒に設定してほしい」「AstroやCloudflareの選び方を相談したい」といった方は、X(旧Twitter) でお気軽にご連絡ください。DMやリプライで、できる範囲でお答えします。
- X: @takamurakn までメンションまたはDMで「ブログ構築の記事を読んだ」とお書きいただけると助かります。
興味がある方・困っている方は、遠慮なく声をかけていただければと思います。
以上となります。
最後まで読んでいただき、ありがとうございました。