Astroフレームワークで静的サイト構築の手順とノウハウ

2026年7月14日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 Astro フレームワークで静的サイトを構築する具体的な手順とノウハウの解説
2 Astroフレームワークの導入方法とプロジェクト構築
- 2.1 Node.js環境の準備
- 2.2 Astro CLIによるプロジェクト初期化
3 MarkdownファイルとFrontmatterの活用法
- 3.1 contentフォルダの役割
- 3.2 Frontmatterでのメタデータ定義
4 .astroファイルの基本構文とコンポーネント分割技法
- 4.1 レイアウトコンポーネントの作成
- 4.2 共通部品の再利用方法
5 npm run buildコマンドによる静的サイト生成プロセス
- 5.1 ビルド時の処理フロー
- 5.2 最適化された出力結果
6 distフォルダの構成とホスティング手順（Bluehostなど）
7 GitHub ActionsによるCI/CD自動化設定例

スポンサードリンク

Astro フレームワークで静的サイトを構築する具体的な手順とノウハウの解説

Astroフレームワークは、SSG（静的サイト生成）に特化した現代的なツールとして注目を集めています。特に、高速なロード速度や最小限のリソース使用が求められる個人ブログ・ポートフォリオサイト向けに最適です。本記事では、Astroプロジェクトの立ち上げからホスティングまでをステップバイステップで解説し、実践的なビルドフローとノウハウをお伝えします。

Astroフレームワークの導入方法とプロジェクト構築

静的サイト構築にはまずAstroフレームワークの環境準備が不可欠です。Node.jsとnpm（またはyarn）をインストールし、CLIツールでプロジェクトを作成します。

Node.js環境の準備

AstroはJavaScriptベースのフレームワークであり、Node.js 16以降が必須です。最新バージョンは公式サイトで確認してください。

手順: https://nodejs.org からNode.jsをダウンロードし、インストールします。

Astro CLIによるプロジェクト初期化

Astro CLIを使用して新規プロジェクトを作成できます。テンプレート選択時にTypeScriptやReactのサポートも設定可能です。

コマンドラインで以下のコマンドを実行します。
bash npm init astro my-project
テンプレート選択画面が表示されるので、Defaultを選択してください。
cd my-project と移動し、npm install を実行して依存関係をインストールします。

注意: Astro CLIは最新版（v2.x以降）を使用することをお勧めします。古いバージョンではセキュリティアップデートが適用されない可能性があります。

MarkdownファイルとFrontmatterの活用法

AstroではMarkdownファイルを活用して、記事やページの内容を簡単に管理できます。これにより、コンテンツとデザインの分離がしやすくなります。

contentフォルダの役割

Astroプロジェクト内のcontent/フォルダにMarkdownファイルを配置します。このフォルダには、ブログ記事やFAQなど、サイトで使用するすべてのコンテンツが保存されます。

例:
/content ├── blog/ │ └── helloworld.md └── about.md

Frontmatterでのメタデータ定義

Markdownファイルの冒頭にFrontmatterを記述します。ここには、ページタイトルやカテゴリなどのメタ情報が入ります。

---
title: &quot;Astroで静的サイト構築&quot;
category: &quot;Web開発&quot;
date: &quot;2026-07-14&quot;
---

---

title: "Astroで静的サイト構築"

category: "Web開発"

date: "2026-07-14"

---

Tips: Frontmatterに記載されたメタデータは、コンポーネントから動的に読み込むことができます。これにより、ページ一覧の作成や検索機能の実装が簡略化されます。

.astroファイルの基本構文とコンポーネント分割技法

Astro独自の.astro拡張子を持つファイルでは、HTMLとJavaScriptを混在させることが可能ですが、最小限に抑えるのがポイントです。この形式により、高パフォーマンスなサイトが実現できます。

レイアウトコンポーネントの作成

共通するレイアウト（ヘッダーやフッターなど）は.astroファイルとして分離し、再利用します。

例:
astro



My Astro Site

共通部品の再利用方法

複数ページで使用するコンポーネント（ボタンやナビゲーション）は、@slotや<script>タグ内で定義します。

&lt;script&gt;
  const props = defineProps({
    text: String,
    onClick: Function,
  });
&lt;/script&gt;

&lt;button on:click={props.onClick}&gt;
  {props.text}
&lt;/button&gt;

const props = defineProps({

text: String,

onClick: Function,

});

</script>

{props.text}

</button>

実装例: components/フォルダにコンポーネントを配置し、各ページで<Header />や<Button text="投稿" onClick={() => ...} />と呼び出します。

npm run buildコマンドによる静的サイト生成プロセス

Astroは、開発環境で動作するコンテンツを本番用に変換してくれる仕組みを持っています。ここでは、ビルド時の処理フローと最適化された出力結果について解説します。

ビルド時の処理フロー

npm run buildコマンドを実行すると、Astroは以下のような処理を行います：

Markdownファイルの内容をHTMLに変換
コンポーネントやスタイルを統合して最適化
JavaScriptは不要な部分を除去（パフォーマンス向上）

最適化された出力結果

dist/フォルダに生成されたファイルは、以下のように最適化されています。

