コンテンツにスキップ
y-appブログ

Astroで始めるブログサイトの構築 (ConoHa WING版)

2026/02/16
(2026/02/17 更新)
Astro Web ConoHa WING Markdown MDX SSG SSR ソフト開発

当ブログはAstroを使って構築し直しました。これまで使っていたWordPressよりも文章の入力が楽になり、画像などのレイアウトも自由に作ることができて便利になりました。本記事ではAstroでブログサイトを作成してレンタルサーバーのConoHa WINGで配信する手順をまとめています。

なお、Cloudflareを使ってAstroのブログサイトをデプロイすることも出来ます。Cloudflareのプラン上限や独自ドメインの価格などと比較して、ConoHa WINGなどのレンタルサーバーを選択するのもよいのではないかと思います。

Astroで始めるブログサイトの構築 (Cloudflare版) y-app.tech
当ブログはAstroを使って構築し直しました。これまで使っていたWordPressよりも文章の入力が楽になり、画像などのレイアウトも自由に作ることができて便利になりました。本記事ではAstroでブログサイトを作成してCloudflare Workers経由で配信する手順をまとめています。

Astroでブログサイトのプロジェクトを作る

Section titled “Astroでブログサイトのプロジェクトを作る”

Astroは、コンテンツ駆動のWebサイトを作成するためのフレームワークです。 JavaScript/TypeScriptでの開発環境が整っていれば、Astroを使うことは容易いでしょう。

テーマを選んでプロジェクトを作成する

Section titled “テーマを選んでプロジェクトを作成する”

手っ取り早くブログサイトを作るために、既存の公式サンプルやテーマを使うことができます。当ブログではStarlightを使っています。

Themes | Astro astro.build
Elevate your style with our stellar designs.
Explore the possibilities

テーマはフィルターで絞り込むことができます。CategoriesにOfficialを選んでView resultsボタンをクリックすると、Astro公式のテーマ一覧が表示されます。

今回は blog テンプレート(全て英小文字で入力)を使ってblog-demoプロジェクトを作成します。

Terminal window
cd conoha  # `conoha`フォルダーを使用
npm create astro@latest -- blog-demo --template blog
  • Ok to proceed? (y) → yを入力
  • Install dependencies? → Yes
  • Initialize a new git repository? → Yes
ターミナルの画面イメージ

コードエディタでblog-demoを開きます。Visual Studio Codeであればcodeコマンド、Cursorであればcursorコマンドでターミナルから開くことができます。

Terminal window
code blog-demo

ブログページを追加する

Section titled “ブログページを追加する”

Astroのチュートリアルでは、Astroのページはsrc/pagesフォルダーで実装することを学びますが、blogテンプレートでプロジェクトを作成した場合、デフォルトのファイルが用意されます。

src/pages/blog/[...slug].astroはDynamic routesという仕組みを使って/blog/で始まるパスのページを実装していることが分かります。 このファイルではgetStaticPaths関数を定義しており、getCollection関数を使って src/content/blog フォルダー内のファイル一覧を取得してブログページのパスを作っています。

getStaticPaths関数の詳細
src/pages/blog/[...slug].astro(一部抜粋)
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.id },
    props: post,
  }));
}
getCollection関数が取得するファイル一覧を定義するloaderの詳細
src/content.config.ts(一部抜粋)
const blog = defineCollection({
  // Load Markdown and MDX files in the `src/content/blog/` directory.
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  // Type-check frontmatter using a schema
  schema: ({ image }) =>
    /* 省略 */
});

src/content/blogフォルダーの中に新しくファイルを作って、独自のブログページを追加してみます。

src/content/blog/hello-world.md
---
title: 'Hello world!'
description: '初めてのブログ投稿'
pubDate: '2026-02-16'
heroImage: '../../assets/blog-placeholder-2.jpg'
---


