之前的服务器到期了，续费有点贵，摸了摸口袋，发现口袋已经穿了个大洞，就不打算续费了 -_-

无奈只好注册一个新的云服务器平台账户，薅一下新用户羊毛，先短期过渡一下吧

刚好前段时间也经常有小伙伴问我这个博客是怎么搭建的，我就顺便把这次搭建部署的过程记录一下，感兴趣的小伙伴也可以自己尝试搭建一个

这里先声明一下，我之前的博客是用 Hexo 搭建的，用的是 Shoka 这个主题，但是这个主题的作者因学业和工作的原因已经停更很久了，导致该项目存在许多 bug 和兼容性问题无人处理，本人已经不推荐大家继续使用 Shoka 了

这次我会以 ShokaX 作为主题， ShokaX 是基于 Shoka 的二次开发项目，该项目成立的目的就是为了解决 Shoka 遗留下来的问题，下面是 ShokaX 的官方简介

想了解更多关于 ShokaX 的信息，请跳转到官方主页:https://docs.kaitaku.xyz

# 前期准备

1. 一台本地客户端（Windows、Linux、MaxOS 均可）
2. 一台公网的云服务器
3. 一个公网域名（需要备案）
   云服务器的操作系统并不是很重要， windows 和 linux 都可以，但是推荐使用 linux , 我这边的云服务器和客户端均以 ubuntu 22.04 作为本次演示的操作系统平台

下面简单说一下我们需要在客户端和云服务器都需要安装哪些应用服务

# 客户端

# 安装 nodejs

首先，在自己的电脑上安装 Node.js 运行环境，通过浏览器访问官网 https://nodejs.org , 点击下载 Node.js

下载完后解压文件，解压路径没有要求，例如我这里是解压到 /opt 目录下

• sudo tar xvf node-v20.16.0-linux-x64.tar.xz -C /opt/
  

添加环境变量使其生效，编辑家目录下的 .bashrc 文件

1. vi ~/.bashrc

2. PATH=/opt/node-v20.16.0-linux-x64/bin/:$PATH #在文件末尾加上这条路径是 nodejs 生效

3. source ~/.bashrc #重新加载 bash 配置

4. node -v #查看 nodejs 版本信息，如果提示找不到 node 命令，表示环境变量没有生效或在你的 node 路径不对

看到命令能够正常执行，那么 nodejs 的安装和配置就结束了

# 安装 hexo 和 cnpm

nodejs 安装完后，我们就可以使用 npm 包管理工具了，首先安装 hexo 博客框架

1. npm install -g hexo-cli #安装 hexo 命令行管理工具
   

由于 npm 下载都是走海外的源，下载灰常慢，这里我们安装一下淘宝团队开发的 cnpm 来取代 npm

2. npm install cnpm -g #安装 cnpm

3. cnpm config set registry https://registry.npmmirror.com/ #将 cnpm 源换成国内的淘宝源

4. cnpm config get registry #查看当前的 cnpm 源

# 安装 ShokaX

1. git clone https://github.com/theme-shoka-x/shokax-can --depth=1

克隆项目到本地，如果你的电脑没有安装 git，还请先安装 git

2. cd shokax-can && cnpm install

切换到项目目录并执行初始化操作

3. hexo s # 启动 hexo
   

启动后，打开浏览器访问 http://localhost:4000

可以看到我们本地的博客就搭建好了，是不是觉得灰常简单

后面我们把本地生成的博客目录 public 拷贝到云服务器，用 nginx 发布，这样大家都可以通过互联网访问到我们的博客了

# 云服务器

# Nginx

远程到我们的云服务器，安装 nginx 服务

1. apt install nginx -y # 安装 nginx

2. systemctl enable nginx # 将 nginx 设置开机自启动

3. mkdir /etc/nginx/cert # 创建数字证书存放目录，请将你的域名证书拷贝到这个目录

4. vi /etc/nginx/conf.d/www.conf # 创建 SSL 配置

