Astroで作成したページをgithub pagesで公開する方法

こちらの記事では、Astroで制作したページ（blog）をGitHub pagesに公開する手順を説明します。

GitHub pagesとは

You can use GitHub Pages to host a website about yourself,
your organization, or your project directly from a repository on GitHub.

GitHub Pagesはあなた自身やあなたの属する組織、プロジェクトのサイトを
GitHubのリポジトリから直接公開できるホスティングサービス。

GitHub Pages とは、GitHubリポジトリから直接静的サイトをホストすることができるサービスで、
リポジトリを使ってサイトのコードやファイルを保存しておけば、GitHubが自動的に公開してくれます。

GitHub Pagesを活用すれば、サイトを即座に立ち上げることができるため、
ポートフォリオやオープンソースプロジェクト、その他の静的コンテンツを簡単に配信することができます。

今回はこちらのサービスを利用してAstroで作ったページを公開していきます。

1. リポジトリの作成

自身のGitHubアカウントにログインし、リポジトリを作成します。
今回はastroという名前でリポジトリを作成しています。

このリポジトリに作成したファイルを上げていきます。

2. GitHub Actionsの作成

AstroサイトをGitHub Pagesに公開するには GitHub Actionsの作成が必要になります。
上記のリンク先を確認しながら、deploy.ymlファイルを作成します。

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://450k.github.io',
  base: '/astro',
})

となります。

3. パスの調整

bseeの設定を記述している場合、
このまま公開を行うと、画像のパスなどがすべて切れてしまうため、
画像のパス、リンクのパスをすべて変更する必要があるります。

vs codeの一括置換などで、

<a href="/about">About</a>
↓↓↓
<a href="/450k/about">About</a>

<img src="/image/logo.png">
↓↓↓
<a src="/450k/image/logo.png">

<img src={/image/****}>
↓↓↓
<a src={/450k/image/****}>

などに変更してください。

npm run dev

でローカルサーバーを起動し、表示確認を行います。

4. GitHubのリポジトリへコミット

パスの変更が終わり、表確認もできたらmainブランチへコミットします。
あとは自動的にGitHubが処理してくれますので、
GitHub PagesのURLにアクセスして確認してください。