Astroを使ったら、サイト運営がどう変化したか。
メインの個人サイトはHTML&CSS、JavaScript、PHPなどで作成していましたが、このたびJavaScriptウェブフレームワークというものを使ってみることにしました。
いままではサイトの更新やデザインの変更などでまあまあ手間がかかっていましたが、それらの負担軽減が当初の目的です。それから、「フレームワーク」というものはサイト制作で一般的に使われているものっぽかったので、私もそろそろフレームワークってやつを使ってみるか……と思いました。
※ちなみにJavaScriptとPHPはほぼチャットAIに書てもらったので、自分で理解して書いたわけではありません。所持スキルと言えるのはHTML・CSS基礎くらいです。
前提ですが、このサイトはあくまで制作メモを共有するものです。正確な理解を元に書いている記事ではないので、以下につづく文章も「書き手の個人的な解釈」として読んでください。
目次
- Webフレームワーク - Astroってなに？
- Astroは何を提供してくれるのか
- 構築するまでがめちゃくちゃ大変
- Astroで生成したサイトマップ、なぜか読み込まれない（未解明）
- Netlifyでサーバー代が掛からなくなった
- 締め
Webフレームワーク - Astroってなに？
わたしが事前に知っていたのは、CSSフレームワークですね。以下の記事でそれがどういうものなのか知りました。
久々に個人サイトを作った記録｜しじみこちらは著者自身の個人サイト制作の経緯が書かれている記事ですが、文中で紹介されているCSSフレームワークのひとつがUIkitです。
これはですね、
- UIkitをダウンロードする
- 自分のウェブプロジェクトに接続する
- UIkitのルール通りにコードを書く
という方法で使うものらしい（多分）。それによってどうなるかというと、HTMLを書くだけで、UIkitに入っている「デザイン」を呼び出せる、という状態になるっぽい（多分）。つまり、他人が作ったデザインを簡単に借りることができるみたいです。
Astroは何を提供してくれるのか
私が使ったフレームワークはCSSではなく、JavaScriptフレームワークのAstroというものです。
Astro使い方は「Astroを自分のプロジェクトにインストールする→Astroのルール通りに書く」という感じ。
Astroは一言でいうと「いろんな部分を自動化することができ、整理もされるので、更新時の手間を減らしてくれる」という機能を持っています。
前述した通り、サイトを更新する際は「これいちいちやらなきゃいけないの？」と思うような手間がいくつか出てきます。
- メモアプリなどで作成した記事を、HTMLに変換する。
- 画像をWebPに変換する（軽量化のため）。
- 記事一覧に新しい記事を追加
- RSSに新しい記事を追加
- 全ページ共通のコードを、新しいページを作るたびにコピペする
上記は私がいままで記事を更新するたびにやっていて、Astroに移行してから必要なくなった手間です。つまり、これらをすべて自動化する術を提供してくれます。助かる……めっちゃ楽……
さらに副産物として、Astroのチュートリアル通りに作っていると「githubを使っためちゃくちゃ楽なサーバーアップロード方法」とか「コードの内容やファイル構造を単純化するためのやりかた」「ほぼ無料で使えるサーバー（後述）」などの知識も得られる。ありがてぇ……
メリットをより具体的に、以下にまとめます。
- コンテンツ管理が便利になる：コンテンツ情報（タイトル、日付、ジャンルなど）を一回書くだけで、複数ページに自動で反映させる仕組みを作ることができる。
- 軽量化が簡単：ルール通りに書くことで、画像を自動的にWebP形式に変換する（そのほかにも軽量化要素あり）。
- コンポーネント化できる：ページの要素をパーツ分けして管理できる。ヘッダー、ナビゲーションメニュー、フッターなど、複数ページに共通する要素をパーツのように管理することができ、
<header />のような簡単な記述で呼び出すことができる。
構築するまでがめちゃくちゃ大変
しかし、私はHTMLくらいしか真面目に座学していない人間。チュートリアルを理解し、自分のサイトに導入するまでに数ヶ月かかりました。
シンプルなAstroサイトなら１ヶ月で作ることはできました。でもHTML&CSS版サイトの機能やデザインを再現（というか移行）するのに、試行錯誤含め＋２ヶ月くらいは掛かってるかな……？もちろん単に時間がかかっただけではなく、めちゃくちゃ頭が疲れたし、終わりが見えなかった……
たぶん、サイト制作経験があって「新しいサイトを作るぞ」という人ならシンプルにチュートリアルで作ったサイトを使えるので、もっと楽だと思います……私はいろんなことをやりすぎたかもしれん。
Astroのコンセプト的に「（言語的に）シンプルで、軽量なサイトが作れる」という印象があったので、「デザインやコードをシンプルに作り直したい」みたいな欲が出てしまった。しかし、これまで散々初心者なりに改良してきて 統一されていない記述・複雑なdiv構造・理解しきれてないJavaScript要素 のあるサイトをすべてシンプル化するのは難しかった。
記事ページ・CSSも含め、全てのコードを見直すことになりました。しんどかった……でもいつかは見直さなきゃな、という思いはあったので、結果的にはこのような機会があって良かったと思います。
Astroで生成したサイトマップ、なぜか読み込まれない（未解明）
創作系個人サイトを作っている人はサイトマップを作ってる人は多くないかもしれませんが、私のメインのサイトは検索避けをしていません。むしろ検索エンジンに引っ掛かるようにしています。
Google Search Consoleに自分のサイトのページ情報を送信することで、正式なページURLが検索エンジンに表示されるようになっています。この「ページ情報」つまり記事一覧みたいなものをサイトマップと呼び、これもAstroを使えば（RSSやサイトに表示される記事一覧と同じように）自動的に生成することができます。
しかし、なぜか分からないのですが私の場合は４ヶ月近く経ってもなかなかページ情報が読み込まれませんでした。原因がぜんぜんわからん……
同じ状況に陥っている人も見つからず、AIにコードを見せても「コードは問題ない」と言われ、いまだに何もわからん。なんでやろ。未解決問題。
Netlifyでサーバー代が掛からなくなった
AstroのチュートリアルではNetlifyというサービスを使ってサイトを公開するところまで練習できるのですが、このNetlifyというやつ、サーバー代がほぼ掛からん。
Push your ideas to the web | Netlify
いまだにどういう役割のサービスなのかよく分かっていないのですが、見た感じ「サイト（またはアプリ）の構築から公開までが簡単にできますよ」みたいな紹介がされています。
Netlifyの料金体系については（今後、変更もあると思うので）まず公式情報を確認していただきたいのですが、いま（2026/09/18現在）のところ創作系個人サイトくらいの規模なら無料枠で公開できそうな印象です。github pagesに似た感じ。
「頻繁に更新（デプロイ）されるサイト」と「閲覧数が多いサイト」は有料になりそうです。でも週１〜２回更新、個人サイト規模ならほぼ問題なく使えるかと。
てがろぐなどを使っていて、すでに手軽な更新が頻繁にできている人はわざわざAstroに移行する必要もないと思うので、多くの人にメリットがありそう。注意事項としては、URLが変わる場合があります。独自ドメインを取得している人であれば「サーバー代＋独自ドメイン代」が「独自ドメイン代のみ」になるのでめちゃくちゃコストダウンするだけなのですが、そうでない人はURLが「https://任意の文字列.netlify.app」のようになりますね。この点も新規でサイトを作る場合ならスルーできる問題です。
私はいままではレンタルサーバーを有料（年6600円くらいかな？）で借りていて、サーバーのプランで「独自ドメインが無料で使える」という状態でした。それがサーバー代無料、独自ドメイン代のみ（年1000円くらい）になるようです。まだレンタルサーバー契約期間だから、独自ドメインの支払いは始まってないんですけどね。
締め
【Astroを使ったらどうなったか】の話は以上になります。次回は【Astro構築中につまづいたこと、勉強したこと】などをまとめようと思います。アリーヴェデルチ！（さよならだ）