Library
投稿日 約11分で読めます

AstroでつくるミニマルなWebサイト｜「かんたん」だけど「むずかしそう」【構築編（つくる）】

AstroでつくるミニマルなWebサイト
もくじ

1. はじめに

このコースでは、Astroを使ってミニマルなWebサイトを構築して、最終的にはNetlifyで公開するところまでを解説します。

使用するのは、Mac、Astro、VSCode、GitHub、Netlifyです。

前半の「構築編」では次の内容を扱います。

  1. Astroを動かす環境を整える
  2. 作業用フォルダをつくる
  3. Astroプロジェクトをつくる
  4. テーマを適用する
  5. Astroのファイル構成を理解する
  6. カスタマイズの準備
  7. 静的HTMLデータとして書き出す

そして後半の「運用編」では、

  1. GitHubでバージョン管理する
  2. NetlifyでWebサイトを公開する
  3. コードエディタの設定とAIエージェント
  4. Markdown記法
  5. Astro/テーマ/Node.jsのアップデート方針

といった実践的な運用を扱います。

Astroは静的なWebサイトをつくるためのフレームワークです。

これまで、WordPressでテーマをカスタマイズしながらWebサイト制作をしてきたデザイナーであれば、Astroは十分に扱えます。

2. なぜAstroなの？

Astroは、静的HTMLを生成するフレームワークです。

WordPressをはじめとしたCMSとは思想が異なり、以下のような特徴を持っています。

  • PHPやデータベースが不要
  • 管理画面を持たないため構造が壊れにくい
  • ビルド時に必要なHTML・CSS・JavaScriptのみ生成される
  • シンプルで高速で、セキュリティリスクが極めて小さい

一方でWordPressは、柔軟なCMSとしての強みを持ちながらも、

  • PHPとデータベースが必要で、Webサイトを構成する要素が複雑
  • テーマ独自の機能やプラグインとの相性による不具合
  • 管理画面が常にブルートフォースアタックの攻撃対象になる
  • 放置するとセキュリティ面でのリスクが上がる

という構造上の避けられない前提があります。

Astroはこれらの制約から距離を置いて、極めてシンプルな構造でWebサイト制作を行えます。

ミニマルで壊れにくいWebサイトを長期運用したいデザイナーに、最適な選択肢です。

3. 「かんたん」だけど「むずかしそう」

ターミナル.appを開くと、急にプログラムの世界に入ってしまったように感じるかもしれません。

でもやっていることはFinderと同じで、文字で操作をしているだけです。

フォルダに移動して、ボタンを押すようにコマンドを実行する。それがターミナル.appです。

4. ここで使うコマンドのまとめ

使うコマンドは、これですべてです。

# フォルダへ移動する
cd ~/Astro-Playground

# 新規Astroプロジェクトを作成する
npm create astro@latest プロジェクト名

# プロジェクトに入る
cd プロジェクト名

＃ いまいるディレクトリのファイル一覧を表示する
ls

# 必要なパッケージをインストールする
npm install

# 開発サーバーを起動する
npm run dev

# 静的HTMLとして書き出す
npm run build

# distの内容をプレビューする
npm run preview

これ以上の複雑な操作はありません。

5. Astroを動かす環境を整える

必要なものをインストールして設定をしていきます。

5-1. Node.jsのインストール

Astroを動かすために、Macに「Node.js」をインストールします。

これで、Astroの設定に必要なコマンドがターミナルで使えるようになります。

公式サイトからダウンロードして、「.pkg」を開いてインストールを進めます。

Node.js — Run JavaScript Everywhere

インストールされるのは以下の2つです。

Node.jsは、JavaScript を実行する本体

npmは、Node Package Managerの略で、Node.jsのパッケージ管理システムです。

5-2. ターミナル.appを開く

ターミナル.appを開きます。

Spotlightで「terminal」や「ターミナル」と入力して起動します。

もしくは「アプリケーション/ユーティリティ」から「ターミナル.app」を開きます。

開いたウインドウで、次のコマンドを実行します。1行ずつでもOKです。

node -v
npm -v

それぞれのバージョンの数字がでれば準備完了です。

ターミナル.appでのコマンドは、ただのボタンです。

ほら、ぜんぜん難しくない。

