如何利用 Nuxt.js 进行静态站点生成 (SSG)，并部署到 Netlify, Vercel 或 GitHub Pages？

各位观众，晚上好！我是今天的讲师，江湖人称“代码界的段子手”。今天咱们聊聊 Nuxt.js 静态站点生成 (SSG) 这门“手艺”，以及如何把它部署到 Netlify、Vercel 甚至 GitHub Pages 这些“豪华别墅”里。

开场白：为什么要玩 SSG？

首先，咱们得明白，为啥要费劲巴拉地搞 SSG？直接用 SSR (Server-Side Rendering) 或 SPA (Single-Page Application) 不香吗？

答案是：SSG 贼香！尤其是在对 SEO 有要求的网站上，比如博客、文档站、企业官网等等。

想想看，SSR 每次请求都要服务器渲染，服务器压力山大；SPA 虽然前端路由切换流畅，但搜索引擎爬虫不友好，抓取不到内容。而 SSG，在构建时就生成了所有页面的 HTML，直接部署到 CDN 上，用户访问速度快，搜索引擎也好抓取，简直是“一石三鸟”！

Nuxt.js：SSG 的得力助手

Nuxt.js 是一个基于 Vue.js 的框架，它简化了 Vue.js 应用的开发，并提供了强大的 SSG 支持。可以毫不夸张地说，有了 Nuxt.js，SSG 就像用乐高搭积木一样简单。

第一部分：Nuxt.js 项目初始化

首先，咱们得有个 Nuxt.js 项目。如果没有，就用 create-nuxt-app 快速创建一个。

npx create-nuxt-app my-static-site

按照提示选择配置，比如：

选项	建议值	说明
Project name	my-static-site (或者你喜欢的名字)	项目名称
Programming language	JavaScript 或 TypeScript (随意，看你心情)	编程语言
Package manager	npm 或 yarn (推荐 yarn，速度快)	包管理器
UI framework	None (先不选，专注于 SSG)	UI 框架，后续可以按需添加
Nuxt.js modules	Axios (如果需要请求 API)	Nuxt.js 模块，Axios 用于发起 HTTP 请求
Linting tools	ESLint + Prettier (保证代码风格统一)	代码检查工具
Testing framework	None (暂时不选，专注于 SSG)	测试框架
Rendering mode	Universal (SSR / SSG)	渲染模式，选择 Universal
Deployment target	Static / Jamstack hosting	部署目标，选择 Static / Jamstack hosting
Development tools	jsconfig.json (用于 VS Code 的代码提示)	开发工具配置
Version control	Git (必须的，不解释)	版本控制

创建完成后，进入项目目录：

cd my-static-site

第二部分：编写页面

现在，咱们开始编写页面。Nuxt.js 的页面都放在 pages 目录下。

比如，咱们创建一个简单的首页 pages/index.vue：

<template>
  <div>
    <h1>欢迎来到我的静态站点！</h1>
    <p>这是一个使用 Nuxt.js 生成的静态站点。</p>
    <nuxt-link to="/about">关于我</nuxt-link>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

再创建一个关于页面 pages/about.vue：

<template>
  <div>
    <h1>关于我</h1>
    <p>我是一个热爱编程的段子手。</p>
    <nuxt-link to="/">返回首页</nuxt-link>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

第三部分：动态路由生成

如果你的网站有动态路由，比如博客文章的 URL 是 /posts/:id，那么就需要告诉 Nuxt.js 如何生成这些路由。

创建一个 pages/posts/_id.vue：

<template>
  <div>
    <h1>文章 ID: {{ id }}</h1>
    <p>文章内容...</p>
    <nuxt-link to="/">返回首页</nuxt-link>
  </div>
</template>

<script>
export default {
  name: 'PostPage',
  asyncData ({ params }) {
    return {
      id: params.id
    }
  }
}
</script>

关键在于 asyncData 函数。这个函数会在构建时执行，并且可以获取到路由参数 params。

接下来，需要在 nuxt.config.js 中配置 generate 选项：

export default {
  target: 'static', // 确保是静态站点模式
  generate: {
    routes: async () => {
      // 假设你从 API 获取文章列表
      const posts = [
        { id: 1, title: '第一篇文章' },
        { id: 2, title: '第二篇文章' },
        { id: 3, title: '第三篇文章' }
      ];

      // 生成动态路由
      return posts.map(post => `/posts/${post.id}`);
    }
  }
}

generate.routes 是一个函数，它返回一个包含所有需要生成的路由的数组。在这里，咱们模拟从 API 获取文章列表，然后为每篇文章生成一个路由。

第四部分：构建和部署

万事俱备，只欠东风。现在，咱们可以构建项目了：

npm run generate

这条命令会生成一个 dist 目录，里面包含了所有的静态 HTML 文件、CSS 文件、JavaScript 文件等等。

接下来，咱们分别看看如何将 dist 目录部署到 Netlify、Vercel 和 GitHub Pages。

4.1 部署到 Netlify

