使用 Nuxt 与 Nuxt Content 构建静态网站应用

昨天发布了新的训练营网站，添加了几个静态的落地页，主要是为了介绍训练营与训练内容，另外我希望能通过文档，更好地辅助大家完成训练。虽然是几个简单的静态页面，不过从设计，准备内容，技术选型，再到具体实现还是用了挺长时间的，下在给大家总结一下技术与流程，给有需要同样类型网站的同学提供一份技术参考，能帮大家节省一些时间。

根据同学提的建议，一开始，我的需求就是创建几个页面介绍一些独立开发者训练营。因为不想使用内容管理系统，又需要考虑到搜索引擎优化，所以静态网页生成器是首选文案。

应用

首先我试用了 VuePress，默认的主题很适合做文档类型的网站，不过除了文档内容，我还需要做几个落地页，想要修改或是定制 VuePress 的主题并不容易。后来我看 Nuxt 3.0 发布了 RC 版，基于 Nuxt 3.0 的 Nuxt Content 2.0 正式版也发布了，之前并没有使用经验，大概看了下文档与演示以后，我认为应该可以满足我的需求。

Nuxt 框架在 Vue 框架的基础上做了很多优化，新版本的 Nuxt 有自己的服务端渲染引擎。Nuxt Content 可以方便制作内容类型的网站，比如它可以根据 markdown 文件生成页面，页面的主题是由我们自己设计的。比如 https://ninghao.co/docs，这个页面里的文档内容就是由 markdown 文件提供的。Nuxt Content 提供了一些方法可以查询或是搜索 markdown 文档内容。

部署

因为有服务端渲染，所以部署 Nuxt 应用时需要准备服务端的环境，不过我用的方法是用 Nuxt 命令行工具生成一个静态网站，Nuxt 会扫描应用的所有路由，自动生成对应的静态文件，这样部署时只需要准备一个普通的 Web 服务器就行了。

训练营网站分成了两个部分，其实是两个独立的前端应用，一个用 Nuxt 做的落地页与文档，另一个是用 Vue 做的视频应用。我希望它们在同一域名下提供服务，比如访问 https://ninghao.co 时，展示的是用 Nuxt 做的落地页，访问 https://ninghao.co/c 时，打开的就是观察训练视频用的 Vue 应用。在部署时，可以使用 Nginx 定义一个服务器，然后通过 location 指令设置具体提供内容的位置与配置。

 location / {
    root /www/nid-camp/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /c {
    alias /www/nid-camp-2/dist;
    index index.html;
    try_files $uri $uri/ /c/index.html;
  }

因为有一个 Vue 应用要在子目录下提供服务，所以需要配置 Vue 与 Vue Router。

vue.config.js

module.exports = {
  publicPath: '/c',
};

在应用里创建路由器的时候，记得给 createWebHistory 提供一个参数，它的值就是子目录的名字。

/**
 * 创建路由器
 */
const router = createRouter({
  history: createWebHistory('/c/'),
  routes: [
    ...
  ],
});

样式

网站的界面组件全部是我手工创建的，设计这些组件时，我用到了 Tailwind 这款样式库，与其它的样式框架或者组件库不同，Tailwind 只负责样式部分，它不强制我们的界面结构，主要提供的是样式工具类，所以使用它的时候跟直接写 css 差不多，但是会方便得多。

动画

有几个页面需要加点动画效果，这些动画我用到了 Gsap，它的 ScrollTrigger 插件很好用，可以方便地处理页面滚动行为，根据页面的滚动位置触发设计好的动画效果。

技术参考

• 演示：https://ninghao.co
• 框架：Nuxt 与 Nuxt Content
• 样式：Tailwind
• 动画：Gsap
• 视频：Plyr

Vue 是一款前端应用框架，Nuxt 也是一个框架，它的内核是 Vue，但是在 Vue 的基础之上做了一些优化并添加了一些新的东西。Nuxt Content 可以看成是 Nuxt 框架的一个插件，它可以方便我们创建内容类型的网站应用。

幕后

在使用 Gsap 处理页面动画时，有个问题消耗掉了我两天的工作时间，最终只用了一行代码解决了那个问题。本来我是想写个小文，说明一下我是如何通过细微的线索一步一点解决那个问题的，也想吹吹自己有多么坚持。又过了一天，我发现解决问题的那行代码会带来新的问题，于是我又用了两天解决了这个新的问题。“困于心，衡于虑，而后作”，有发现很多问题都是在我经受世大的精神折磨，就在我要放弃的时候得到了解决。

大家如果需要开发同样类型的网站应用，可以加上我的微信，我能帮大家快速解决一些问题，不至于两天写一行代码：）