:543543534

前言

之前一直都是使用wordpress,使用这种博客确实方便，自带后台，直到有一天我的服务器崩溃了，虽然重启一下就好了，但是实在觉得博客应该注重的是稳定，所以，找到了hexo这款静态的博客，静态的博客使得他可以在各种平台上部署，比如vercel,在部署中，因为时间的问题，Hexo官方和Qexo 文档中的有些教程已经失效，因此，经过一些探索，成功实现了部署，本博客就是在此基础上建立

先说一下其中的基本思路，首先直接使用vercel部署hexo，然后通过在github对应仓库中编辑相关的配置修改网页或者是主题，vercel在仓库改变时会自动重新部署，随后使用qexo来写文章

部署

部署hexo

在hexo官方文档中,hexo使用了github pages进行部署，但是github pages的速度是不如vercel的，vercel的cdn速度也是非常快，而且如果不使用图床直接本地引用图片，有概率遭到github官方制裁，vercel缺点是需要一个域名，因为vercel给的域名都被屏蔽了，如果博客不需要推广，这里推荐使用Spaceship的六位数字域名，续费仅需五块，而且支持支付宝

我们使用他人已经构建好的仓库，点击之后再点击deploy按钮，随后给仓库取名，import，一直点下去

部署

创建

不出所料，就跳出了默认页面，但是，通过阅读hexo的文档，我们发现想要写文章，就要在本地写好文章，再上传，有点麻烦了，所以我们引入了Qexo

部署qexo

我们还是继续在vercel上部署qexo，点进官方文档，还是点击deploy,就会报错，不要着急，我们首先点进项目列表，点进setting,general,更改node版本为18

设置

版本

我们需要配置一下数据库的环境变量，这里我选择了Supabase | The Open Source Firebase Alternative,官方文档中有详细说明有关的环境变量，区域一定要选择 N. Virginia (us-east-1)

这里特别注意，subpase请选用session pool里面的连接信息，就是最下面的那个

sup

填写相关的环境变量

en

en2

接着就可以进入配置页面了，关于配置页面，请参考这篇HEXO系列教程,特别注意分支选择，请一定填入main，不然默认是master，不出问题就会显示成功，但是会跳出505，这里不要慌，只要前面没有出现连接失败就行，直接点主页正常使用

error

至此，你已经可以正常编辑文章并写入，但是还存在一些问题，这只是一个毛胚房，你需要一些设置来美化你的博客，还有图片的插入

后续的设置

关于插件

众所周知，想要安装wordpress插件，就要先安装npm包，在本项目中，可以对博客仓库中的package.json进行编辑，来添加插件，下面我添加了一下常用的插件

原代码文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-stylus": "^2.1.0",
    "hexo-server": "^3.0.0"
  },
  "scripts": {
    "dev": "hexo server -p $PORT",
    "build": "hexo generate"
  }
}

修改后文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-stylus": "^2.1.0",
    "hexo-server": "^3.0.0",
    "hexo-renderer-pug": "latest",    //butterfly主题需要插件
    "hexo-renderer-stylus": "latest",    //butterfly主题需要插件
    "hexo-abbrlink": "latest",    //短链接生成插件
    "hexo-asset-image": "latest"    //图片导入插件
  },
  "scripts": {
    "dev": "hexo server -p $PORT",
    "build": "hexo generate"
  }
}

随后进行保存，vercel会自动重新部署，当部署失败时，vercel会发送邮件通知

图片的插入

qexo遵循markdown语法，这里，我们需要首先启用资源文件夹，打开根目录下的_config.yml，找到如下代码进行编辑

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

marked参数需要自行添加

在关于安装插件这一栏中，我们已经安装了图片插件，在我们写完文章保存时，source/_posts目录下，会生成对应的md文件，此时，我们在相同目录下创建同名文件夹，这里提醒一下，github无法创建空文件夹，所以可以随便搞一个文件放进去占位，此时，我们就可以通过 ![图片注释](图片文件名/图床链接)的形式进行图片的插入，qexo在编辑状态下无法显示图片，只要保存后正常显示就没事

主题设置

之后，我们需要设定主题，这里我选择的是Butterfly主题，请确保已经安装了我前面给出的插件，随后，请安装官方文档，进一步安装

美化

在butterfly中，可以通过编辑themes/butterfly/_config.yml来自行美化

不要把个人需要的文件/图片放在主题source文件夹里，因为在升级主题的过程中，可能会把文件覆盖删除了。
在 Hexo 根目录的source文件夹里，创建一个文件夹来放置个人文件/图片。
引用文件直接为/文件夹名称/文件名

出自官方文档

关于各个美化参数，参考Butterfly 文檔(二) 主題頁面 | Butterfly，Butterfly 文檔(三) 主題配置 | Butterfly

结束

butterfly这个主题还是不错的，官方文档写的也很详细，博客速度也非常快速，以后会写一下关于美化方面的，比如计数器，和评论系统