去年一直想从python过度到JavaScript，尤其是在前端美化方面，上个版本的Blog由于模块引用一直采用老旧落后的CDN引用模式导致很多功能无法继续开发，所以长痛不如短痛，我决定进行重构！！

重构之路

需求与功能

我对功能的诉求很简单，一条命令创建一个新的空博文的.md文档，写完blog，一条命令直接提交到服务器，其余的打包、编译以及静态资源更新等都要自动完成。

前端要使用漂亮的UI组件库，方便折腾各种功能，服务器要免费，因为一直是这样的……

解决方案

目前来说比较成熟的方案有两条：Vue vs React 二选一，我选后者，至于为什么？我觉得React的组件与状态模式更简单，编写起来更接近原生的JavaScript，Vue语法糖太多，用起来反而不习惯，当然黄瓜萝卜各有所爱仁者见仁智者见智。

框架的选择

基于react生成静态的页面，next.js肯定是首选了，对应的服务器部署就是 Vercel,简单的流程就是，编写代码，push到GitHub，触发Vercel的监听仓库，自动拉取并打包生成静态资源部署到服务器，我只需解析域名即可。

至于其他的框架，基本上都是围绕着Next.js的生态了。

"dependencies": {
    "@giscus/react": "^3.0.0",
    "@nextui-org/react": "^2.6.10",
    "framer-motion": "^11.15.0",
    "gray-matter": "^4.0.3",
    "next": "15.1.2",
    "next-themes": "^0.4.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-markdown": "^9.0.1"
},
"devDependencies": {
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "tailwindcss-motion": "^1.0.1"
}

• @giscus/react：版本 ^3.0.0。这是一个用于在 React 应用中嵌入 Giscus（一个开源评论系统）的组件库。Giscus 可以方便地为网站添加评论功能，它基于 GitHub Discussions 构建，用户可以通过 GitHub 账号进行评论，且评论数据存储在 GitHub 仓库中，便于管理和维护。

• @nextui-org/react：版本 ^2.6.10。NextUI 是一个基于 React 的开源 UI 组件库，它提供了丰富的组件，如按钮、卡片、输入框、模态框等，具有现代化的外观和良好的用户体验。NextUI 支持主题定制，可以方便地与 Tailwind CSS 等工具集成，帮助开发者快速构建美观、响应式的界面。

• framer-motion：版本 ^11.15.0。这是一个用于 React 的动画库，它提供了简单易用且功能强大的动画 API。开发者可以使用 framer-motion 创建各种复杂的动画效果，如元素的进入、离开动画，以及基于滚动、点击等事件的交互式动画。它支持动画的链式调用、动画的缓动函数自定义等，能够满足大多数项目中的动画需求。

• gray-matter：版本 ^4.0.3。gray-matter 是一个用于解析文件头部元数据（front matter）的库。在一些静态网站生成器或内容管理系统中，文件的头部元数据通常用于存储文章的标题、日期、作者等信息。gray-matter 可以方便地从文件中提取这些元数据，将其转换为 JavaScript 对象，以便在项目中进一步处理和使用。

• next：版本 15.1.2。Next.js 是一个基于 React 的开源服务器端渲染（SSR）框架。它提供了许多开箱即用的功能，如页面路由、静态生成（SSG）、增量静态再生（ISR）等，能够帮助开发者构建高性能、可扩展的 Web 应用。Next.js 优化了页面的加载速度和 SEO，同时支持热模块替换（HMR），提高了开发效率。

• next-themes：版本 ^0.4.4。这是一个用于 Next.js 项目的主题切换库。它可以方便地在项目中添加主题切换功能，支持暗黑模式和亮色模式的切换。开发者可以通过简单的配置和 API 调用，实现主题的动态切换，并且 next-themes 还提供了一些额外的功能，如根据系统偏好自动设置主题等。

• react：版本 ^18.3.1。React 是一个用于构建用户界面的开源 JavaScript 库，由 Facebook 开发并维护。它采用了声明式编程范式，通过组件化的方式构建界面，使得代码更加可维护和可复用。React 提供了高效的 DOM 更新机制，能够根据组件状态的变化自动更新界面，是现代前端开发中非常核心的技术之一。

