在当今前后端分离大趋势下,还在使用`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的最新开发版本**
前后端分离的Halo主题使用指南