ysk-hack-log
戻る

【無料】AstroPaperで最速ブログ構築｜WordPress不要の静的サイト入門

「【無料】AstroPaperで最速ブログ構築｜WordPress不要の静的サイト入門」の記事アイキャッチ

「ブログを作りたいけど、WordPressはサーバー代がかかるし設定が面倒」「情報が散らばっていて、結局どこから手をつければいいか分からない」——そんな人向けに、無料・最速・必要な機能は全部入りでブログを立ち上げる手順を、この1ページで完結するようにまとめました。使うのは Astro の人気テーマ AstroPaper と、無料ホスティングの Cloudflare Pages です。

Table of contents

Open Table of contents

なぜWordPressではなくAstroなのか

WordPressは高機能ですが、個人ブログには重いことが多いです。レンタルサーバー代が毎月かかり、プラグインの更新やセキュリティ対策も自分で面倒を見る必要があります。表示速度もチューニングしないと遅くなりがちです。

一方 Astro は「静的サイトジェネレーター（SSG）」です。あらかじめHTMLを生成しておくため表示が速く、サーバー不要で無料ホスティングに載せられ、攻撃対象になるDBもありません。個人ブログに必要な要素だけを、低コストで満たせるのが選ぶ理由です。

静的サイトのメリット・デメリット

メリットは明確です。①表示が速い（SEO評価にも直結）、②無料で公開できる、③堅牢（DBやサーバーサイド処理がないので壊れにくく、乗っ取られにくい）。

デメリットは、コメント欄やお問い合わせフォームのような動的機能が標準では使えないこと。ただしこれらは外部サービス（コメントなら giscus、フォームなら Googleフォームなど）で補えるため、ブログ用途では実質的に困りません。

おすすめテーマ「AstroPaper」とは

AstroPaper は、Astro製の無料・オープンソースのブログテーマです。個人ブログに欲しい機能が最初から揃っているのが強みです。

「テーマ選びで消耗せず、すぐ書き始めたい」人に最適です。

AstroPaperのインストール手順

前提として Node.js（LTS版）が必要です。

まず、パッケージマネージャの pnpm（Performant npm）を用意します。npm より高速で、ディスク使用量も少ないのが特長です。本記事では pnpm を使うので、先にインストールしておきましょう。Node.js に付属の npm から入れるのが手軽です。

# pnpm をインストール
npm install -g pnpm

# 入ったか確認（バージョンが表示されればOK）
pnpm -v

続いて、AstroPaperのプロジェクトを作成します。

# プロジェクトを作成（AstroPaper テンプレート）
pnpm create astro@latest my-blog -- --template satnaing/astro-paper

cd my-blog
pnpm install
pnpm dev

http://localhost:4321 にアクセスして初期画面が表示されれば成功です。あとは自分用に設定を書き換えていきます。

仕組み：どのファイルを触ればいいか

AstroPaperで触る場所は、実はほんの数か所です。まず全体の地図を持っておくと、この後の作業で迷いません。

この地図をもとに、次章から 「日本語化」→「公開前のカスタマイズ」 の順に手を入れていきます。

日本語向けの設定

ここが日本語記事に一番不足しがちな情報です。AstroPaperは初期状態だとUIも日付も英語なので、次の4点を押さえると一気に日本語ブログらしくなります。

1. サイトの言語とタイムゾーン（astro-paper.config.ts）

lang: "ja",
timezone: "Asia/Tokyo",

2. ルーティングの言語設定（astro.config.ts）

i18n: {
  locales: ["ja"],
  defaultLocale: "ja",
  routing: { prefixDefaultLocale: false }, // URLに /ja/ を付けない
},

3. UI文言の日本語化（重要）

AstroPaperは src/i18n/lang/ の翻訳ファイルを読み込みます。初期は en.ts しかなく、該当言語がないと英語にフォールバックするため、lang: "ja" にしても「Home」「Posts」「Published at」などは英語のままです。en.ts をコピーして src/i18n/lang/ja.ts を作り、値を日本語に置き換えます。

// src/i18n/lang/ja.ts
import type { UIStrings } from "../types";

export default {
  nav: {
    home: "ホーム",
    posts: "記事",
    tags: "タグ",
    about: "About",
    archives: "アーカイブ",
    search: "検索",
  },
  post: {
    publishedAt: "公開日",
    updatedAt: "更新日",
    backToTop: "トップへ戻る" /* ... */,
  },
  // en.ts の全キーを同じ構造で埋める
} satisfies UIStrings;

4. 日付表示の日本語化

日付コンポーネント（src/components/Datetime.astro）は初期状態だと 16 Aug, 2026 のような英語表記です。dayjs の日本語ロケールを読み込み、フォーマットを変更します。

import "dayjs/locale/ja";
dayjs.locale("ja");
// ...
const date = datetime.format("YYYY年M月D日"); // → 2026年8月16日

あわせて、記事の description は必ず日本語で書きましょう。検索結果に表示され、SEOに効きます。（本文フォントにこだわるなら astro.config.ts の fonts に Noto Sans JP などを追加する手もあります）

公開前にカスタマイズすべきファイル

日本語化が済んだら、次は自分の情報への差し替えです。初期状態のままだとテーマ作者の情報やサンプル文が残っているので、公開する前に次の箇所を置き換えておきましょう。

