共计 2020 个字符，预计需要花费 6 分钟才能阅读完成。
本文简述我在构建静态博客站点时遇到的一些问题和对工具的思考，针对这一使用场景对比 Nuxt.js 和 Hexo。但是这两种工具本身针对的需求不一样，希望读者不要误解。
我曾经非常痴迷于搭建自己的博客，也用过非常多的框架。作为一个极客的心态肯定是不满足于类似 WordPress 这种全自动的工具。在尝试了一些静态化工具之后选择了 Hexo，由于找不到顺眼的主题又萌生了自己写的想法。
而事实上我将永远没法找到 顺眼 的主题，因为我想要的是有浓烈自我特色的主题，唯一的获得办法就是自己写一个出来。
初期我在实践的时候 Hexo 还是个很好的选择，最好的地方就是 Everything Configureable ，但是当博客的内容稍微负责一些之后就显得力不从心。原因也很简单，Hexo 采用的是模版引擎，不论是 ejs 还是 pug 都不能很好的将站点模块化。
在项目复杂度上升的过程中，最先困扰我的是 CSS 命名上不可避免的复杂化。为了防止选择器的冲突，并且尽量做到语义化方便代码重用，不得不经常给一个 div 加上非常多的类，或者说把某个类的名称变得很长。就像这样
<div class="uppercase didot widget-item widget-item-bg"></div>当然这种做法其实也是没有办法的办法，很多大型项目都是这样的。有一些全家桶式的页面模版它类的命名规范不统一，看起来更恐怖。
但是前端都进入新世纪了，怎么能沉迷于这种老方法呢? 再说，写惯了 Vue.js 之后，会觉得 Vue 的组件化很舒服，而且 Scoped CSS 应对这种问题非常好。
OK，那么问题来了，为什么不直接用 Vue.js?
静态站点与 SPA
静态站点应该大家比较熟悉，简单来讲就是纯静态网页构成的站点。
SPA 指 Single Page Application (单页应用)现在主流的三大前端框架都是用来构筑 SPA 的，然而，SPA 存在一些问题，例如：
- 页面体积较大
- 状态管理复杂
- 不利于 SEO 优化
然而这些缺点和部分 内容呈现型 的站点是背道而驰的，所以我们在利用这些优秀前端框架的同时，还需要想办法处理这些问题。
Nuxt.js
Nuxt.js 是什么?
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端 / 服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
— 来自 Nuxt.js 官网
这里提到了 Vue 还得扯个问题
为什么不用 React.js
确实，React.js 也有配套的 SSR 框架，Next.js。但是 React 官方从来没有推荐过使用 SSR 这种方法，并且有些地方还说官方不推荐将 React 用作 SSR 工具 (未考证)。反观 Vue.js，自从 2.0 以来就一直在强调 渐进式，并且 Vue 的作者尤雨溪还曾表示国外很多项目都有将 Vue 当作 jQuery 替代的用法，而非搞一套 webpack 啥的，从头开始构建。
并且 Nuxt.js 也明确提到并推荐了可以使用 generate 命令进行 静态化。
Nuxt.js 简述
这里我以我博客为例，简述使用 Nuxt.js 构建静态网页的实践。
根据官网的教程一步一步的创建好工程以后，目录结构大约是这个样子：
这里面我添加了 articles 文件夹和 deploy.sh
分别是存放文章和用来部署静态网页的，而网页的组件以及样式则存放在 components，layouts，pages下。
值得注意的是，Nuxt.js 不仅可以支持和 Express 这样的框架一起配合使用，做 SSR。还可以通过 nuxt generate 命令可以生成静态网页。从这个角度来讲的话，其实我们拿 Nuxt.js 做静态博客的这个行为，有些“误用“的意思。
这里由于 Nuxt.js 不像 Hexo 那么方便可以直接配置添加部署选项，但是我们也可以写一套脚本然后 npm run deploy 嘛。
使用体验
这里我简单对比一下 Nuxt.js 和 Hexo 的使用体验。
- Nuxt.js 配置更为复杂(毕竟定位不同)
- Nuxt.js 定制页面能力更强
- Nuxt.js 和 npm 包亲和力更好，之前看到有位开发者制作的 Hexo 主题需要通过 Webpack 编译之后再放入 Theme 文件夹才能生效，十分复杂
- Nuxt.js 不适合不懂编程的人，甚至不适合不了解 JavaScript 的人
如果要我在此对想用 Nuxt.js 做博客的同学一个建议的话，第一就是不要把它和 Hexo 放在一个等级上，一个是做 SSR 的工具，另一个是纯粹的静态站点生成器。
你的工作，由 AI 赋能！🔥
还在为文案、脚本卡壳、做视频、写代码、设计图片灵感枯竭而烦恼吗？🤯
板板 AI，你的工作好帮手！
一键生成 各种文案、脚本、图片、视频、代码、报告，轻松应对各种工作 / 营销需求！
现在注册体验，即可获得：
- 🎁 30 积分基础模型余额
- 🎁 3 积分高级模型余额
- 🎁 3 积分绘画余额
还不快来试试？
点击链接，开启你的 AI 创作之旅！>>>https://www.banbanai.cn
板板 AI，让你的工作效果发挥无限可能！ 🚀
