Skip to main content
おっとっと.log

Astro テンプレートのインストール

Website Development • Version 1.0.0 •

このガイドでは、Astro Modularテンプレートを使用してブログプロジェクトを最初から構築する方法を、実際の作業の流れに沿って詳しく解説していきます。初心者の方でも迷わず進められるよう、各ステップを丁寧に説明します。

概要

Astro Modularは、Obsidianユーザー向けに設計された柔軟なAstroブログテーマです。このテンプレートを使用することで、ObsidianをCMSとして活用しながら、マークダウンファイルから直接ブログを公開できる環境を構築できます。従来のCMSとは異なり、データベースではなくマークダウンファイルを直接管理するため、バージョン管理が容易で、テキストエディタで直接編集できるという利点があります。

前提条件

プロジェクトを構築する前に、必要な環境が整っているか確認しましょう。まず、GitHubアカウントが必要です。テンプレートの取得とリポジトリの管理に使用します。また、ObsidianをCMSとして使用する場合は、Obsidianがインストールされている必要があります。

  • GitHubアカウント - テンプレートの取得とリポジトリの管理に必要
  • Obsidian - インストール済み（ObsidianをCMSとして使用する場合）
  • Node.js 18.20.8以上
  • pnpm 7.1.0以上（推奨）または npm 9.6.5以上

Node.jsのインストール確認

まず、Node.jsがインストールされているか確認します。ターミナルで以下のコマンドを実行してください：

node --version

v18.20.8以上が表示されれば問題ありません。もしインストールされていない場合は、Node.js公式サイトからダウンロードしてインストールしてください。

pnpmのインストール

次に、pnpmがインストールされているか確認します。インストールされていない場合は、以下のコマンドでグローバルにインストールできます：

npm install -g pnpm

インストール後、バージョンを確認します：

pnpm --version

7.1.0以上が表示されれば準備完了です。

プロジェクトの取得

環境の準備が整ったら、次はプロジェクトを取得します。Astro Modularのテンプレートを取得する方法は、主に2つあります。

GitHubテンプレートを使用する方法（推奨）

最も簡単な方法は、GitHubのテンプレート機能を使用することです。この方法では、元のリポジトリとは独立した新しいリポジトリが作成されるため、自分のプロジェクトとして自由にカスタマイズできます。

まず、Astro Modularリポジトリにアクセスします。リポジトリページの上部にある「Use this template」ボタンをクリックし、「Create a new repository」を選択します。リポジトリ名と設定を選択したら、「Create repository from template」をクリックして新しいリポジトリを作成します。

作成が完了したら、ローカル環境にクローンします：

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

リポジトリをForkする方法

もう一つの方法は、リポジトリをForkすることです。この方法は、元のリポジトリの更新を追跡したい場合に適しています。ただし、Forkしたリポジトリは元のリポジトリとの関連が残るため、完全に独立したプロジェクトとして使用する場合は、テンプレート機能を使用する方が適切です。

Forkする場合は、リポジトリページの「Fork」ボタンをクリックし、フォーク先（個人アカウントまたは組織）を選択します。その後、同様にローカル環境にクローンします：

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

セットアップの開始

プロジェクトを取得したら、いよいよセットアップを開始します。まず、プロジェクトディレクトリに移動して、依存関係をインストールします。

依存関係のインストール

プロジェクトディレクトリで、以下のコマンドを実行してください：

pnpm install

このコマンドにより、以下の主要な依存関係がインストールされます：

  • Astro 5.16.4 - 静的サイトジェネレーター
  • TypeScript 5.9.2 - 型安全性
  • Tailwind CSS 3.4.17 - スタイリング
  • その他の必要なパッケージ

インストールには数分かかる場合がありますが、完了するまで待ちましょう。インストールが完了すると、プロジェクトの準備が整います。

開発サーバーの起動

依存関係のインストールが完了したら、開発サーバーを起動して、実際にサイトを確認してみましょう。以下のコマンドを実行します：

pnpm dev

コマンドを実行すると、開発サーバーが起動し、自動的にブラウザが開いて http://localhost:5000 にアクセスします。もしポート5000が既に使用されている場合は、自動的に5001にフォールバックします。

開発サーバーが起動する際には、いくつかの処理が自動的に実行されます。画像ファイルの同期、エイリアスの処理、デプロイメント設定の生成、グラフデータの生成などが行われ、開発環境が完全にセットアップされます。

