エンジニアとして、今後は自身のポートフォリオを作って行きたいという思いがありました。
そこでまずは自分専用のブログサイトを作成することで、ポートフォリオの基盤として活用することにしました。
公開したブログはこちらにあります。
https://y5347m.github.io/tech-blog/
ブログ記事の管理をするためのDBなどを含めると管理が大変です。
そのため何枚か書き溜めていたQiitaの記事を取得し、自身のブログにも同じ内容で公開するようにしました。
動作環境
- Nuxt: 3.15.4
全体構成
- ローカルでNuxt3のブログプロジェクトを作成し、GitHubにpushします。このブログプロジェクトのソースは公開したくなかったので、リポジトリをprivate設定しています
- このブログプロジェクトではQiita APIをコールすることで、著者情報と記事情報を取得します
Qiita APIからの取得方法と注意点は別途記事を作成しようと思います。ドキュメントはこちらにあります。 - 公開したいときにGitHub Actionsを実行することで、GitHub Pages用のリポジトリにpushします。このGitHub Pagesのリポジトリは公開するためにpublic設定としています
Qiita APIで情報を取得して公開することについて
収益化しなければ問題ないと記載されているため、今回は問題ないケースだと判断しました。
https://help.qiita.com/ja/articles/qiita-api
GitHub Pagesに公開する手順
1. GitHub Pages用の新しいリポジトリを作成
新しいリポジトリを作成し、公開設定にします。
その際、リポジトリの中身は空で問題ありません。
2. GitHub Pagesリポジトリの設定
まず、GitHub Pagesリポジトリの「Pages」セクションに移動します。
次に、ソースとして「Deploy from a branch」を選択します。
ブランチは「main」を選択します。
3. SSHキーを生成
ローカルコンピュータでSSHキーを生成します。
このコマンドを実行したディレクトリに公開鍵と秘密鍵が生成されます。
ssh-keygen -t rsa -b 4096 -C "github-actions" -f gh-pages-key -N ""
4. 公開鍵をGitHub Pagesリポジトリに追加
まず、GitHub Pagesリポジトリの「Deploy keys」セクションに移動します。
Add Deploy keyボタンを押して以下の情報を入力します。
- title: GitHub Actions（または任意の名前）
- key: 生成した公開鍵の内容を貼り付ける
そして、Allow write accessにチェックを入れます。
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タブで確認できます。
GitHub SecretsとVariablesに変数を登録することで、Actions内で使用することができます。
詳細は以下のページを参照してください。
https://docs.github.com/ja/actions/writing-workflows/choosing-what-your-workflow-does/store-information-in-variables
6. ブログリポジトリ側にデプロイするためのGitHub Actionsを作成
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
以下、補足説明です。
ここでは環境変数を設定しています。
- 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公式ドキュメントに記載がある通り、GitHub Pagesでカスタムドメインを利用しない場合は設定しろ、と記載があります。静的サイトを生成してGitHub Pagesに公開する際、CSSのパスがずれてしまい読み込めないらしく、この変数を設定する必要があります
ここでは、SSHを設定してGitHub Pagesリポジトリへpushする前の準備をしています。
- 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. デプロイアクションを実行
作成したアクションを実行します。
8. 公開
GitHub Pages側のactionsが自動的に動きます。
成功するとURLが表示されているので、アクセスすれば公開されたページが表示されています。
さいごに
今回はGitHub Actionsを活用して、最小限の構成でブログを公開する方法を紹介しました。
今後は静的サイトではなく、動的なコンテンツを取り入れてカスタマイズ性を高めたいと考えています。
また、デザインもより洗練させていく予定です。