在当今前后端分离大趋势下，还在使用`FreeMarker`的`Halo`博客，难免会有些更不上技术的脚步，所以我就用`React`+`Next.js`来重写了我当前的`Halo-theme-xue`主题。 重构主题的过程很艰辛，最开始的时候，因为没有考虑到 `seo` 的缘故， 只是使用了 `create-react-app`来写了一个单页面主题。其实这个版本的主题还是好的，在安装和使用上面和当前方式没有任何差别且体验上面更好，对于开发者来说也更完美。但是有一个致命的缺点，无法实现 `SSR(Server Side Render)` 。作为一个博客系统来说，这个缺点是致命的，因为大部分同学写博客的主要目的还是想要被大家所知晓。 于是就有了第二版，`React+Next.js`。在`React`的生态圈中，`Next.js`可以说是实现`SSR`的最好的方式了。这也是当前项目使用的技术栈。 使用`React+Next.js`开发虽然大部分上面和 `Create-React-app`差不多，但是很多细节上面的差别，且前端开发，只要一点没有配置对，直接就会报错。所以，在开发这个主题的时候，也是踩了很多坑，过程也是很痛苦的。下面还是直接说怎么使用吧。 ## 开发指南 ### 第一步：将当前项目复制到本地 ```shell git clone https://github.com/xzzai/halo-theme-xue.git git checkout react-next ``` 或者直接下载zip文件。 ### 第二步：安装依赖和构建 安装依赖我们可以使用 `npm` 、yarn 和 `cnpm`，在国内 cnpm 要快很多，所以我就直接使用`cnpm`。 ```shell cnpm install # 安装依赖 cnpm run build # 构建项目（只是开发，这一步可以省略） ``` ### 第三步：修改后台接口地址 修改`src/utils/service.js`中的**baseUrl**中的请求ip  由于是开发环境，修改 http://development.ip:port 为你开发环境的 ip 和端口。 ### 第四步：在header中添加API-Authorization 为了安全起见，Halo后台对已 通过RestFUL方式调用接口进行管理，我们需要在管理后台进行个性化配置。   设置好之后，我们还需要修改`src/utils/service.js`中的配置项  这里的`access key` 需要和你后台配置的保持一致。 ### 第五步：启动项目 ```shell npm run dev ``` 启动成功后会打印日志`[app server] › ✔ success <> Halo Blog ready on localhost:3000`，直接在浏览中访问: [https://localhost:3000](http://localhost:3000) ## 如何部署 由于 Next.js 的部署依赖Node和pm2，所以在部署前，你需要看看这几篇文章： - [Centos下安装Node运行环境](https://baozi.fun/2020/09/09/centos-install-node) - [如何使用pm2自动部署Next.js项目](https://baozi.fun/2020/09/09/centos-pm2-run-nextjs) - [Windows下安装pm2](https://baozi.fun/2020/09/11/windows-install-pm2) 鉴于各位的生产环境一般都是 Node ，所以安装Node环境是必要的。 部署 Next.js 使用的工具 pm2，所以需要在本地安装 pm2。如果是Ubuntu、Centos或MacOS可以参考[如何使用pm2自动部署Next.js项目](https://baozi.fun/2020/09/09/centos-pm2-run-nextjs)，如果是Windows可以参考[Windows下安装pm2](https://baozi.fun/2020/09/11/windows-install-pm2)。 再说下面的步骤前，默认你已经在服务器上面安装好了 Node，且已在本地安装好 pm2。 ### 第一步：安装主题 虽然当前主题已经前后端分离了，但是我们还是需要在管理后台安装主题（毕竟要使用Halo的接口）。这里也为大家提供了一个zip文件：`halo/xue.zip`，只需要把这个文件上传到管理后台，就可以使用Halo 的接口了。 ### 第二步：修改请求地址 修改`src/utils/service.js`中的**baseUrl**中的请求 IP 和端口  这里是生产环境，所以修改`http://production.ip:port` 为你生产环境的 IP 和端口 ### 第三步：添加API-Authorization 参考 [第四步：在header中添加API-Authorization](#第四步：在header中添加API-Authorization) ### 第四步：部署 本项目已经为大家集成了 pm2 的环境和配置文件，各位使用者只需要修改`ecosystem.json`文件中指定配置就可以（参考 [如何使用pm2自动部署Next.js项目](https://baozi.fun/2020/09/09/centos-pm2-run-nextjs)） ```shell npm run deploy ``` 这里还需要和大家说一下，在 [如何使用pm2自动部署Next.js项目](https://baozi.fun/2020/09/09/centos-pm2-run-nextjs)文中，我完整的讲述了如何部署 Next.js项目，但是对于使用本项目的人来说，完全没有必要，你只要完成在配置pm2之前的操作就可以了。 ### 最后一步：配置Nginx转发 在使用这个之前，域名转发一般都是转发到后台服务端口，但是这里转发需要修改域名的转发地址为 ip:3000。 ## 最后说明 该项目还存在一些问题和缺陷，欢迎大家提出，我会尽快改正。 **本项目目前只支持Halo的最新开发版本**