Next.js 部署到 GitHub Pages 教程
项目介绍
nextjs-github-pages
是一个开源项目,旨在通过 GitHub Actions 将 Next.js 应用部署到 GitHub Pages。该项目支持 Next.js 的 App Router,并提供了详细的配置指南和最佳实践。
项目快速启动
克隆项目
首先,克隆项目到本地:
git clone https://github.com/gregrickaby/nextjs-github-pages.git
cd nextjs-github-pages
安装依赖
安装项目依赖:
npm install
配置 Next.js
编辑 next.config.js
文件,添加以下配置:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
basePath: "/nextjs-github-pages",
images: {
unoptimized: true,
},
};
module.exports = nextConfig;
添加 .nojekyll
文件
在 public
目录下添加 .nojekyll
文件,以禁用 GitHub Pages 的 Jekyll 构建:
touch public/.nojekyll
部署到 GitHub Pages
- 创建 GitHub Actions 配置文件
deploy.yml
:
name: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- run: npm install
- run: npm run build
- run: npm run export
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./out
- 提交代码并推送到 GitHub:
git add .
git commit -m "Initial commit"
git push origin main
应用案例和最佳实践
应用案例
- 静态网站:使用 Next.js 构建的静态网站可以轻松部署到 GitHub Pages,适用于个人博客、文档站点等。
- 开源项目文档:许多开源项目使用 Next.js 构建文档站点,并通过 GitHub Pages 进行部署。
最佳实践
- 优化图片:虽然 GitHub Pages 不支持 Next.js 的图片优化功能,但可以通过其他工具(如 ImageOptim)预先优化图片。
- 使用 GitHub Actions:利用 GitHub Actions 自动化部署流程,确保每次提交都能自动部署到 GitHub Pages。
典型生态项目
- Next.js:一个用于构建服务器渲染的 React 应用程序的框架。
- GitHub Actions:GitHub 提供的自动化工作流工具,用于构建、测试和部署代码。
- GitHub Pages:GitHub 提供的静态网站托管服务,适用于托管静态网页和项目文档。
通过以上步骤和最佳实践,您可以轻松地将 Next.js 应用部署到 GitHub Pages,并享受自动化部署带来的便利。