こんにちは、futabatoです。
先日、ポートフォリオサイトを更新しました。
当初は Jekyll を使っていたのですが、味気無さを感じたので Nextra に移行しました。 Nextra は Next.js べースの静的サイトジェネレーターで、OSS のドキュメントページを用意するとなった際に Nextra を使うとシュッとイイ感じのドキュメントページを用意することができます。
私はドキュメントページ感のある個所を少し編集してポートフォリオサイトとして利用することにしました。
markdown を一通り書き終えて出来たポートフォリオサイトをデプロイしたいわけですが、GitHub Pages にデプロイするのに少し手間取ってしまったのでメモを残しておきます。
ちなみに、GitHub Pages ではなく Vercel であればポチポチで簡単にデプロイすることができます。
本題のGitHub Pages に Next.js のアプリケーションをデプロイする方法に戻ります。
結果としては、next.config.js
, package.json
, .github/workflows/nextjs.yml
を以下のように設定をしておけばよいです。
next.config.js
const withNextra = require('nextra')({ theme: 'nextra-theme-docs', themeConfig: './theme.config.tsx', }) module.exports = withNextra({ images: { unoptimized: true } })
package.json
"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "export": "next export", "deploy": "gh-pages -d build" },
.github/workflows/nextjs.yml
# Sample workflow for building and deploying a Next.js site to GitHub Pages # # To get started with Next.js see: https://nextjs.org/docs/getting-started # name: Deploy Next.js site to Pages on: # Runs on pushes targeting the default branch push: branches: ["master"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: false jobs: # Build job build: runs-on: ubuntu-20.04 strategy: matrix: node-version: [18] steps: - uses: actions/checkout@v3 - uses: pnpm/action-setup@v2 with: version: 8 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} cache: "pnpm" - name: Install dependencies run: pnpm install - name: Build run: pnpm build - name: Export run: pnpm export - name: Upload artifact uses: actions/upload-pages-artifact@v1 with: # Upload entire repository path: "out" # Deployment job deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v2
ポイントは、以下の3つになります。
pnpm export
で Next.js のアプリケーションを静的ファイルに出力できるpnpm export
で生成されるファイルはout
ディレクトリに格納されるので、out
ディレクトリをアーティファクトとしてアップロードするimages: { unoptimized: true }
とすることで画像の最適化するのをやめる(pnpm export
との互換性が無いため)