server {

    listen 80;

    listen 443 ssl http2;

    server_name keeponline.cn;

    root /home/git/blog;

    if ($server_port !~ 443){

        rewrite ^(/.*)$ https://$host$1 permanent;

    }

    # SSL setting

    ssl_certificate cert/www.keeponline.cn.pem;

    ssl_certificate_key cert/www.keeponline.cn.key;

    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;

    ssl_prefer_server_ciphers on;

    ssl_session_cache shared:SSL:10m;

    ssl_session_timeout 10m;

    add_header Strict-Transport-Security "max-age=31536000";

    # ShokaX Blog Location

    location / {

        try_files $uri $uri/ /index.html;

    }

    # Waline Comment System Location

    location /waline/ {

        proxy_pass http://127.0.0.1:8360/;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header REMOTE-HOST $remote_addr;

        add_header X-Cache $upstream_cache_status;

        add_header Cache-Control no-cache;

        expires 1h;

        # Waline API needs access permissions

        allow all;

        # Waline Comment System Location

    location /waline/ {

        proxy_pass http://127.0.0.1:8360/;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header REMOTE-HOST $remote_addr;

        add_header X-Cache $upstream_cache_status;

        add_header Cache-Control no-cache;

        expires 1h;

    }

        # Waline api Location

     location /api/ {

        proxy_pass http://127.0.0.1:8360/;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header REMOTE-HOST $remote_addr;

        add_header X-Cache $upstream_cache_status;

        add_header Cache-Control no-cache;

        expires 1h;.

    }

}

5. systemctl restart nginx # 重启 Nginx 服务，没有报错则说明配置没问题
   

6. 在云服务器安全组放行 tcp80、443 端口
   

7. 在浏览器中访问自己的域名，看看证书是否生效
   

到此，云服务器已经配置完毕，后续只需要在客户端上将 shokax-can\public 目录下的所有文件拷贝到云服务器的 web根目录 即可 (默认是 /usr/share/nginx/html/)

# 推送测试

回到本地客户端，进入 shokax-can 根目录，执行 hexo g 生成网站静态文件，所有网站静态文件存放在 shokax-can\public 目录下

使用 rsync 命令将 shokax-can\public 目录下的静态文件全部同步到云服务器的 /usr/share/nginx/html/ 目录下即可

• sudo rsync -avz public/* root@keeponline.cn:/usr/share/nginx/html/
  

同步完后，在浏览器上重新访问我们的域名，应该就可以看到我们的博客内容了

后续我们只需要在本地客户端上编辑博客内容，编辑好后进入 shokax-can 根目录，执行 hexo g 生成网站静态文件，然后执行 sudo rsync -avz public/* root@YourDomain:/usr/share/nginx/html/ 这条命令，将新的内容同步到云服务器即可

# hexo 插件与优化

我们已经在客户端上搭建好 hexo 博客和 ShokaX 主题，后续我们只需要在本地客户端上编辑博客内容，编辑好后进入 shokax-can 根目录，执行 hexo g 重新生成网站静态文件，然后执行 sudo rsync -avz public/* root@YourDomain:/usr/share/nginx/html/ 这条命令，便可将新的内容同步到云服务器的 Web 根目录下

这里简单说几个 hexo 常用的命令，执行以下 hexo 命令必须确保我们在博客的根目录 (即 shokax-can)，否则命令会报错

1. hexo s # 启动本地博客，启动后可在本来浏览器访问博客内容
2. hexo g # 生成网站静态文件，用于 web 服务器发布
3. hexo cl # 清除本地生成的静态文件
4. hexo algolia # 将博客中的内容（如文章标题、内容、标签等）上传到 Algolia 搜索引擎，并生成一个索引
   我们暂时只需要记住这 4 个参数就可以

想了解更多 hexo 的信息，请查看官网文档:https://hexo.io/zh-cn/docs/

# hexo-admin

我们搭建好博客之后，想要管理我们博客的内容，最简单的方法就是安装一个 hexo-admin 插件，这样我们就可以通过浏览器增删改我们的博客内容

首先切换到博客的根目录，输入下面命令开始安装 hexo-admin 插件

• cnpm install hexo-admin --save # 安装 hexo-admin 管理插件
  

安装完后，执行 hexo s 启动本地博客，在浏览器中通过 localhost:4000/admin/ 访问管理地址

1. Posts 可以增删改博客文章内容

2. Pages 可以创建博客其它页面，例如 关于我、404 页面等

3. Settings 可以设置该管理页面需要账号密码验证后才能访问，点击 Setup authentification here 进入设置页面

填写你的账号密码，然后复制下面配置信息，添加到博客根目录的 _config.yml 文件中即可

添加完毕后，重新启动项目，访问管理平台就会要求输入账号密码登陆了

# 告警排查

在我们启动 hexo 项目的时，可以看到有许多告警信息，我们一个一个解决

1. Prism's Diff Highlight plugin requires the Diff language definition (prism-diff.js).Make sure the language definition is loaded or use Prism's Autoloader plugin.

这是一个语法高亮插件的告警，大致意思是：我们的博客正在使用 Prism 的 Diff Highlight 插件，但是缺少必要的 prism-diff.js 文件，这个问题我尝试过在 JS 目录中添加 prism-diff.js 文件，也尝试过加入 Autoloader 插件，但是依然报警，知识盲区处理不了

反正目前博客的语法高亮功能是正常的，既然无法从给出的提示解决问题，那么就把这个告警干掉吧，进入博客根目录，打开 prism-diff-highlight.js 文件

• vi node_modules/.store/prismjs@1.29.0/node_modules/prismjs/plugins/diff-highlight/prism-diff-highlight.js
  把告警注释代码注释掉即可

2. WARN [SXEC 201] Essential information(title, desc, lang, etc) config incorrectly, Page will render incorrectly

WARN The environment check found some problems that can lead to rendering errors, effect errors,

performance degradation, not working correctly, etc

WARN ShokaX has output them into console, read them to get more information. You can search error code in docs(For example, SXEC 101)

根据报错信息找到对应的检测脚本，可以看到这个报错原因是配置文件中信息不完善导致告警

编辑博客根目录下的 _config.yml 文件，完善下面这 5 个信息即可

3. sinaimg blocked all request from outside website,so don't use this format
   从报错信息来看，这个是新浪图床禁止外部网站的访问

解决的方法也很简单，反正我们都有自己的云服务器了，建议将图片资源放在自己的云服务器上，删除主题中所有的外部图床链接，替换成本地的图片资源链接

ShokaX 主题目录默认在博客根目录下的 node_modules/hexo-theme-shokax , 建议创建一个软链接到 themes 目录下，方便以后管理

• cd themes && ln -s ../node_modules/hexo-theme-shokax shokax
  编辑主题目录下的 _images.yml 文件

删除所有内容，添加自己的图片链接，把需要同步到云服务器的资源到 shokax-can 根目录下的 source 目录，这样每当我们执行 hexo g 的时候，这些资源就会再 public 目录下生成

例如我将图片放在 source\images 下，同步到云服务器后就可以通过 https://xxx/images/xxx.jpg 访问对应的资源。这样我们就可以把地址改成自己的云服务器地址

需要注意，所有的链接前面都有一个 减号和空格！！！

# 添加搜索功能

1. 到 algolia 官网注册一个账号 https://www.algolia.com/

2. 登陆 algolia, 依次点击 Search - Index - New - Index, 填写 Index name （建议填写 shokaX）

3. 创建完毕后，点击左下角的 Settings - API Keys 查看你的 API Keys, 记录 appId、apiKey、adminApiKey 这三个信息
   
   

4. 编辑博客根目录下的 _config.yml 文件，在末尾加入以下内容

algolia:

  appId: #Your appId

  apiKey: #Your apiKey

  adminApiKey: #Your adminApiKey

  chunkSize: 5000

  indexName: "shokaX"

  fields:

    - title #必须配置

    - path #必须配置

    - categories #推荐配置

    - content:strip:truncate,0,2000

    - gallery

    - photos

    - tags

添加后保存关闭文件，在博客根目录下执行 hexo algolia 便可以将博客的内容生成索引用于搜索

# 添加评论功能

我之前博客用的评论插件是 Valine ，很可惜 ShokaX 已经明确说明不会支持 Valine ，导致我之前博客上的评论无法迁移过来

不重要了，反正有原始数据，等自己有能力的时候再研究

本次 ShokaX 官网推荐的评论系统主要有两个， waline 和 twikoo , 我这里选择的是 waline , 部署 waline 有 N 种方式，但是我们已经有属于自己的云服务器了，所以我选择了独立部署

# waline 独立部署

云服务器需要提前安装好 nodejs 和 cnpm , 安装方法前面已经介绍过了，这里不多赘述

1. apt install mariadb-server -y # 安装 mariadb 数据库

2. systemctl enable mariadb # 设置开机自启动

3. mysql_secure_installation # 初始化数据库

4. git clone https://github.com/loclink/waline-service.git # 拉取 waline 仓库

5. cd waline-service && cnpm install # 进入项目目录并安装依赖

6. cnpm run init:env # 初始化环境变量并生成.env 文件

7. vi .env # 编辑环境变量文件，添加数据库连接信息

8. cnpm run init:db # 初始化数据库
   

9. cnpm run start # 启动项目
   

10. 在客户端博客根目录编辑 _config.shokax.yml 文件，添加以下内容

waline:

  enable: true # 是否启用

  serverURL: "" # waline 服务端地址，https://YourDomain/waline

  lang: "zh-CN" # 评论界面语言

  locale: {} # 本地化替换，详见 waline 文档

  emoji: # 表情包，默认为 waline 官方配置

    - https://unpkg.com/@waline/emojis@1.0.1/weibo

    - https://unpkg.com/@waline/emojis@1.0.1/alus

    - https://unpkg.com/@waline/emojis@1.0.1/bilibili

    - https://unpkg.com/@waline/emojis@1.0.1/qq

    - https://unpkg.com/@waline/emojis@1.0.1/tieba

    - https://unpkg.com/@waline/emojis@1.0.1/tw-emoji

  meta: # 评论可以填写的项目

    - nick

    - mail

    - link

  requiredMeta: # 评论必须填写的项目

    - nick

    - mail

  wordLimit: 0 # 评论字数上限 (不建议为 0)

  pageSize: 10 # 每页显示评论条数

  pageview: true # 页面浏览量显示

11. 执行 hexo cl && hexo g 后将用 Rsync 命令将 public 目录同步到云服务器的 web 根目录即可

waline 基本命令

1. cnpm run start # 启动
2. cnpm run stop # 停止
3. cnpm run log # 查看日志
4. cnpm run status # 查看运行状态

# 吐槽

有一说一，独立部署 waline 这块真的很多坑， serverURL 我看别人文档填的都是管理地址 http://xxx:8360 , 我也就照着填，本地启动 hexo 可以评论，但是部署到云服务器就不行

上网查了关于 blocked:mixed-content 的解释，大致意思是浏览器阻止了 https 站点请求非 https 的资源，这是一种安全机制，旨在防止内容劫持和其它安全问题

于是我就往 nginx 配置加了反向代理，重启 nginx 后反复测试结果依旧

我在这个地方真的卡了很久，找了很多 waline 的文档都没有这方面的具体说明，只知道大概是 serverURL 地址的问题

最后反复调教 GPT 才知道这个 serverURL 地址应该是填 https://xxx/waline , nginx 配置中 waline 的配置也需要修改成 location /waline/

目前 waline 还有几个问题我没有时间去研究，例如部分文章阅读次数总是显示为 0, 但是我在数据库中是可以看到统计次数的，就很奇怪

还有就是评论通知这些，等有空再研究，就先这样吧