GitHub PagesにNuxt3で作成したブログを公開しました

![imageのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/85cd718d-95f4-451c-b98e-e7094d0cfecb.png)


エンジニアとして、今後は自身のポートフォリオを作って行きたいという思いがありました。
そこでまずは自分専用のブログサイトを作成することで、ポートフォリオの基盤として活用することにしました。

公開したブログはこちらにあります。
https://y5347m.github.io/tech-blog/

ブログ記事の管理をするためのDBなどを含めると管理が大変です。
そのため何枚か書き溜めていたQiitaの記事を取得し、自身のブログにも同じ内容で公開するようにしました。

# 動作環境
- Nuxt: 3.15.4

# 全体構成
![MyBlogSystemConfiguration_phase1.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/495587e2-8f92-4237-9cb3-b120c7399130.png)

- ローカルでNuxt3のブログプロジェクトを作成し、GitHubにpushします。このブログプロジェクトのソースは公開したくなかったので、リポジトリをprivate設定しています
- このブログプロジェクトではQiita APIをコールすることで、著者情報と記事情報を取得します
Qiita APIからの取得方法と注意点は別途記事を作成しようと思います。ドキュメントは[こちら](https://qiita.com/api/v2/docs)にあります。
- 公開したいときにGitHub Actionsを実行することで、GitHub Pages用のリポジトリにpushします。このGitHub Pagesのリポジトリは公開するためにpublic設定としています

:::note info
Qiita APIで情報を取得して公開することについて

収益化しなければ問題ないと記載されているため、今回は問題ないケースだと判断しました。
https://help.qiita.com/ja/articles/qiita-api
:::

# GitHub Pagesに公開する手順
<br_ >
## 1. GitHub Pages用の新しいリポジトリを作成
新しいリポジトリを作成し、公開設定にします。
その際、リポジトリの中身は空で問題ありません。

## 2. GitHub Pagesリポジトリの設定
まず、GitHub Pagesリポジトリの「Pages」セクションに移動します。
![pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/6483e849-7bac-4dec-833a-bd1d4162d165.png)

次に、ソースとして「Deploy from a branch」を選択します。
ブランチは「main」を選択します。
![source.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/b57c5b02-1cf1-4cec-84cd-65c8c47ecc76.png)

## 3. SSHキーを生成
ローカルコンピュータでSSHキーを生成します。
このコマンドを実行したディレクトリに公開鍵と秘密鍵が生成されます。
```console
ssh-keygen -t rsa -b 4096 -C "github-actions" -f gh-pages-key -N ""
```

## 4. 公開鍵をGitHub Pagesリポジトリに追加
まず、GitHub Pagesリポジトリの「Deploy keys」セクションに移動します。

![DeployKey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/b402b460-01df-4782-9cea-492ffcc59c05.png)

`Add Deploy key`ボタンを押して以下の情報を入力します。

- title: GitHub Actions（または任意の名前）
- key: 生成した公開鍵の内容を貼り付ける

そして、`Allow write access`にチェックを入れます。
![スクリーンショット 2025-03-08 18.23.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/22425044-dce4-483f-8d7f-4774aaffdfc8.png)


## 5. ブログリポジトリにシークレットと変数を追加
以下をGitHub Secretsに追加します。
- GH_PAGES_DEPLOY_KEY: 生成された秘密鍵の内容を貼り付けます
- QIITA_TOKEN: Qiita APIのシークレット

以下をGitHub Variablesに追加します。
- BASE_URL: `/${GitHub Pagesリポジトリの名前}/`（例：`/tech-blog/`）
- GITHUB_PAGES_REPO: GitHub PagesリポジトリのSSH URLを貼り付けます

SSH URLはGitHub Pagesリポジトリ側のCodeタブで確認できます。
![スクリーンショット 2025-03-08 18.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/dfaf8c5c-6627-45d2-b158-76616a01f4ca.png)

:::note info
GitHub SecretsとVariablesに変数を登録することで、Actions内で使用することができます。

詳細は以下のページを参照してください。
https://docs.github.com/ja/actions/writing-workflows/choosing-what-your-workflow-does/store-information-in-variables
:::

## 6. ブログリポジトリ側にデプロイするためのGitHub Actionsを作成

```yml:deploy.yml
name: Deploy to Selected GitHub Pages

on:
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          ref: ${{ github.ref }} 

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 23

      - name: Install dependencies
        run: npm install

      - name: Setup environment
        run: |
          echo "NUXT_QIITA_TOKEN=${{ secrets.QIITA_TOKEN }}" >> $GITHUB_ENV
          echo "NUXT_APP_BASE_URL=${{ vars.BASE_URL }}" >> $GITHUB_ENV

      - name: Generate static files
        run: npx nuxi generate

      - name: Set SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "$GH_PAGES_DEPLOY_KEY" > ~/.ssh/id_rsa
          REPO="${{ vars.REPO_GITHUB_PAGES }}"
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          echo "REPO=$REPO" >> $GITHUB_ENV
        env:
          GH_PAGES_DEPLOY_KEY: ${{ secrets.GH_PAGES_DEPLOY_KEY }}

      - name: Deploy to GitHub Pages
        run: |
          git config --global user.name "github-actions"
          git config --global user.email "github-actions@github.com"
          cd .output/public
          git init
          git add .
          git commit -m "Deploy to GitHub Pages (${{ github.event.inputs.user }})"
          git branch -M main
          git remote add origin $REPO
          git push -f origin main
```

以下、補足説明です。

ここでは環境変数を設定しています。
```yml
      - name: Setup environment
        run: |
          echo "NUXT_QIITA_TOKEN=${{ secrets.QIITA_TOKEN }}" >> $GITHUB_ENV
          echo "NUXT_APP_BASE_URL=${{ vars.BASE_URL }}" >> $GITHUB_ENV
```
- `NUXT_QIITA_TOKEN`はNuxt3のプロジェクト内でQiita APIを使用するためのトークンを設定しています
- `NUXT_APP_BASE_URL`は[Nuxt公式ドキュメント](https://nuxt.com/deploy/github-pages)に記載がある通り、GitHub Pagesでカスタムドメインを利用しない場合は設定しろ、と記載があります。静的サイトを生成してGitHub Pagesに公開する際、CSSのパスがずれてしまい読み込めないらしく、この変数を設定する必要があります

ここでは、SSHを設定してGitHub Pagesリポジトリへpushする前の準備をしています。
```yml
   - name: Set SSH Key
        run: |
          mkdir -p ~/.ssh
          echo "$GH_PAGES_DEPLOY_KEY" > ~/.ssh/id_rsa
          REPO="${{ vars.REPO_GITHUB_PAGES }}"
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          echo "REPO=$REPO" >> $GITHUB_ENV
        env:
          GH_PAGES_DEPLOY_KEY: ${{ secrets.GH_PAGES_DEPLOY_KEY }}
```

## 7. デプロイアクションを実行
作成したアクションを実行します。
![スクリーンショット 2025-03-08 18.30.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/b8a371ad-2646-47b8-a6e8-dac58bf793d6.png)

## 8. 公開
GitHub Pages側のactionsが自動的に動きます。
![スクリーンショット 2025-03-08 18.41.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/0b5d5701-410f-4b94-8043-824ec0220810.png)

成功するとURLが表示されているので、アクセスすれば公開されたページが表示されています。

# さいごに

今回はGitHub Actionsを活用して、最小限の構成でブログを公開する方法を紹介しました。
今後は静的サイトではなく、動的なコンテンツを取り入れてカスタマイズ性を高めたいと考えています。
また、デザインもより洗練させていく予定です。