• react-dom：版本 ^18.3.1。react-dom 是 React 的 DOM 绑定库，它负责将 React 组件渲染到浏览器的 DOM 中。它提供了操作 DOM 的 API，使得 React 能够与浏览器进行交互，实现界面的动态更新。在 React 项目中，react-dom 是必不可少的依赖，与 React 核心库紧密配合，共同完成界面的渲染和更新工作。

• react-markdown：版本 ^9.0.1。react-markdown 是一个用于将 Markdown 文本渲染为 React 组件的库。它可以将 Markdown 语法的文本转换为对应的 HTML 结构，并以 React 组件的形式呈现出来。开发者可以通过插件系统对渲染过程进行定制，例如添加代码高亮、自定义链接处理等功能，非常适合在项目中展示 Markdown 格式的内容。

• postcss：版本 ^8。PostCSS 是一个使用 JavaScript 插件来转换 CSS 的工具。它可以对 CSS 代码进行各种处理，如自动添加浏览器前缀、压缩 CSS、转换 CSS 语法等。在项目开发过程中，PostCSS 通常与 Tailwind CSS 等工具配合使用，通过配置相应的插件，可以优化 CSS 代码的编写和维护，提高开发效率和代码质量。

• tailwindcss：版本 ^3.4.1。Tailwind CSS 是一个实用主义的 CSS 框架，它提供了一系列预定义的类，开发者可以直接在 HTML 元素上使用这些类来快速构建界面。Tailwind CSS 采用原子化 CSS 的设计理念，通过组合不同的类来实现复杂的样式效果，减少了 CSS 代码的冗余。它还支持配置文件，开发者可以根据项目需求自定义主题、颜色、间距等样式配置，具有很高的灵活性和可定制性。

• tailwindcss-motion：版本 ^1.0.1。tailwindcss-motion 是一个 Tailwind CSS 插件，用于为 Tailwind CSS 添加基于 framer-motion 的动画功能。通过这个插件，开发者可以在 Tailwind CSS 的配置中定义动画相关的类，然后在项目中像使用其他 Tailwind CSS 类一样使用这些动画类，实现元素的动画效果。它将 Tailwind CSS 的便捷性和 framer-motion 的强大动画能力结合起来，使得在项目中添加动画变得更加简单和高效。

以上就是一些程序中使用的依赖库，可以供参考。

核心代码

getStaticPaths与getStaticProps这二个next.js提供的静态资源获取的方法，结合gray-matter就可以搞定为每一篇博文生成一个基于react构建的静态的页面。

getStaticPaths中负责搜集所有博文的路径，getStaticProps和gray-matter通过解析博文头部的数据提取博文相关的信息。

以上基本就解决了blog程序的大部分功能了。要知道上个版本，我是用 Python 编写的静态博客生成器，这些功能，我竟然都是自己重新实现的，而且写得很有劲，嘿，那股子傻劲还挺让人兴奋的。

其他blog功能

博客其他的基础功能也基本上都是围绕着这上边的核心方法编写的，借助AI辅助，按小时算的话，大约花费了10个小时写完了所有的核心功能，前端这里使用的NextUI，博客的主题样式还是老样子没什么大变化，细节上可能对有些改变。

关于SEO

一个blog不能没有sitemap和rss,next.js中有一个sitemap的模块，但是不能在服务器部署的时候自动生成，所以，这二个xml只好自己手动写个两个脚本，用来生成这两个xml文件，在准备提交到GitHub之前生成到public目录中，这样就可以自动部署到服务器了。

关于评论系统

暂时没打算自己编写，一方面没有啥评论系统编写的经验，一方便面是监管的压力，权衡利弊采用了Giscus，功能足够了，而且我这个站也是很少有人评论，大部分来的应该都是程序员，都有GitHub账号，最终选定Giscus。

总结

记录这些或许并没有多大实际意义，只是希望如果有人也是用Next.js编写自己的blog，那么这些经历希望能给你一个小小的参考。