【AstroPaperでブログを作る】第2回：Astro PaperをGitHub＋Cloudflare Pagesで爆速公開する

こんにちは、ＩＫＫＯＨです。前回の「第1回：Node.jsの準備からローカル開発スタートまで」では、海外の洗練されたAstro用テーマ「Astro Paper」をベースに、ローカル環境で技術ブログの土台を構築しました。

第2回となる今回は、ローカルで完成したブログをGitHubへプッシュし、Cloudflare Pagesへデプロイして独自ドメインで世界公開する手順を解説します。

🛠️ 今回のゴール

サンプル記事を整理し、トップページ、aboutページを編集する
1本目の記事を作成する
GitHubリポジトリへのプッシュとGitでの記事管理をマスターする
Cloudflare Pagesにデプロイする

1. サイトの日本語化と独自コンテンツへの編集

まずは、初期状態の英語の文言やサンプルデータを削除・編集し、独自仕様のブログへとカスタマイズします。

1-1. サンプル記事の削除と整理

src/content/posts/ フォルダの中を確認すると、AstroPaperのサンプル記事（.md や .mdx ファイル）がいくつか入っています。これらは不要なため、フォルダごと消さずに中のファイルだけをすべて削除するか、別の安全なフォルダへ退避させて、フォルダ内を一旦空にします。

Warning

フォルダ内に記事が1本も無い場合、起動時やビルド時にエラーとなりますので、このあと1本目の記事を作成します。

1-2. 各ページが参照する「サイト基本情報」の編集

ブログのタイトルや言語設定などの根幹は、ルートディレクトリにある astro-paper.config.ts で一元管理されています。このファイルをエディタで開き、独自の情報に書き換えます。

// astro-paper.config.ts の編集例
export default defineAstroPaperConfig({
  site: {
    url: "ikkoh-llc.jp", // 独自ドメイン
    title: "ＩＫＫＯＨブログ", // サイトのタイトル
    description: "合同会社ＩＫＫＯＨのブログサイトです。", // サイトの説明
    author: "ＩＫＫＯＨ", // 自分の名前
    lang: "ja", // "ja"を指定
    timezone: "Asia/Tokyo", // タイムゾーンを日本に
    // ...
  }
});

1-3. サイト共通部分の日本語化

Astro Paperの多言語対応（i18n）の仕組みを利用して、画面上の英語（Posts, Tags, Searchなど）を日本語に変えます。 astro.config.ts の i18n.defaultLocale が "ja" になっていることを確認した上で、src/i18n/lang/ja.ts を作成（または編集）し、以下のように翻訳を定義します。

// src/i18n/lang/ja.ts の記述例
export default {
  posts: "記事一覧",
  tags: "タグ",
  search: "検索",
  about: "当サイトについて",
  // ...画面の表示に合わせて日本語テキストを定義
};

1-4. トップページとaboutページの編集

トップページの編集: src/pages/index.astro を開きます。メインの挨拶文や、新着記事の表示件数などのレイアウトを日本語に変更します。
aboutページの編集: src/content/pages/about.md を開きます。ここには自己紹介などを、通常のマークダウン形式で自由に記述します。

2. 1本目の記事作成とGitでのソース管理

サイトの見た目が整ったら、実際に公開する最初の記事を作成し、Gitへアップロードします。

2-1. 1本目の記事（Markdown）を作成する

src/content/posts/ フォルダの中に、新しく first-post.md というファイルを作成し、最上部の設定（フロントマター）と本文を記述します。

---
author: ＩＫＫＯＨ
pubDatetime: 2026-07-17T00:00:00+09:00
title: 最初の記事
slug: first-post
featured: true
draft: false
tags:
  - お知らせ
description: 最初の記事です。
---

## ここに本文

最初の記事の本文です。

💡公開の罠対策: draft: false になっていることを必ず確認してください。ここが true（下書き）のままだと、記事が表示されません。また、pubDatetime は世界標準時（UTC）との時差を考慮し、必ず現在時刻より前の過去時間に設定しておかないと、こちらもやはり記事が表示されません。

2-2. GitHubリポジトリへの初プッシュ

GitHub上で「空のPrivate（非公開）リポジトリ」を作成し、表示されたURL（https://github.com）に対して、以下のコマンドを順に実行してソースコード一式をアップロードします。

cd C:\blog\astro-paper-blog
git init
git config --global user.email "あなたのメールアドレス"
git config --global user.name "あなたのユーザー名"
git add .
git commit -m "first commit"
git branch -M main
git remote add origin github.com
git push -u origin main