ブログを何で書くか
ブログを始めるにあたって、まずは「何で書くか」を調べました。
なるべくお金をかけずにやりたい。でも、自宅にサーバーを構築してWordPressを動かすのも、今の時代どうなんだろう……と。
昔は自宅でWebサーバーやメールサーバーを動かしていたこともありましたが、今からまたそれをやるのはちょっと違う気がしました。
そんな感じで色々調べていたら、Astroに出会いました。しかもCloudflareを使えば、無料枠で運用できそうです。
ということで、正直よく分からないままAstroで行くことに決めました。最近のWeb界隈の技術は、ほとんど分かっていません。
まずはAstroとはなんぞや
まずは公式チュートリアルを途中までやって、なんとなく雰囲気をつかみました。
あとは、Codexを使えばなんとかなるだろうと（笑）。
AstroPaperでブログを作ってCloudflareにデプロイするまでに変更した設定
ということで、備忘録がわりに記事を書いていこうと思います。素人なので、誤りがあるかもしれません。
このブログは、Astro製のブログテーマAstroPaperをベースに作りました。
AstroPaperは最初からかなり完成度が高くて、テーマを入れた時点で「もうこれでいいのでは？」くらいには整っています。
ただ、自分のブログとして動かすとなると、サイト名、表示件数、SNSリンク、デプロイ先、アクセス解析など、ちょこちょこ触るところが出てきました。
今回は、ローカル環境でAstroPaperを用意するところから、Cloudflareで運用開始するまでに変更した設定をまとめます。
ローカル環境を準備する
まずはローカルにAstroPaperベースのプロジェクトを作りました。
使ったコマンドはこちらです。
npm create astro@latest -- --template satnaing/astro-paperこれでAstroPaperのテンプレートを指定してAstroプロジェクトを作れます。
プロジェクト名などを聞かれるので、画面の案内に沿って進めます。作成後は、作ったディレクトリに移動してローカルサーバーを起動します。
cd blog
npm run devブラウザでhttp://localhost:4321を開いて、AstroPaperの画面が表示されれば準備完了です。
最初にこの状態で一度表示確認しておくと、あとで何か壊れたときに「自分の変更が原因かどうか」を切り分けやすくなります。
サイト基本情報
まず触ったのはsrc/config.tsです。
ここにはサイト全体の基本情報がまとまっています。AstroPaperを自分のブログにするなら、最初に見る場所だと思います。
export const SITE = {
website: "https://alpaca-press.com/",
author: "alpaca",
profile: "",
desc: "ブログの説明",
title: "アルパカ プレス",
ogImage: "astropaper-og.jpg",
lightAndDarkMode: true,
postPerIndex: 4,
postPerPage: 4,
scheduledPostMargin: 15 * 60 * 1000,
showArchives: true,
showBackButton: true,
editPost: {
enabled: false,
text: "Edit page",
url: "https://github.com/satnaing/astro-paper/edit/main/",
},
dynamicOgImage: true,
dir: "ltr",
lang: "ja",
timezone: "Asia/Tokyo",
} as const;主に見直したのは次の項目です。
author: 投稿者名title: ブログ名lang: 日本語サイトなのでjatimezone: 日本向けなのでAsia/TokyopostPerIndex: トップページの記事表示件数postPerPage: 一覧ページの記事表示件数showArchives: アーカイブページ表示showBackButton: 記事詳細から戻るボタン表示editPost.enabled: GitHub編集リンクを無効化dynamicOgImage: 記事ごとのOG画像生成を有効化
websiteは、本番ドメインに合わせる項目です。canonical URLやサイトマップ、OGP URLに影響するので、独自ドメインで運用するならここは忘れずに変えておきます。
トップページの説明文
トップページのヒーロー部分も、自分のブログ内容に合わせて変えました。
対象はsrc/pages/index.astroです。
<p>
このブログの説明。
</p>AstroPaperの初期状態だと、どうしてもテーマ説明っぽさが残ります。ここを自分の言葉に変えるだけで、だいぶ「自分のブログ感」が出ました。
SNSリンク
SNSリンクはsrc/constants.tsで設定しました。
export const SOCIALS: Social[] = [
{
name: "X",
href: "https://x.com/alpaca_press",
linkTitle: `${SITE.title} on X`,
icon: IconBrandX,
},
{
name: "YouTube",
href: "https://www.youtube.com/@jp_alpaca_video",
linkTitle: `Road to Scenic Japan`,
icon: IconYoutube,
},
] as const;使うSNSだけ残して、使わないGitHub、LinkedIn、Mailなどは表示しないようにしました。
AstroPaperはアイコン類が最初から用意されているので、リンク先を差し替えるだけでかなり簡単に調整できます。このへんはありがたいですね。
Astro設定
astro.config.tsでは、Astro本体、Markdown、画像、フォント、環境変数などを設定しています。
このブログでは、主に次の設定を見ています。
export default defineConfig({
site: SITE.website,
integrations: [
sitemap({
filter: page => SITE.showArchives || !page.endsWith("/archives"),
}),
],
image: {
responsiveStyles: true,
layout: "constrained",
},
});siteにはSITE.websiteを渡しています。これでサイトマップやcanonical URLなどがサイト設定と連動します。
@astrojs/sitemapも有効にしています。ブログを公開するなら、検索エンジン向けにサイトマップは入れておきたいところです。
画像設定では、レスポンシブ画像向けのスタイルとconstrainedレイアウトを有効にしました。
Markdownとコード表示
Markdownまわりもastro.config.tsで設定しています。
markdown: {
remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
shikiConfig: {
themes: { light: "min-light", dark: "night-owl" },
defaultColor: false,
wrap: false,
transformers: [
transformerFileName({ style: "v2", hideDot: false }),
transformerNotationHighlight(),
transformerNotationWordHighlight(),
transformerNotationDiff({ matchAlgorithm: "v3" }),
],
},
},目次用にremark-toc、折りたたみ用にremark-collapseを使っています。
コードブロックはShikiで表示し、ライトテーマとダークテーマを分けています。差分表示や行ハイライトも使えるようにしています。
技術メモを書くブログなら、コード表示は最初に整えておくとあとが楽です。あとから直すより、最初に好みの見た目にしておいたほうが気持ちよく書けます。
フォント
フォント設定も調整しました。
experimental: {
preserveScriptOrder: true,
fonts: [
{
name: "Google Sans Code",
cssVariable: "--font-google-sans-code",
provider: fontProviders.google(),
fallbacks: ["monospace"],
weights: [300, 400, 500, 600, 700],
styles: ["normal", "italic"],
},
{
name: "Noto Sans JP",
cssVariable: "--font-noto-sans-jp",
provider: fontProviders.google(),
fallbacks: ["sans-serif"],
weights: [400, 500, 700],
styles: ["normal"],
},
{
name: "M PLUS 2",
cssVariable: "--font-mplus2",
provider: fontProviders.google(),
fallbacks: ["sans-serif"],
weights: [400, 500, 700],
styles: ["normal"],
},
],
},日本語ブログなので、Noto Sans JPやM PLUS 2を使えるようにしました。
レイアウト側ではFontコンポーネントを使い、M PLUS 2をCSS変数として読み込んでいます。
<Font
cssVariable="--font-mplus2"
preload={[{ subset: "latin", weight: 400, style: "normal" }]}
/>日本語フォントは表示品質に直結するので、ブログ全体の印象をかなり左右します。 ※PageSpeed Insightsのスコアを見て調整するかもです。
Cloudflare Workers Static Assets対応
Cloudflareへデプロイするために、wrangler.jsoncを追加しました。
{
"name": "blog",
"compatibility_date": "2026-05-14",
"assets": {
"directory": "./dist",
"not_found_handling": "404-page"
}
}Astroのビルド成果物はdistに出力されます。
なので、Cloudflare Workers Static Assetsには./distを配信対象として渡します。
not_found_handlingには404-pageを指定しました。これで存在しないページにアクセスしたとき、Astro側で生成した404ページを使えます。
npm scripts
Cloudflare向けのコマンドもpackage.jsonに追加しました。
{
"scripts": {
"deploy:cf": "npm run build && wrangler deploy",
"preview:cf": "npm run build && wrangler dev"
}
}deploy:cfは、AstroをビルドしてからWranglerでデプロイします。
preview:cfは、Cloudflare Workersに近い形でローカル確認するためのコマンドです。
通常のastro previewでも静的サイトの確認はできますが、Cloudflareでの配信に近い挙動を見たい場合はwrangler devのほうが安心です。
Google Analytics
運用開始後、アクセス解析用にGoogle Analytics 4も追加しました。
測定IDは環境変数で渡します。
PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXXastro.config.tsのenv schemaに追加し、src/layouts/Layout.astroで本番ビルド時だけGoogle tagを出力するようにしました。
const enableGoogleAnalytics =
import.meta.env.PROD && PUBLIC_GA_MEASUREMENT_ID;Cloudflare Workers Static Assetsでは、静的アセットのみのWorkerに実行時変数を追加できません。
ただし、Astroで必要なのはビルド時変数です。そのため、Cloudflareの自動ビルド側のBuild environment variablesにPUBLIC_GA_MEASUREMENT_IDを設定しました。
ここは少しつまずきやすいポイントでした。画面上の「変数を追加できません」を見ると焦りますが、見る場所が違っただけでした。
運用開始までにやった流れ
全体の流れはこんな感じです。
npm create astro@latest -- --template satnaing/astro-paperでプロジェクト作成- ローカルで
npm run devして表示確認 src/config.tsでサイト名、作者、言語、タイムゾーンを設定- トップページの説明文を自分のブログ用に変更
- SNSリンクをXとYouTubeに変更
- Markdown、コード表示、フォント設定を確認
wrangler.jsoncを追加deploy:cfとpreview:cfを追加- CloudflareのGit連携で自動ビルド設定
- Google Analytics用のビルド時環境変数を追加
AstroPaperは完成度が高いテーマなので、ゼロから作るよりかなり早くブログを立ち上げられました。
一方で、公開サイトとして使うには、サイトURL、言語、タイムゾーン、SNS、デプロイ、アクセス解析あたりは自分の環境に合わせて見直したほうがよいと感じました。
まとめ
AstroPaperを使うと、ブログとして必要な基本機能は最初からそろっています。
今回変更した設定は、主に「自分のブログとして運用するための設定」と「Cloudflareで公開するための設定」でした。
特に大事だったのは次の点です。
src/config.tsでサイト情報を整えるlangとtimezoneを日本向けにする- トップページの説明文を自分のブログ内容にする
- SNSリンクを実際に使うものだけにする
wrangler.jsoncでdistを静的アセットとして配信するpackage.jsonにCloudflare向けコマンドを追加する- Google AnalyticsはBuild environment variablesで設定する
テーマを導入して終わりではなく、自分の運用に合わせて少しずつ設定を詰めていくことで、ちゃんと自分のブログになっていく感じがありました。
次回
次回はCloudflareへデプロイした時の記録を残しておこうと思います。