6. 作業用フォルダをつくる

順番にコマンドを入力していきます。

# 1. ホームフォルダに移動する
cd ~ 

# 2. 「Astro-Playground」という名前のフォルダを作る
mkdir Astro-Playground

# 3. その作ったフォルダに入る
cd Astro-Playground

cdはChange Directoryの略で、フォルダを移動するコマンドです。

mkdir Astro-Playgroundは、 Make Directoryの略で、この名前のフォルダを作成（名前は任意でOK）します。

cd Astro-Playgroundで、そのフォルダの中に入ります。

Finder操作だと、ホームフォルダを開いて、新規フォルダを作成して、そのフォルダを開いた状態です。

他の場所、たとえば書類フォルダにプロジェクトを作成したい場合は、cd（スペース）まで打って、フォルダをドロップしてパスを入力することもできます。

テキストしか受け付けない雰囲気だけど、意外とこういうのもできて便利です。

cd /Users/home/Documents/Astro-Playground

7. Astroプロジェクトをつくる

このコマンドでAstroプロジェクトを作ります。

npm create astro@latest Astro-Project

create astro@latestは、Astroの最新版で新しいプロジェクトを作るコマンドです。

Astro-Projectは、作成するフォルダ名です。先ほど作ったAstro-Playgroundの中にさらにフォルダが作成されます。

このように必要なツール「コマンドラインデベロッパツール」のインストール画面がでたら、それに従ってインストールを進めます。

コマンドを実行すると、対話形式で質問されるので、次のように選んでおきます。

カーソルキーで選択してエンターキーで確定します。

最初はMinimal、あとはYesです。

Which template? → Minimal
TypeScript? → Yes
Install dependencies? → Yes
Initialize a new git repository? → Yes

Project initializing...と表示されて、10数秒ほど時間がかかります。

Good luck out there, astronaut!と表示されたらインストール完了です。

次のコマンドで、Astro-Projectの中に入ります。

cd Astro-Project

するといまホーム/Astro-Playground/Astro-Projectにいることになります。

ためしに

ls

と打つと、いまいるディレクトリにあるファイルが一覧表示されました。lsはlistの略です。

7-1. 必要なパッケージをインストール

念のため、このコマンドを実行します。

npm install

package.jsonを元に、必要なパッケージがnode_modulesにインストールされます。

7-2. 開発サーバーを立ち上げる

このコマンドで、 ローカルで Astroの開発サーバーを起動します。

npm run dev

devはdevelopmentの意味です。

Local http://localhost:4321

このようにローカルホストのURLが表示されるので、このURLをSafariなどブラウザで開きます。

「Astro」と表示された簡単なページがでればOKです。

開発サーバーを停止する場合は、ターミナルで^Control + Cを押します。

8. テーマを適用する

Astroにテーマを適用していきます。

ここでは、ミニマルで扱いやすいテーマ「AstroNano」を使います。

「Live demo」のページからデザインを確認できます。

AstroNano | Astro

8-1. テーマをダウンロードする

「Get started」からGitHubのページに行って、「Code」の「Download ZIP」からダウンロードします。

markhorn-dev/astro-nano｜GitHub

8-2. テーマをプロジェクトにコピーする

Finderでテーマをプロジェクトに上書きコピーします。

データはすべて置き換えてOKです。

node_modulesはAstroの本体で、それ以外のデータが置き換わったはずです。

不可視ファイルは「⌘Command + ⇧Shift + .」で表示/非表示を切り替えられます。

ここにある.gitignore（ギット・イグノア）は、今後GitHubでバージョン管理をするために必要なデータで、GitHubにアップしないファイル一覧が書かれ ています。

たとえばAstro本体であるnode_modulesは、データサイズはそれほど大きくないですが、ファイルの数が1万以上あるので、それらはローカルだけで管理します。

8-3. AstroNanoに必要なパッケージをインストール

次のコマンドを実行して、AstroNanoに必要なパッケージをインストールします。

npm install

package.jsonの内容を元に、必要なものがインストールされます。

インストールが終わったら、次のコマンドを実行して開発サーバーを起動します。

npm run dev

そして、 このように表示されるので、このURLをブラウザで開きます。

Local http://localhost:4321

AstroNanoのテーマが表示されればOKです。

