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

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

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

1. はじめに

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

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

前半の「構築編」では、次のところまで進めました。

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

これで、ローカルでは動いている状態になりましたが、これだけでは公開・運用・保守という、Webサイトの本質的な部分がまだ整っていません。

この「運用編」では、次の内容を扱います。

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

ここを押さえておくことで、壊れにくく・安全で・更新しやすい静的サイト運営が可能になります。

2. GitHubでバージョン管理する

AstroのWebサイトをローカルで管理して、FTPアプリでアップロードすることもできますが、長期運用を考えると非効率なことがあります。

GitHubを使ってバージョン履歴を管理することを強くおすすめします。

  • どのファイルをいつ変更したかの履歴が追える
  • 不具合が起きたときに、過去の状態に戻せる

など良いことだらけです。

ここでは、難しいGit操作はしないで、GitHubの「Clone/Pull/Push」のうち、Pushのみを使います。

GitHubの操作は、公式アプリの「GitHub Desktop」を使うのが簡単です。

インストールしたら「Create New Repository…」を選択して、

  • Nameにリポジトリの名前、
  • Local PathはローカルのAstroプロジェクトフォルダ

を指定します。これで初期設定は完了です。

何かファイルを変更したら、

  1. Summaryにひとことコメント
  2. Descriptionには、必要な場合に補足メモ
  3. Pushを押す

これで、GitHubに更新履歴付きのバックアップがされました。

3. NetlifyでWebサイトを公開する

Netlify（ネットリファイ）は、静的WebサイトやWebアプリケーションのためのホスティングサービスです。

AWS S3やGitHub Pagesに近いサービスですが、Astro+GitHubとの連携がスムーズで、次のような特徴があります。

  • 独自ドメインとSSLに対応
  • CDNで高速表示
  • 月100GBまでの転送量は無料

使い方もシンプルで、

  1. Astroでカスタマイズした内容をGitHubにPush
  2. Netlifyで自動でBuildして公開

できます。

まずは「Sign up」からアカウント登録します。

Push your ideas to the web | Netlify

プロジェクトを作成して、GitHubと連携します。

設定はほとんどこれだけで、GitHub DesktopのアプリでPushするとWebサイトが更新されます。

サブドメインで表示が確認できました。

3-1. Netlify Formsでお問い合わせフォーム

Astroのような静的Webサイトでは、そのままではお問い合わせフォームが動きません。

フォーム送信にはサーバー側の処理が必要だからです。

そこで、「Netlify Forms」を使うと、お問い合わせフォームの内容の保存、メール通知、スパム対策まで、必要なものが揃います。

Forms setup | Netlify Docs

設定は簡単で、やることは2つです。

  1. 作ったフォームにコードを追加
  2. メール送信先を設定

お問い合わせフォーム側では、たとえばこのように指定します。

<form
data-netlify="true"
form-name="contact"
>

メール送信先はNetlifyの管理画面で設定します。

3-2. ドメイン設定

次に、このNetlifyのサーバーと独自ドメインを連携します。

やることは、Netlify側でドメインを指定して、ドメイン管理サービス側のDNS設定を、Netlifyで指定された内容に変更することです。

例として、お名前.comを使っている場合、

  • ルートドメインのAレコードを、Netlifyで指定されたIPアドレスに変更
  • www用のレコードはCNAMEレコードを設定
    • ホスト名：www
    • 種別：CNAME
    • 値：ドメイン

Netlifyではwww付きのURLを推奨しています。

  • CDNがフルに働く
  • リダイレクトが安定
  • 将来的なマルチリージョン構成にも対応しやすい

などが理由です。

DNS伝播（でんぱ）には最短5分〜最長24時間かかりますが、最近は本当数分で完了することが多いです。

3-3. PageSpeed Insights

公開後は、一度パフォーマンスをチェックしておきます。

  • PageSpeed Insights
  • ChromeのLighthouseアプリ

どちらも中身は同じエンジンです。

初期状態のAstroのテーマでも、かなり高いスコアが出るはずです。

4. コードエディタの設定とAIエージェント

4-1. VSCode

コード編集には、Visual Studio Code（VSCode）を使うことを前提とします。