このサイトは[**Astro**](https://astro.build/)を使って作成しました。


[**Blog**](https://astro.build/themes/details/blog/)テーマを使っています。

---から---の間はフロントマターというメタデータです。 BlogテンプレートのREADMEには説明はありませんが、 ソースコードを読むと、title, description, pubDate, updatedDate, heroImageを指定できます。

フロントマターの下にMarkdown形式で本文を入力します。

コードエディタのターミナルを開いて、devサーバーを起動します。

Terminal window
npm run dev

http://localhost:4321/をブラウザで開きます。

Homeページ
Blogページ
初めてのブログ投稿

Homeページにはどのファイルを編集すればよいか説明が記載されています。ViteでおなじみのHot Module Replacement(HMR)が可能になっていますので、ここを見ながらページやヘッダー・フッターを変更することができます。

ConoHa WINGにブログサイトを公開する

Section titled “ConoHa WINGにブログサイトを公開する”

ConoHa WINGにドメインを追加する

Section titled “ConoHa WINGにドメインを追加する”

ブログサイト用のドメインを新しく作ります。既存のドメインを使うのであれば、この手順はスキップします。

ConoHa WINGにログインして、サーバー管理 → ドメインを選択し、+ ドメインボタンをクリックして新しいドメイン名を追加します。以下の画面では、契約した独自ドメインの下にサブドメイン(SSLあり)を追加しています。

サブドメインを追加する画面の例

rsyncで転送するスクリプトを作成する

Section titled “rsyncで転送するスクリプトを作成する”

プロジェクトのフォルダー直下(packages.jsonと同じ場所)に deploy-conoha.sh というスクリプトと .env ファイルを作成します。

このスクリプトではSSH経由でrsyncコマンドを使ってファイルをローカルからサーバーに転送します。このため、ConoHaのサーバー管理 → SSHでSSHアカウントを作成しておいてください。

deploy-conoha.sh
#!/bin/bash


source .env


echo
echo -e "\033[33;40;1m Deploying to ConoHa WING... \033[0m"
echo
echo -e "BUILD_DIR: \033[32m${BUILD_DIR}\033[0m"
echo -e "SERVER_DIR: \033[32m${SERVER_DIR}\033[0m"
echo


rsync -az -O --progress --delete --exclude ".DS_Store" \
    -e "ssh -o LogLevel=ERROR -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -p ${SERVER_PORT}" \
    ${BUILD_DIR} \
    ${SERVER_USER}@${SERVER_HOST}:${SERVER_DIR}
echo
echo -e "\033[33;40;1m Done! Deployed to ConoHa WING. \033[0m"
echo

.envファイルの各設定値はConoHaのSSH画面を参照してください。作成したサブドメインがblog-demo.xyz.comの場合、SERVER_DIRの設定値はpublic_html/blog-demo.xyz.comになります。

.env
SERVER_HOST=SSHサーバーのホスト名
SERVER_PORT=SSHサーバーのポート番号
SERVER_USER=SSHサーバーのユーザー名
SERVER_DIR=public_html/作成したサブドメイン名(FQDN)
BUILD_DIR=./dist/

コードエディタのターミナルでdeploy-conoha.shに実行権を追加します。

Terminal window
chmod +x deploy-conoha.sh

package.json のscriptsにdeployを追加します。

package.json(一部抜粋)
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
    "astro": "astro",
    "deploy": "astro build && ./deploy-conoha.sh"
  },

ConoHa WINGにデプロイする

Section titled “ConoHa WINGにデプロイする”

ターミナルでコマンドを実行します。

Terminal window
npm run deploy

SSHでサーバーに正常にアップロードできているかどうか確認します。

Terminal window
# SSHでサーバーにログインする
source .env
ssh -p ${SERVER_PORT} ${SERVER_USER}@${SERVER_HOST}
Terminal window
# 以下はサーバーのシェルでコマンドを実行する
cd public_html/blog-demo.xyz.com
ls

ファイルのアップロードを確認できたら、ブラウザでブログサイトのURL(https://blog-demo.xyz.com)を開くと、ConoHa WINGでデプロイしたブログサイトを見ることができます。

なお、オンデマンドレンダリング(SSR)はSSRアダプターの@astrojs/nodeを使ってNode.jsやExpressで動かす必要がありますが、Dockerやsystemdが使えないConoHa WINGでは難しそうです。

ConoHa WINGでブログサイトを管理する

Section titled “ConoHa WINGでブログサイトを管理する”

ConoHa WINGにログインして、サーバー管理 → ドメインを選択するとドメイン名のリストが表示されます。各ドメイン名の右端にあるゴミ箱をクリックして削除を行うと、ブログサイトを削除できます。ConoHa WINGではドメイン名の変更はできないようです。サブドメインの追加と削除で名前を変えてください。

サブドメインを削除する画面の例