9. Astroのファイル構成を理解する

Astroのファイル構成を見ていきます。

9-1. astro.config.mjs

コンフィグファイルで、基本的な設定をします。

siteは本番URLに合わせて変更します。

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

9-2. node_modulesフォルダ

node_modulesにはAstro本体が入っています。

触らなくてOKです。

9-3. package.json

package.jsonは、使用しているパッケージとバージョンを管理しています。

プロジェクトの仕様書なので、触らなくてOKです。

9-4. README.md

README.mdは、プロジェクトの説明書です。メモとして書き換えてしまってOKです。

9-5. publicフォルダ

publicフォルダに置かれているものは、ビルドしたときに公開用のフォルダにそのままコピーされるので、コンテンツに必要な画像などを入れます。

publicフォルダの画像を参照する場合は、パスの先頭に/をつけて絶対パスで指定します。

<img src="/images/blog/img.jpg"/>

最初から入っている必要ないものは削除してOKです。

9-6. srcフォルダ

srcフォルダが、メインとなる場所です。

Webサイトのコンテンツをここに作っていきます。

src/componentsパーツ

src/contentそれぞれの記事

src/layouts全体の共通レイアウト

src/pages主要なページ

src/stylesCSS

といった構成になっています。

9-7. tsconfig.json

tsconfig.jsonは、TypeScriptの設定ファイルです。基本的に触らなくてOKです。

10. カスタマイズの準備

開発サーバーを起動している状態で、デザインのカスタマイズを行うと、すぐにブラウザに反映されます。

デザインを変更するためにはsrc/styles/global.cssを編集しますが、内容は本当にシンプルなものしか適用されていません。

次に、src/pages/index.astroを開きます。これはトップページのファイルです。

見ていくと、色んな所にCSSのクラス名が付けられています。

これは、Tailwindという、HTML内で効率的にスタイル調整を行うためのフレームワークです。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

特徴としては、HTMLとCSSのファイルを行き来しなくてよくて、でもビルドした時には必要なCSSのみ生成されます。

たとえばこのxlを変更するとサイズが変わります。

<span class="text-xl"></span>
<span class="text-xs"></span>

11. 静的HTMLデータとして書き出す

開発サーバーでのカスタマイズが終わったら、次に静的HTMLデータを書き出します。

このコマンドでビルドすることで、Astroが、srcフォルダの内容を読み取って、HTML、CSS、Javascriptを生成します。

npm run build

distというフォルダに書き出しが行われます。

distは、distribution（配布用のデータ）の略です。

index.htmlやcssなど、Webサイトのデータが書き出されています。

このデータをサーバーにアップすることで、Webサイトとして表示できます。

このように、ローカルでコンテンツを作成して、開発サーバーで確認して、ビルドしてサーバーにアップする流れです。

11-1. distフォルダの内容をプレビューする

サーバーにアップする前に、このコマンドで、ローカル環境でプレビューして確認します。

npm run preview

distに書き出したデータを、そのままローカルでブラウザで開けばいいんじゃないの？と思いますが、ディレクトリ設定が違うのでうまく表示されません。

npm run dev

開発サーバーを起動するコマンドと違うのは、実際に書き出したdistのデータを表示しているところです。 リンクチェックや画像の最適化のチェックを行います。

12. さいごに

この「構築編」では、

  1. Astroを動かす環境を整える
  2. 作業用フォルダをつくる
  3. Astroプロジェクトをつくる
  4. テーマを適用する
  5. Astroのファイル構成を理解する
  6. カスタマイズの準備
  7. 静的HTMLデータとして書き出す

までを段階的に進めました。

後半の「運用編」では、

  1. GitHubでバージョン管理する
  2. NetlifyでWebサイトを公開する
  3. コードエディタの設定とAIエージェント
  4. Markdown記法
  5. Astro/テーマ/Node.jsのアップデート方針

を進めていきます。

ここからが、日常的な運営の本番です。

このコースは、動画とテキスト記事の両方を用意しています。理解を深めるためにも、ぜひ併用してご覧ください。

AstroでつくるミニマルなWebサイト｜「かんたん」だけど「むずかしそう」【運用編（動かす）】
スーパーカブでどこまでも行こう｜スーパーカブ C125（2024年モデル/JA71）