ブラウザでサイトが表示されれば、セットアップは成功です。ここから、コンテンツの作成やカスタマイズを始めることができます。

本番環境へのビルド

開発が完了し、本番環境にデプロイする準備が整ったら、本番用のビルドを実行します。以下のコマンドを使用します：

pnpm build

ビルドプロセスでは、画像ファイルの同期、エイリアスの処理、デプロイメント設定の生成、グラフデータの作成が自動的に実行され、その後Astroが静的サイトをビルドします。

ビルドが完了すると、dist/ ディレクトリに本番用のファイルが出力されます。

初期設定のカスタマイズ

セットアップが完了したら、次はサイトを自分好みにカスタマイズしていきましょう。すべての設定は src/config.ts ファイルで管理されています。

基本情報の設定

まず、サイトの基本情報を設定します。src/config.ts ファイルを開き、siteConfig オブジェクトを編集します。サイトのURL、タイトル、説明、著者名、言語などを設定できます。日本語でサイトを運営する場合は、language を 'ja' に設定することをお忘れなく。

export const siteConfig = {
  site: 'https://yourdomain.com',
  title: 'Your Blog Title',
  description: 'Your blog description',
  author: 'Your Name',
  language: 'ja', // 日本語の場合は 'ja'
}

これらの設定は、サイトのメタデータやSEOに使用されるため、正確に入力することが重要です。

デプロイメントプラットフォームの選択

Astro Modularは、複数のデプロイメントプラットフォームに対応しています。src/config.ts の deployment.platform を設定するだけで、選択したプラットフォーム用の設定ファイルが自動生成されます。環境変数は不要で、設定ファイルに一度指定するだけで済みます。

deployment: {
  platform: "netlify", // "netlify" | "vercel" | "github-pages" | "cloudflare-workers"
}

対応しているプラットフォームは、Netlify、Vercel、GitHub Pages、Cloudflare Workersの4つです。選択したプラットフォーム用の設定ファイルが自動生成されます。

その他のデプロイ方法

上記のプラットフォーム以外にも、GitHub Actionsを使用してAWS S3にデプロイする方法などがあります。AWSを使用したデプロイ方法については、別記事で詳しく解説予定です。

テーマの選択

Astro Modularには、17以上の美しいテーマが用意されています。デフォルトのOxygenテーマから、Minimal、Nord、Dracula、Catppuccinなど、様々なスタイルから選択できます。src/config.ts で theme を設定するだけで、サイト全体のデザインが変わります。

theme: "oxygen", // デフォルトテーマ

テーマは後からいつでも変更できるので、まずはデフォルトのOxygenテーマで始めて、後で好みのテーマに変更することもできます。また、コマンドパレット（Ctrl+K）から「Change Theme」を選択することで、ブラウザ上でリアルタイムにテーマを切り替えて確認することも可能です。

Vault CMSの導入（オプション）

Astro Modularでは、ObsidianをCMSとして使用するためのVault CMSシステムをサポートしています。Obsidianでコンテンツを作成・管理し、Git経由でブログに公開するという、シームレスなワークフローを実現できます。

Vault CMSの詳細な導入方法については、別記事「Vault CMSの導入」を参照してください。

利用可能なコマンド

プロジェクトには以下の便利なコマンドが用意されています：

# 開発サーバー起動
pnpm dev

# 本番ビルド
pnpm build

# ビルド結果のプレビュー
pnpm preview

# 画像の同期
pnpm sync-images

# エイリアスの処理
pnpm process-aliases

# デプロイメント設定の生成
pnpm generate-deployment-config

# グラフデータの生成
pnpm generate-graph-data

# 不足している画像のチェック
pnpm check-images

# バージョン確認
pnpm version

参考資料

まとめ

このガイドでは、Astro Modularテンプレートを使用してブログプロジェクトを構築する方法を、環境の準備から初期設定まで説明してきました。プロジェクトの取得、依存関係のインストール、開発サーバーの起動、初期設定のカスタマイズまで、すべての手順を完了すれば、ブログを運用する準備が整います。

開発サーバーを起動して、ブラウザで http://localhost:5000 にアクセスし、サイトを確認してください。Obsidianを使用する場合は、Vault CMSのセットアップを行うことをお勧めします。この方法に関しては別記事で紹介予定です。

Astro Modularの豊富な機能を活用して、自分だけのブログを作り上げていきましょう。