このサイトをビルドして公開する

Astroで作ったサイトを、ビルドしてレンタルサーバー(public_html)へ公開します。

このガイドのサイトは、Astro(エイストロ)という道具で作られた 静的サイト です。Markdownで書いたページを、ふつうのHTMLファイルに変換(ビルド)して公開します。ここでは、その変換と公開の手順を説明します。

全体の流れ

手順書のページは、src/content/docs/ の下に、Markdownファイルを置いて作ります。置く場所が、上部のタブ(セクション)に対応します。

ファイルの先頭に、次のような情報を書きます。

---
title: ページのタイトル
description: ページの短い説明(省略できます)
group: 左のメニューでのグループ名
order: 1
---

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

注意書きは、> [!NOTE]、> [!TIP]、> [!IMPORTANT]、> [!WARNING]、> [!CAUTION] で始まる引用として書くと、色つきの囲みになります。

プロジェクトのフォルダ(package.json があるフォルダ)で、次を実行します。初回は、先に npm install が必要です。

npm install
npm run dev

表示されたURL(http://localhost:4321/ など)をブラウザで開きます。ファイルを保存すると、画面が自動で更新されます。

検索は、npm run dev では使えません。ビルドしたあとの確認(npm run preview)で使えます。

公開用のファイルを作ります。

npm run build

dist フォルダに、公開用のファイルと、検索用のデータ(pagefind フォルダ)ができます。ビルドのたびに、dist の中身は作り直されます。

ビルドした結果を、公開前に確認するには、次を実行します。

npm run preview

dist フォルダの 中身すべて を、サーバーの公開フォルダにアップロードします。dist フォルダごとではなく、中身を入れてください。

public_html/
  index.html
  _astro/
  pagefind/
  docs/
  posts/
  tags/
  ...

pagefind フォルダも、必ずアップロードしてください。検索機能が使えなくなります。

ページを直したときは、もう一度ビルドして、dist の中身を上書きアップロードします。

ドメインの直下ではなく、https://example.com/guide/ のようなサブフォルダに公開する場合は、astro.config.mjs に、次のように設定してからビルドします。

export default defineConfig({
  site: 'https://example.com',
  base: '/guide',
});

public_html/guide/ の中に、dist の中身をアップロードします。