「完全無料」Webサイト構築入門 (1) — Astroプロジェクトの作成とブラウザ表示

クイックステップ：本章のゴール

「Astroのローカル起動」までを完了させる。

このページでは、Webサイトの「エンジン」となるAstro/Starlightをローカル環境にインストールし、ブラウザで表示（Hello World）させるまでの手順を解説する。

1. 事前準備：環境を整える

構築を始める前に、以下の2点を準備する。

Astroを動かすには Node.js (v18.14.1 以上) が必須である。

公式サイトへアクセス Node.js 公式サイトにアクセスする。
LTS版をダウンロード 「LTS」と書かれたボタン（推奨版）をクリックして、インストーラー（.msiファイル）をダウンロードする。
インストーラーを実行 ダウンロードしたファイルを開き、基本的にすべて「Next」で進めてインストールを完了させる。
- 「Tools for Native Modules」のチェックボックスが表示された場合は、チェックを入れたまま進めることを推奨する。
インストールを確認 ターミナル（PowerShellやコマンドプロンプト）を開き、以下のコマンドを入力してバージョンが表示されれば成功である。
Terminal window
```
node -v
npm -v
```

最終的な公開先として忍者ホームページのアカウントが必要となる。無料で登録できるため、今のうちに済ませておく。

Webサイトの本体を作成する。ターミナルを開き、プロジェクトを作成したいディレクトリに移動してから以下のコマンドを実行する。

プロジェクト作成コマンドを実行
Terminal window
```
npm create astro@latest
```
対話形式の質問に回答する コマンドを実行するといくつか質問される。基本的には以下のように選択すればよい。
- Where should we create your new project? -> my-math-site (任意のフォルダ名)
- How would you like to start your new project? -> Use blog template または Include sample files (Starlightを後で入れる場合はどれでも可)
- Install dependencies? -> Yes
- Initialize a new git repository? -> Yes
- Do you plan to write TypeScript? -> Yes (推奨)
Starlightの導入 （推奨）本サイトのようなドキュメント形式にする場合、Starlightを追加するのが最も近道である。
Terminal window
```
npx astro add starlight
```

作成されたフォルダ（my-math-site）の中身を確認する。主要なファイル構成は以下のようになる。

ローカル環境でブラウザ確認を行う。以下のコマンドを入力する。

「Welcome to Starlight」のような画面が表示されれば成功である。

A: Astroのインストール中にエラーが発生したり、開発サーバーが起動しなくなったりする。必ず v18.14.1 以上 （推奨はLTS版の最新）を使用すること。

A: ネットワーク環境や、実行しているフォルダの書き込み権限を確認する。また、node -v でNode.jsが正しくインストールされているか再確認すること。

A: 可能である。ただし、本ガイドでは数学ドキュメントに最適な Starlight を前提として解説を進める。

入門(2)：GitHub連携とリポジトリ管理作成したサイトのソースコードをGitHubで管理し、自動デプロイの準備を整えましょう。

他の記事を探す