基于Halo搭建个人网站

前言

为了更好的阅读体验，你可以直接滑到最下方，点击阅读原文进行查看。

最近花了点时间基于Halo把自己的网站改造了下，实现了站内的文章阅读、点赞、评论、留言板等功能，本文就跟大家介绍并分享下我改造后的网站^[1]，欢迎各位感兴趣的开发者阅读本文。

环境搭建

Halo^[2]是一款现代化的开源博客/CMS系统，官网^[3]列举了详细的环境搭建教程^[4]，按着官网给出的教程一步步往下走，即可完成安装，过程很顺利，此处不做过多赘述。

对我改造好的网站比较感兴趣的开发者，请移步：在线地址^[5]

自定义数据库

如果你有一定的Java/SpringBoot/Gradle基础，希望对搭建好的环境进行更深层次的定制，你可以继续阅读本章节，否则跳过即可。

Halo默认采用H2作为数据库，因为我本地装有MySQL，为了方便管理，我决定把它改掉，在文档的数据库章节^[6]提供了配置方案，我们需要将Halo的源码^[7]clone到本地，打开application.yaml文件，删除H2相关的配置，加入如下所示的配置：

spring:
  datasource:
   # MySQL database configuration.
    driver-class-name: com.mysql.cj.jdbc.Driver
    # 修改成你的数据库地址
    url: jdbc:mysql://127.0.0.1:3306/halodb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
    # 数据库的用户名与密码
    username: root
    password: 123456

注意：halo目前只支持mysql且版本必须大于等于5.7。

自定义缓存

本章节也需要你有一定的Java/SpringBoot/Gradle基础，否则跳过即可。

Halo的默认缓存策略是到内存中的，它支持redis缓存方式，我本地装有redis，因此也一并修改了，在文档的缓存章节^[8]提供了配置方案，打开application.yaml文件，修改cache字段值为redis，并加入redis的连接配置，如下所示：

spring:
  redis:
    # redis端口号
    port: 6379
    database: 0
    # redis地址
    host: 127.0.0.1
    # redis密码
    password: 123456
halo:
 cache: redis

编译项目

做完上述修改后，我们需要对项目进行编译（注意你的jdk版本必须大于等于11），打开idea中的Gradle面板，执行build命令的jar即可。

                    image-20220506000934441

编译过程中可能会看到一些test的报错，它不影响最终打包结果，可以忽略不计，打包成功后，在项目的build/libs目录下即可看到打包出来的文件。

                              image-20220506001324907

最后，拿着打包出来的去运行即可（同样的，运行环境的jdk>=11）。

选择主题

环境搭建完毕后，在浏览器输入http://127.0.0.1:8090即可看到初始化界面了，

根据页面提示一步步的往下进行即可。

由于默认界面是比较丑的，halo提供了主题仓库^[9]，里面有许多第三方主题，可以挑选一个好看的进行改造，我挑选的是Joe 2.0主题^[10]，基于它进行了改造，在线地址^[11]，最终效果如下所示：

注意：如果的halo是自己编译的，在管理后台安装第三方主题时，可能会出现报错：当前主题仅支持 Halo ^1.x.xx 及以上的版本，求助这个主题的作者后，他说这个校验逻辑在后端，只能通过手动下载Release^[12] 页面的主题包，手动解压上传到halo安装目录的/templates/themes/目录下，并将文件夹命名为joe2.0。

                                  image-20220506003306253

最后，在后台管理界面启用主题即可。

GPU占用严重问题

如果你使用的是Joe 2.0主题，在浏览器打开你的网站超过5分钟，你的电脑风扇会狂响，cpu温度持续升高。

                                image-20220506003957266

                            image-20220506004108767

经过一番排查后，终于定位到了问题：人生倒计时插件的锅，可能这里的代码写的不好，造成了大量运算，在网站管理后台的主题 -> 主题设置 -> 侧边栏 展示人生倒计时，将其关掉即可。

                                     image-20220506004444333

改造后的网站

接下来，跟大家介绍下我的个人网站^[13]中都有哪些内容。

首页

首页有4个模块，如下所示：

• 轮播图区域：此处会按时间循环展示我最新发表的5篇文章
• 侧边栏区域：展示我的头像、昵称、专栏数、文章数、社交平台等信息
• 推荐专栏区域：会按照专栏的点击量来展示6个热度最高的专栏
• 文章列表区域：包含最新文章、热门文章、最近更新、最多点赞四个分类，默认展示最新文章

动态

                                   image-20220506005503508

文章

此处将以时间轴的形式展示我所发布过的文章。

                               image-20220506005610659

专栏

此处将展示我创建的所有专栏（即：文章分类）。

标签

此处将展示文章发布时所创建的标签。

                           image-20220506010006880

留言板

如果有想对我说的话，欢迎在此留言🤓

                                   image-20220506010200337

关于我

此处将展示一些我的个人介绍。

                              image-20220506011426299

写在最后

至此，文章就分享完毕了。

我是神奇的程序员，一位前端开发工程师。

如果你对我感兴趣，请移步我的个人网站^[14]，进一步了解。

• 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
• 文中链接可从文末参考资料中获取