毎度ハマるのでメモになります。
やること/ゴール
- Next.js で静的サイトを吐く
- 出力されたファイルは
mainブランチには置かない - GitHub Pages が 静的サイトジェネレータ Jekyll を使おうとするが静的サイトを吐くのは next.js なので使わない
- 今回は llm-cost-estimator を例として扱います
-
llm-cost-estimatorは任意のリポジトリ名に変更してお試しください
-
GitHub の Pages 設定
このようにしました。
Next.js で静的サイトを吐く
何がともあれ next.js と GitHub pages の環境を作ります。
npx create-next-app llm-cost-estimator --typescript
npm install gh-pages --save-dev
config を設定します。output: 'export' で静的サイトを吐くようにします。
今回は docs ディレクトリに吐くようにしています。
next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
...(process.env.NODE_ENV === 'development'
? {}
: {
output: 'export',
basePath: '/llm-cost-estimator',
assetPrefix: '/llm-cost-estimator',
distDir: 'docs',
}
), // 略
ビルドしてサイト生成を確認しておきましょう。差分が大量になるので docs 配下は GitHub 管理下にしないようにします。
$ npm run build
$ ls docs/
_next 404.html favicon.ico file.svg globe.svg index.html index.txt next.svg vercel.svg window.svg
$ echo "docs/*" >> .gitignore
Jekyll を無効にしてデプロイする
あとはこれらを GitHub Pages に置くだけなのですが、標準だと Jekyll がビルドしようとしてエラーになるため、 jekyll を無効にします。
$ touch .nojekyll
root に .nojekyll を置きます。
package.json
{
"name": "llm-cost-estimator",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"deploy": "next build && touch docs/.nojekyll && gh-pages -d docs -b gh-pages"
},
touch docs/.nojekyll はいらないかも…
デプロイのコマンドを追加します。
gh-pages -d docs -b gh-pages は docs の内容を gh-pages ブランチにまるっと上書きするぞ！というコマンドです。
デプロイします。
$ npm run deploy
# 略
Route (app) Size First Load JS
┌ ○ / 3.46 kB 105 kB
└ ○ /_not-found 977 B 102 kB
+ First Load JS shared by all 101 kB
├ chunks/4bd1b696-52a6696c08e3276c.js 53.2 kB
├ chunks/684-836db4fb37c5abfa.js 46 kB
└ other shared chunks (total) 1.99 kB
○ (Static) prerendered as static content
Published
このようになれば GitHub へのリクエストは成功です。
Published というとサイトが出来上がったと思いがちですが、このあと GitHub Actions でデプロイが実行されます。
GitHub の Actions を見てみましょう。
Jekyll が実行されていないことを確認。
サイトの表示を確認しましょう！
問題なければ push して作業は終わり。お疲れ様でした。