| 項目        | 内容                             |
|-------------|----------------------------------|
| **HTML**    | タグやスタイルが圧縮されている   |
| **CSS**     | 共通部分を統合してサイズを抑える |
| **JavaScript** | 不要なコードが削除されている      |

| 項目 | 内容 |

|-------------|----------------------------------|

| **HTML** | タグやスタイルが圧縮されている |

| **CSS** | 共通部分を統合してサイズを抑える |

| **JavaScript** | 不要なコードが削除されている |

distフォルダの構成とホスティング手順（Bluehostなど）

Astroで生成されたdist/フォルダの中身は、Webサーバーにアップロードすることで即座にアクセス可能になります。ここでは、Bluehostなど一般的なホスティングサービスでの手順を解説します。

出力ディレクトリの階層

dist/フォルダには以下のような構成ができます：

/dist
  ├── index.html
  ├── blog/
  │   └── helloworld.html
  ├── about.html
  └── assets/
      ├── images/
      └── css/

/dist

├── index.html

├── blog/

│ └── helloworld.html

├── about.html

└── assets/

├── images/

└── css/

FTP経由でのアップロード手順

Bluehostの管理画面からFTP接続情報を取得します。
ファイル転送ソフト（FileZillaなど）で、dist/フォルダ全体をアップロードします。
サーバー上にpublic_htmlフォルダがある場合は、dist/の中身をその中に配置してください。

注意事項: ホスティングサービスによってはhtdocsやwwwという名前のフォルダが使用されます。アップロード先の確認は必須です。

一般的なWebサーバーへの対応手順

FTP接続でdist/フォルダをアップロード
ホスティングサーバーのドキュメントルート（例: public_html/）にファイルを配置
.htaccessや設定ファイルで静的コンテンツのキャッシュ設定を行う

GitHub ActionsによるCI/CD自動化設定例

Astroプロジェクトにおいて、手動でビルド・ホスティングを毎回行うのは非効率です。GitHub Actionsによって、コード変更時自動でサイトが更新される仕組みを構築できます。

workflow.ymlの基本構成

.github/workflows/deploy.ymlに以下のような設定を追加します：

name: Deploy Astro Site

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: npm install

      - name: Build site
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

name: Deploy Astro Site

on:

push:

branches:

- main

jobs:

build-and-deploy:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v3

- name: Setup Node.js

uses: actions/setup-node@v3

with:

node-version: '18.x'

- name: Install dependencies

run: npm install

- name: Build site

run: npm run build

- name: Deploy to GitHub Pages

uses: peaceiris/actions-gh-pages@v4

with:

github_token: ${{ secrets.GITHUB_TOKEN }}

publish_dir: ./dist

本番環境への自動デプロイ

上記の設定により、mainブランチにプッシュされたコードは以下のように自動で反映されます：

GitHub Actionsが自動的にAstroプロジェクトをビルド
dist/フォルダの内容をGitHub Pagesまたはホスティング先へアップロード

実装例: ポートフォリオサイトであれば、変更後30秒以内に最新版が公開されるようになります。

記事全体の要点整理

AstroフレームワークはSSG（静的サイト生成）の最適な選択肢
MarkdownとFrontmatterを活用し、コンテンツ管理を簡単化
.astroファイルでレイアウトやコンポーネントを分割し、再利用性を高める
npm run buildにより、高性能な静的サイトが生成される
distフォルダの内容をFTP経由でホスティングサービスにアップロード
GitHub ActionsでCI/CD自動化を実現し、開発効率を向上させる

Astroプロジェクトを立ち上げてみましょう。あなたの個人ブログやポートフォリオサイトが、最適な形で公開されます。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Astro

comment コメントをキャンセル

: Astro

Astro eコマーステンプレート選定ガイド:パフォーマンスとSEO対策

Astroによるeコマースサイト構築で重要な島アーキテクチャ設計、テンプレート選定ポイント、日本語最適化特徴を解説。パフォーマンスとSEO対策に焦点。

: Astro

Astro 0.30 新機能解説: SSR最適化と導入ガイド

Astro 0.30ではSSRパフォーマンス改善やコンポーネント構造再設計、プラグインエコシステム拡充などが導入。開発者向けの実用性評価とプロジェクトへの適用方法を解説します。

: Astro

Astro: 静的サイトジェネレータの特徴とメリット

Astroは静的サイトジェネレータとして注目されており、高性能なサイト構築が可能。JavaScriptバンドル量を抑えることでパフォーマンス向上とSEO対策に貢献します。

: Astro

Astro vs Next.js 2026: 静的サイトで40%高速化のパフォーマンス比較

2026年のAstroとNext.js比較で明らかになったパフォーマンス傾向。静的サイトではAstroが40%のロードタイム改善を達成。

: Astro

アストロプロダクツ MC196 2026限定モデルの魅力と特徴

2026年にアストロプロダクツから発売される限定モデルMC196は、高耐久素材とスタイリッシュなデザインで注目。収納力や使い勝手に優れた特徴を解説。

2026年版 Electron vs Tauri 徹底比較とベンチマーク結果

EclipseとScene Builderの連携導入ガイド