Astroを使ったサイト構築

Astroを使ったサイト構築

序章

本サイトは始めは素のHTMLで作っていました。コンテンツが多くなってくると全ページに対して同じ修正をするのが面倒になります。ある日、Astroがバージョンアップしたとの記事を目にしました。詳細を見たらよさげだったので移行する事にしました。

ちなみに Azure Static Web Apps を使用してフロントエンドフレームワークとライブラリを構成するによるとフレームワークは無数にあります。比較検討は全くしてませんのでご注意を。

前提

公式に手順がありますが、既存ソース修正だけで何とかする話
Azure Static Web Apps上で構築していたサイトの更新。VSCode の拡張から作って、Github flow によってデプロイ成功までした事がある。
Node.jsの説明は省略
TypeScriptの説明は省略。有効にしている。

作業内容やメモなど

記録を取らなかったので、覚えている事を箇条書き。

ソース修正

npm create astro@latest で、まずは別フォルダにて同等のページ表示まで進める。
header と footer について components 化

layouts はとりあえず一つ。

---
interface Props {
	title: string;
	description:string;
}

const { title, description } = Astro.props;
---
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="canonical" href={Astro.url} />
        <meta name="description" content={description}>
        <title>{title}</title>
    </head>

    <body>
        <slot />
    </body>
</html>

html の拡張子を astro に変更
- 文書内の{などはエラーになる。なので{’{‘}にする。
- 画像はリンク切れになった。img タグではなく Image を使うようにした。最適化してくれるそうな
enchant.js の各ゲームは、src フォルダ内にあると色々エラーを起こしたので public に移動。しかしデプロイ後にリンク切れになった。フォルダだけを含むフォルダだとコピーされないかもという事で、ダミーの placeholder.txt ファイルを作ったら反映された。本当にこれでよかったのかは不明。
他にも色々 public に入れる。広告関連とか。一方で staticwebapp.config.json は src 内でも問題なかった。
- 404.html
- ads.txt
- app-ads.txt
- favicon.ico
- google****.html
- robots.txt

記事一覧はこれまで手作業で更新していたが自動化。Markdownだとタイトルが取れるがastroファイルだと良く分からず諦めた。

---
const posts = await Astro.glob("./*/index.astro");
const urls = Array.from(posts, (post) => post.url);
const urlsEndSlash = Array.from(
    urls,
    (url) => url + (url?.endsWith("/") ? "" : "/"),
);
---
<ul style="list-style-type: none">
    {
        urlsEndSlash.map((url) => (
            <li>
                <a href={url}>{url}</a>
            </li>
        ))
    }
</ul>

サイトマップを自動生成するように変更。これまではhttps://www.xml-sitemaps.com/で作っていた。

https://docs.astro.build/ja/guides/integrations-guide/sitemap/

sitemap.xml が sitemap-index.xml,sitemap-0.xml に変わったので再登録した。

旧フォルダの更新

npm install astro@latest
npm install @astrojs/sitemap@latest
.gitignore のマージ
package.json のマージ
scripts で start を書き換えるかどうかは迷ったが、自動リロードは便利なので astro の物にした。
src フォルダ入れ替え
public フォルダコピー
管理ファイル色々移動
- astro.config.mjs
- tsconfig.json
swa-cli.config.json にある outputLocation を dist に変更。必要かどうかは不明。
書き換え直後はビルドが通らなかった。VSCodeを開き直したら動いた。

デプロイ関連

workflow 設定の変更
- app_location: src → /
- output_location: src → dist
デプロイ後のエラーで Node.js のバージョンが古いと出たので package.json に以下を追記。参考
```
"engines": {
    "node": ">=18.14.1"
}
```

今後

AstroはMarkdownのサポートがあるので、今後はMarkdownで記事を書くようにしたい。まずはこのページからそうすべきだったけれど。

(修正 2026/02/22) 次のサービスを使用して、このページ及び以前のページをMarkdownに変換しました。

https://md-to.com/ja/html-to-markdown/

top

Astroを使ったサイト構築

序章

前提

作業内容やメモなど

今後

その他の投稿