astroでgithub.ioに公開する

最初に

ポートフォリオを作成しようと考え、Vueを使おうと思いましたがastroというものの存在を知り、こちらで作成しようと考えました。astroにはポートフォリオ作成用のテンプレートが用意されていて、なかなかにおしゃれです。
公式ページに載っている方法をそのまま行えばデプロイできますが、Qiitaに記事が存在しなかったので忘備録として本記事を作成しました。

astro.config.mjsを編集

buildOptionsにsiteを追加。自分のgithub.ioのURLを貼り付ける。
もしポートフォリオ用のリポジトリがhttps://<GitHubのユーザー名>.github.io/でない場合はbaseオプションを追加して、以下のようにリポジトリを指定しましょう。

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

// https://astro.build/config
export default defineConfig({
	integrations: [preact()],
	buildOptions: {
		site: "https://masaki12-s.github.io/",
        // base: "https://github.com/masaki12-s/portfolio_astro"
	  },
});

deploy用のymlファイル作成

プロジェクト内に.github/workflows/deploy.ymlファイルを作成する。そして以下のymlを貼り付ける。

name: Github Pages Astro CI

on:
  # `main`ブランチにプッシュするたびにワークフローを起動させる
  # 別のブランチ名を使う場合は`main`をあなたのブランチ名で置き換えてください。
  push:
    branches: [main]
  # GitHubのActionsタブから、このワークフローを手動で実行できるようにします。
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-20.04

    # このジョブがあなたのリポジトリに変更をプッシュすることを許可する
    permissions:
      contents: write

    steps:
      - name: Check out your repository using git
        uses: actions/checkout@v2

      - name: Use Node.js 16
        uses: actions/setup-node@v2
        with:
          node-version: 16

      # npmを使っていない場合、`npm ci`を`yarn install`や`pnpm i`に置き換えてください。
      - name: Install dependencies
        run: npm ci

      # npmを使っていない場合、`npm run build`を`yarn build`や`pnpm run build`に置き換えてください。
      - name: Build Astro
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          # `./dist`はAstroがデフォルトでアウトプットするディレクトリです。
          # 変更した場合は、こちらも更新してください。
          publish_dir: ./dist

GitHubにpushする

ここまでの設定をcommitしてpushする

GitHubのpages設定を更新する

GitHubでSettings -> Pagesに移動。
Branchをgh-pagesに変更する。

GitHubのActionsを確認

GitHubのActiionsを確認して、以下のようにbuild～deployまで正常にできていれば公開できていると思います。

最後に

今回はastroで作成したポートフォリオをGitHub.ioに公開する方法を説明しました。まだポートフォリオ自体の作成はできていないのでここからはそちらに専念しようと思います。