前后端分离的Halo主题使用指南

前后端分离的Halo主题使用指南

在当今前后端分离大趋势下,还在使用FreeMarkerHalo博客,难免会有些更不上技术的脚步,所以我就用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差不多,但是很多细节上面的差别,且前端开发,只要一点没有配置对,直接就会报错。所以,在开发这个主题的时候,也是踩了很多坑,过程也是很痛苦的。下面还是直接说怎么使用吧。

开发指南

第一步:将当前项目复制到本地

git clone https://github.com/xzzai/halo-theme-xue.git
git checkout react-next

或者直接下载zip文件。

第二步:安装依赖和构建

安装依赖我们可以使用 npm 、yarn 和 cnpm,在国内 cnpm 要快很多,所以我就直接使用cnpm

cnpm install   # 安装依赖
cnpm run build  # 构建项目(只是开发,这一步可以省略)

第三步:修改后台接口地址

修改src/utils/service.js中的baseUrl中的请求ip

baseUrl

由于是开发环境,修改 http://development.ip:port 为你开发环境的 ip 和端口。

第四步:在header中添加API-Authorization

为了安全起见,Halo后台对已 通过RestFUL方式调用接口进行管理,我们需要在管理后台进行个性化配置。

高级设置

API设置

设置好之后,我们还需要修改src/utils/service.js中的配置项

header

这里的access key 需要和你后台配置的保持一致。

第五步:启动项目

npm run dev

启动成功后会打印日志[app server] › ✔ success <> Halo Blog ready on localhost:3000,直接在浏览中访问: https://localhost:3000

如何部署

由于 Next.js 的部署依赖Node和pm2,所以在部署前,你需要看看这几篇文章:

鉴于各位的生产环境一般都是 Node ,所以安装Node环境是必要的。 部署 Next.js 使用的工具 pm2,所以需要在本地安装 pm2。如果是Ubuntu、Centos或MacOS可以参考如何使用pm2自动部署Next.js项目,如果是Windows可以参考Windows下安装pm2

再说下面的步骤前,默认你已经在服务器上面安装好了 Node,且已在本地安装好 pm2。

第一步:安装主题

虽然当前主题已经前后端分离了,但是我们还是需要在管理后台安装主题(毕竟要使用Halo的接口)。这里也为大家提供了一个zip文件:halo/xue.zip,只需要把这个文件上传到管理后台,就可以使用Halo 的接口了。

第二步:修改请求地址

修改src/utils/service.js中的baseUrl中的请求 IP 和端口

baseUrl

这里是生产环境,所以修改http://production.ip:port 为你生产环境的 IP 和端口

第三步:添加API-Authorization

参考 第四步:在header中添加API-Authorization

第四步:部署

本项目已经为大家集成了 pm2 的环境和配置文件,各位使用者只需要修改ecosystem.json文件中指定配置就可以(参考 如何使用pm2自动部署Next.js项目

npm run deploy 

这里还需要和大家说一下,在 如何使用pm2自动部署Next.js项目文中,我完整的讲述了如何部署 Next.js项目,但是对于使用本项目的人来说,完全没有必要,你只要完成在配置pm2之前的操作就可以了。

最后一步:配置Nginx转发

在使用这个之前,域名转发一般都是转发到后台服务端口,但是这里转发需要修改域名的转发地址为 ip:3000。

最后说明

该项目还存在一些问题和缺陷,欢迎大家提出,我会尽快改正。

本项目目前只支持Halo的最新开发版本

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://baozi.fun/2020/09/10/how-to-use-react-next

Buy me a cup of coffee ☕.