変更したいもの編集するファイル
サイト名・説明・著者astro-paper.config.ts の site
SNSリンク（GitHub / X など）astro-paper.config.ts の socials
トップページ上部の文章src/pages/index.astro の #hero セクション
Aboutページの内容src/content/pages/about.md
OGP画像（SNSシェア時のサムネイル）public/default-og.jpg を差し替え
ファビコン（タブのアイコン）public/favicon.svg を差し替え
記事下の「編集」リンクを消すastro-paper.config.ts の features.editPost

サイトの基本情報は astro-paper.config.ts の site にまとまっています。

site: {
  title: "あなたのブログ名",
  description: "ブログの説明（検索結果に表示される）",
  author: "あなたの名前",
},

特に トップページの見出しや説明文 はテーマ作者の英文がそのまま残っているので、忘れずに書き換えてください。ここが第一印象を決めます。OGP画像とファビコンは、同じファイル名のまま中身を差し替えれば設定変更なしで反映されます。

また、各記事の下部に表示される「このページを編集」リンクは、初期状態ではテーマ作者のGitHubリポジトリを指しています。自分のブログでは不要なので、features.editPost を enabled: false にして非表示にしておきましょう。

features: {
  editPost: { enabled: false },
},

サンプル記事・サンプルページを削除する

AstroPaperには、テーマの使い方を説明する英語のサンプル記事が最初から入っています。このまま公開すると、自分の記事に混ざってテーマのデモ記事が表示されてしまいます。これも公開前に削除しておきましょう。

これでテーマの土台が「あなただけのブログ」になりました。仕上げに、公開する最初の1記事を書いていきましょう。

記事の書き方（VSCode＋スニペット）

記事は src/content/posts/ にMarkdownファイルを追加するだけです。ファイル先頭の「frontmatter」に情報を書きます。

---
title: はじめての記事
pubDatetime: 2026-08-16T09:00:00+09:00
description: この記事の概要
tags:
  - 日記
draft: false
---

ここから本文を書きます。

執筆は VSCode が快適です。Markdownのプレビューを見ながら書けますし、うれしいことに AstroPaperにはスニペットが最初から同梱 されています（.vscode/astro-paper.code-snippets）。Markdownファイルで次のように打つだけで、frontmatterや記事の雛形が展開されます。

途中まで入力すると候補が表示されます。候補が出ないときは Ctrl + Space（macは ⌃ + Space）を押すと、スニペットの一覧を手動で呼び出せます。あとは Enter で確定するだけです。

毎回手打ちする必要がないので執筆が爆速になります。また draft: true にすれば下書き状態で公開されないため、書きかけを安全に保存できます。

より詳しい執筆ルールは公式ガイド Adding new posts in AstroPaper theme も参考になります。

最初の1記事が用意できたら、いよいよ公開です。

Cloudflare Pagesで無料公開する

デプロイは Cloudflare Pages がおすすめです。無料枠が寛大で、グローバルCDNにより表示が速く、Astro用のプリセットが用意されているため設定が最小で済みます。

その前に、作ったプロジェクトを GitHub にアップロードしておきます。GitHubは、プログラムのソースコードをオンラインで保存・管理できる無料のサービスです。Cloudflare Pagesはこのコードを読み取ってサイトを自動でビルド・公開し、以降もコードが更新されるたびに自動で反映してくれます。まだアカウントがなければ github.com で作成し、リポジトリ（コードの保管場所）を1つ用意しておきましょう。

  1. GitHubにリポジトリを作成し、プロジェクトを push（アップロード）する
  2. Cloudflareダッシュボード → コンピュート（Compute） → Workers & Pages → アプリケーションを作成する に進む
  3. ここで「Pages」を選ぶのが最重要。ページ下部の 「Pages を導入しようとお考えですか? 始める」 のリンクをクリックしてPagesの作成に進み、GitHubリポジトリを接続する
  4. フレームワークプリセットで Astro を選択
    • ビルドコマンド：npm run build
    • ビルド出力ディレクトリ：dist
  5. 保存してデプロイ。完了すると https://〇〇.pages.dev のURLが発行される
  6. （任意）独自ドメインを割り当てれば、SSLも自動で付きます
Warning

静的サイトは必ず「Pages」を選んでください。 近年のCloudflareはWorkersを主軸に統合しており、「アプリケーションを作成する」からそのまま進むと Workers プロジェクトになりがちです。Workersとして作成すると wrangler が不要なアダプターを自動追加し、ビルドに失敗することがあります。上記の手順3のように、画面下部のPages導線から作成するのが確実です。

一度連携すれば、以降は記事を書いて git push するだけで自動的に公開されます。運用がとても楽になります。

まとめ

AstroPaper × Cloudflare Pages なら、無料・最速・必要な機能全部入りのブログを最短で立ち上げられます。

  1. pnpm create astro でAstroPaperを導入
  2. src/i18n/lang/ja.ts などで日本語化
  3. サイト名・SNS・OGP画像などを自分用にカスタマイズし、サンプルを削除
  4. 最初の1記事を書く
  5. Cloudflare Pagesに連携して公開（以降は git push するだけで更新）

まずは1記事、公開してみるところから始めてみてください。

この記事をシェア:
この記事をWhatsappでシェアこの記事をFacebookでシェアこの記事をXでシェアこの記事をTelegramでシェアこの記事をPinterestでシェア
次の記事
WinUI 3とは？はじめての人向けに全体像・参考サイト・便利ツールをまとめて解説