まずは拡張子が.astroのファイルをVSCodeに紐づけます。

  1. Finderで.astroファイルを選択
  2. ⌘Command + I」か、メニューバーの「ファイル > 情報を見る」
  3. 「このアプリケーションで開く」で「VSCode」を選択
  4. 「すべてを変更…」 をクリック

します。

次に、VSCodeにAstroの拡張機能をインストールします。

シンタックスハイライトやコード補完が有効になって、編集効率が上がります。

このタイミングで、Astro公式ドキュメントをざっと眺めておくと理解がスムーズです。

はじめに | Docs

4-2. Codex

AstroのテーマをAIエージェントでカスタマイズするために、VSCodeに「Codex」の拡張機能をインストールします。

デフォルトのままだと少し使いづらいので、次のように配置を調整します。

  1. Codexのアイコンを「^Control + クリック」
  2. 「移動先 > セカンダリ サイド バー」を選択

します。Codexのウインドウが右側に表示されました。

  • 「Switch mode」を「Chat」にして計画をたてたり
  • 「Agent」にしてファイルを書き換えまで任せられるモード

といった形でテーマのカスタマイズをサポートしてくれます。

Codex – OpenAI’s coding agent - Visual Studio Marketplace

5. Markdown記法

Markdown（マークダウン）記法は、文章に#（シャープ）などの記号をつけて書くだけで、文書構造を正しくマークアップできる書式です。

HTMLで書くとこうなります。

<h1>見出し</h1>
<p>段落</p>
<ul>
 <li>リスト1</li>
 <li>リスト2</li>
</ul>

Markdownでは、同じ内容を次のように書けます。

# 見出し
段落
- リスト1
- リスト2

たとえばYouTubeの動画を埋め込むタグなども、そのままテキストとしてMarkdownファイルに書き込めるので、Astroとの相性がいいです。

Markdownに対応したエディタには、「Bear」や「Ulysses」などがありますが、設計思想が違います。両方トライアル期間があるのでお試しすることをおすすめします。

  • 見た目が美しくて書いていて気持ちいい
  • 気分でテーマを変えられる
  • 文書構造に基づいて自動的にもくじを生成してくれる

など、書くことに集中できます。

Bear - Markdown Notes

Ulysses

6. Astro/テーマ/Node.jsのアップデート方針

最後に、「作ったあとどうするか」という話です。

たとえばWordPressでWebサイトを運営していると、どうしても定期的なアップデートやセキュリティ対策が必要になります。

Astroは静的サイトなのでその負荷は大きく下がりますが、それでも

  • Astro本体
  • テーマ
  • Node.js

の3つは、半年〜1年に一度くらいのペースで見直すと安心です。

仮にバージョンアップで不具合が起きたとしても、問題が起きるのはローカル環境です。

バージョンを戻したり、GitHubのバックアップから復元することも簡単です。

管理画面にセキュリティホールが発生する危険性がないのも、静的ファイルのセキュリティ面の強さです。

6-1. テーマのアップデート

テーマをカスタマイズをしている場合は、

  • テーマの変更点を確認
  • 必要な部分だけ、自分のプロジェクトに取り込む

という運用が現実的です。

テーマのアップデートに合わせるのではなく、自分のテーマに必要な変更だけを持ってくるという意識がいいと思います。

6-2. Astro本体のアップデート

Astroのバージョンはpackage.jsonで管理されています。

  • 5.1→5.2などのマイナーアップデートは、基本的に対応
  • 5.2→6.0のようなメジャーアップデートは、別プロジェクトで検証してから適用

という方針を基本として、現状が安定しているなら、あえて現状のパージョンのまま使い続ける判断も十分ありです。

6-3. Node.jsのアップデート

Astroの土台となっているのがNode.jsです。

安定していることを最優先したいので、

  • Current（通常版）ではなく
  • LTS（Long-Term Support：長期サポート版）だけを追う

という方針に絞るのが安全です。

7. ミニマルなおすすめテーマ

ミニマルで扱いやすいテーマをいくつかご紹介です。

Astro Nano

Astro Sphere

Astro Micro

Astro Modular

Chiri

8. さいごに

前半の「構築編」と後半の「運用編」を通して、AstroでWebサイトを制作して、公開・運用を始めるまでの流れを段階的に整理してきました。

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

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