Netlify 简直是静态站点的福音。只需要把 dist 目录拖到 Netlify 上，或者连接 GitHub 仓库，Netlify 就会自动构建和部署你的站点。

• 拖拽部署： 直接将 dist 目录拖拽到 Netlify 的页面上。

• GitHub 部署：

  1. 在 GitHub 上创建一个仓库，并将你的代码推送到仓库。
  2. 在 Netlify 上选择 "New site from Git"。
  3. 选择你的 GitHub 仓库。

  4. 配置构建命令和发布目录：

     • Build command: npm run generate
     • Publish directory: dist
  5. 点击 "Deploy site"。

Netlify 会自动构建和部署你的站点，并提供一个免费的域名。你也可以绑定自己的域名。

4.2 部署到 Vercel

Vercel 和 Netlify 类似，也是一个优秀的静态站点托管平台。

• GitHub 部署：

  1. 在 GitHub 上创建一个仓库，并将你的代码推送到仓库。
  2. 在 Vercel 上选择 "Import Project"。
  3. 选择你的 GitHub 仓库。
  4. Vercel 会自动检测到你的 Nuxt.js 项目，并配置构建命令和发布目录。
  5. 点击 "Deploy"。

Vercel 也会自动构建和部署你的站点，并提供一个免费的域名。你也可以绑定自己的域名。

4.3 部署到 GitHub Pages

GitHub Pages 是 GitHub 提供的免费静态站点托管服务。

• 配置 nuxt.config.js：

  如果你的站点要部署到 GitHub Pages 的子目录（比如 https://username.github.io/my-static-site/），需要在 nuxt.config.js 中配置 router.base 和 publicPath：

  export default {
    target: 'static',
    router: {
      base: '/my-static-site/' // 你的仓库名称
    },
    build: {
      publicPath: '/my-static-site/' // 你的仓库名称
    },
    generate: {
      fallback: true // 404页面fallback
    }
  }

• 修改 package.json：

  添加一个 deploy 脚本：

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start",
    "deploy": "nuxt generate && npm run deploy-gh-pages",
    "deploy-gh-pages": "gh-pages -d dist -t true"
  },
  "devDependencies": {
    "gh-pages": "^4.0.0"
  }

  别忘了安装 gh-pages：

  npm install gh-pages --save-dev

• 部署：

  运行 deploy 脚本：

  npm run deploy

  这条命令会先生成静态文件，然后将 dist 目录的内容推送到 GitHub 仓库的 gh-pages 分支。

• 启用 GitHub Pages：

  1. 进入你的 GitHub 仓库的 "Settings" 页面。
  2. 找到 "GitHub Pages" 部分。
  3. 选择 "Source" 为 "gh-pages branch"。
  4. 点击 "Save"。

  稍等片刻，你的站点就可以通过 https://username.github.io/my-static-site/ 访问了。

第五部分：一些小技巧和注意事项

• 404 页面：

  Nuxt.js 默认会生成一个 404.html 文件，但 GitHub Pages 需要一个 index.html 文件作为 fallback。所以，需要在 nuxt.config.js 中配置 generate.fallback: true，这样 Nuxt.js 就会生成一个 200.html 文件，你需要将它重命名为 index.html。当然，在 Netlify 和 Vercel 上，这个配置通常不需要，因为它们会自动处理 404 页面。

• SEO 优化：

  • 使用 <nuxt-link> 进行内部链接，而不是 <a> 标签，这样可以利用 Nuxt.js 的预取功能，加快页面加载速度。
  • 为每个页面添加合适的 <title> 和 <meta> 标签，可以使用 vue-meta 或 Nuxt.js 的 head 选项。
  • 使用结构化数据 (Schema.org) 标记你的内容，让搜索引擎更好地理解你的网站。

• 图片优化：

  • 使用合适的图片格式 (WebP)。
  • 压缩图片大小。
  • 使用 CDN 加速图片加载。

• API 请求：

  如果你的静态站点需要请求 API，可以使用 Axios 或 Fetch API。需要在 asyncData 或 fetch 函数中进行请求，并将数据返回。

• 环境变量：

  如果你的 API 地址或密钥需要保密，可以使用环境变量。在 Netlify 和 Vercel 上，可以在后台配置环境变量。在 GitHub Pages 上，由于无法直接配置环境变量，可以将 API 地址或密钥存储在 JSON 文件中，然后通过 JavaScript 读取。当然，这种方式的安全性较低，不建议存储敏感信息。

总结：SSG 的魅力

SSG 是一种简单、高效、可靠的网站构建方式，特别适合于博客、文档站、企业官网等内容型网站。Nuxt.js 简化了 SSG 的开发流程，让开发者可以专注于内容创作。Netlify、Vercel 和 GitHub Pages 提供了便捷的部署方式，让你的网站可以快速上线。

希望今天的讲座能帮助你掌握 Nuxt.js SSG 这门“手艺”，并用它构建出更加优秀的网站！

最后：

记住，代码的世界没有“绝对正确”，只有“更适合”。选择最适合你的工具和方案，才能事半功倍。祝大家编程愉快，早日成为代码界的“大牛”！

溜了溜了~