也是把我的Blog建立起来了！

在此之前我尝试过很多次，但是因为各种原因，都没有真正的建立自己的Blog，这次不一样了…

我是谁？

笔者只是一个普通人，你可以叫我黎擎，我因兴趣驱动，故建立自己的博客，用以记录分享。

为什么建立博客？

俗语讲“好记性不如烂笔头”，我想我也是我最初的想法。

初识 Hexo

Hexo 是一个快速、简洁且高效的博客框架，使用Markdown编写文章，支持多标签、多分类、多页面；主题丰富，静态部署方便。

我大概是大学期间开始尝试使用 Hexo 搭建自己的Blog，但是因为各种原因，有的半道上断了，有的因为自己的技术原因，反正没有成功。
当然，一开始接触静态Blog时（此处仅是 Hexo ），我也是在网上看到别人写的文章，自己一步步搭建，他们大部分都是使用 Github Pages 部署的；
再说 GitHub Pages ，这个玩意儿我一直觉得不是很好用，所以此次我转向 Cloud Flare 的 Pages，目前这个我觉得很好用，因为我可以直接跳过本地 hexo g 这个步骤，更不用 hexo d 了；
所以，我现在可以直接使用GitHub上我的仓库来保存我的 Hexo 源代码，这样就不用担心源代码丢失了（之前因为重装系统、笔记本换台式机等原因项目源码丢失）。

搭建过程

接下来我将一步步讲解我是如何搭建并部署我的Blog的。

环境准备（步骤大纲）

首先你得有一台安装了 Windows 10/11 系统的电脑，系统不要太老，此处笔者使用的是 Windows 11 ，编辑器用的是JetBrains家的 WebStorm；
安装 Git ，版本不要太老，老版本在克隆仓库时有概率会出现错误，笔者此处使用的Git版本为 2.50.1；
安装 Node.js ，笔者这里使用 nvm 管理 Node.js 版本；
安装 Hexo ，并初始化blog文件夹；
安装 Hexo Pro ，这是一个开源的 Hexo 博客后台管理系统；
克隆你想要的使用的主题仓库到你的项目根目录下的 themes 文件夹下，这里笔者使用的是 hexo-theme-butterfly；
准备好你自己的 GitHub 和 Cloud Flare 账号，此处就不做注册教学了；
项目上传到你的 GitHub 仓库；
登录你的Cloud Flare 账号，并绑定你的 GitHub 账号，在 Worker&Pages 中的 Pages 里新建一个项目，并选择你的 GitHub 仓库；

安装 Git

前往 Git官网下载并安装 Git
详细安装步骤此处略过

安装 Node.js

此处笔者使用 nvm 管理 Node.js 版本，因此有两种安装方式

前去官网自己下载并安装 Node.js
- 前往 Node.js官网下载并安装 Node.js
- 详细安装步骤此处略过
使用 nvm 管理 Node.js 版本
- 前往 nvm文档官网下载并安装 nvm ，推荐最新版本
- 详细安装步骤此处略过，注意：请把 nvm 安装路径和 node 安装路径放到一个文件夹下，如图：
- cmd 输入 nvm 命令，查看是否安装成功,输入 nvm --version 命令查看版本
- 输入 nvm list available 命令查看可安装的版本,此处选择 LTS 长期支持版本，此处选择 22.20.0 即可，如图：
- 输入 nvm install 22.20.0 命令安装指定版本
- 输入 nvm use 22.20.0 命令切换到指定版本
- 输入 node -v 命令查看当前版本，输入 npm -v 命令查看 npm 版本
- 上述命令运行后，能够正确输出版本号，则证明已经安装成功

安装 Hexo

下方是我自己的口述安装步骤，具体请参考 Hexo官方文档

创建一个项目文件夹，并进入项目文件夹，例如：myblog ，右键文件夹空白处，选择Git的 Open Git Bush here ，这只是一个Git的控制台
在对话框中输入 Hexo 安装命令：npm install hexo-cli -g ，安装完成后，输入 hexo -v 命令查看版本，成功输出版本号代表安装成功
接着在此对话框中输入 Hexo init 命令初始化博客项目，初始化完成后，使用你的编辑器打开项目文件夹，例如：myblog ，在编辑器的控制台输入 npm install 命令安装项目依赖
以上三步做完，就可以在控制台输入 hexo s 命令启动服务了，启动成功后，在浏览器中打开 http://localhost:4000 ，即可看到你的博客了

安装 Hexo Pro

这是一个开源的 Hexo 博客后台管理系统，使用起来非常简单，具体请查看 Hexo Pro中文文档

在你的编辑器控制台输入：npm install --save hexo-pro ，安装 Hexo Pro 插件
启动 Hexo 服务器：hexo s
访问后台管理页面，浏览器地址栏输入：http://localhost:4000/pro/

配置Github仓库和子模块

因为我们的项目使用了两个仓库，一个是我们自己的项目仓库，一个是 hexo-theme-butterfly 的仓库，因此我们需要将 hexo-theme-butterfly 的仓库作为项目仓库的子模块

在你的GitHub上新建一个仓库，跟你的项目仓库名字一样，例如：myblog ，并且设为私有仓库，复制仓库https地址
此时你的项目应该还没有添加子模块和克隆主题仓库，所以先把你的Hexo项目Push到GitHub仓库，此次记为第一次推送
注意：请先完成克隆主题仓库，再来做下面的步骤

在你的项目根目录新建一个文件，叫：.gitmodules，添加以下内容：

1
2
3

[submodule "themes/hexo-theme-butterfly"]
    path = themes/hexo-theme-butterfly
    url = https://github.com/jerryc127/hexo-theme-butterfly.git

然后在设置中打开两个仓库的目录映射，如图：
因此你需要在项目控制台根目录下输入：git submodule init 添加子模块，在没有任何报错的情况下，进行主项目仓库的第二次推送
推送成功后，去GitHub上你的仓库点击 themes 目录下的themes/hexo-theme-butterfly 目录，点击它，看看是否可以跳转到 hexo-theme-butterfly 主题仓库
如果以上操作都没有问题，那么恭喜你，你的项目已经配置完成，可以进行部署了

克隆主题仓库

默认 Hexo 使用 hexo-theme-landscape 主题，因此我们需要使用 hexo-theme-butterfly 主题，具体请查看 Hexo-theme-butterfly

在你的编辑器控制台输入：git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/hexo-theme-butterfly ，克隆主题仓库
修改根目录下的 _config.yml 文件，将 theme: landscape 修改为 theme: hexo-theme-butterfly
重启服务器：hexo s ，访问 http://localhost:4000 ，即可查看新主题
主题配置此处不做赘述，具体请查看 Hexo-theme-butterfly主题配置文档

部署到 Cloud Flare Pages

Cloud Flare Pages 是 Cloud Flare 提供的静态网站托管服务，具体请查看 Cloud Flare官网

登录上你的Cloud Flare账号，进入首页后，点击左侧菜单栏“计算（Workers）”下的“Workers 和 Pages”
进入页面后，点击右上角的按钮“创建应用程序”，如图：
然后选择 “Pages” ，再选择“导入现有Git存储库”，如图：
cf 会自动识别你绑定的账号的仓库，选择你的项目仓库，并点击“开始设置”，如图：
填写项目名称，你可以自定义，后续作为你博客的二级域名使用；生产分支默认 master
构建命令使用：npm install -g hexo; hexo clean; hexo generate;；构建输出目录使用：public
整体配置，如图：
构建完成后，你就可以使用 cf 生成的 pages.dev 二级域名来访问自己的博客了，如图：
如果你有自己的域名，你还可以自定义域名，在你自己的域名前面添加上你自定义的二级域名，如：blog.example.com
之后你的域名 DNS 就会多一个你的博客的域名，注意：自定义域名需要你拥有一个自己的域名，同时这个域名必须由 Cloudflare 托管

恭喜你！

你已经成功搭建了一个自己的博客了，接下来你可以开始写博客了，具体请查看 Hexo官方文档

更新内容

这一部分是后面又进行更新后添加的

添加Waline评论系统

在我刚发布博客的时候，没有配置评论系统，所以现在把 Butterfly 支持的 Waline 添加到博客中，注意：整个 Waline 的配置全部在 LeanCloud国际版 展开

由于 Waline 是基于 Leancloud 的服务，因此，我们需要在 Lean Cloud国际版官网上注册一个账号，并创建一个应用，然后获取 app_id 和 app_key ，具体参考Waline官方文档；
再者，关于我在网上浏览的很多关于 LeanCloud 的文章，都是基于旧版本的LeanCloud 官网布局，因此，这里我将演示一遍我的获取app_id 和 app_key 的过程：
- 首先，进入 Lean Cloud国际版官网，注册登录后进入主页，如图：
- 然后，点击左上角的应用，并点击查看所有应用，进入所有应用页面（此时你的页面应该是没有应用的），如图：
- 点击 创建应用 ，输入你的应用名称，选择开发板，输入你的应用描述，点击创建，如图：
- 进入你的应用页面，点击左下角的设置 - 应用凭证，就可以看到你的 app_id 、 app_key 、master_key，复制这三个字符串后面备用，如图：
- 查看评论存储的地方，点击 数据存储 -> 结构化数据 -> Comment ，此处的Comment不需要你自己创建，在有评论后，Waline会自己创建一个Comment数据表，并把评论数据存储进去，如图：

配置 _config.hexo-theme-butterfly.yml 文件，找到你的 comment 配置项，使用 Waline，如下：

comments:
  # 最多两个评论系统，第一个将作为默认显示
  # 如果不需要评论功能，保持为空
  # 选择：Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # 两个评论系统的格式：Disqus,Waline
  use: Waline
  # 按钮旁边显示评论系统名称
  text: true
  # 懒加载：评论系统将在评论元素进入浏览器视口时加载
  # 如果设置为 true，评论计数将无效
  lazyload: false
  # 在文章顶部图片中显示评论计数
  count: false
  # 在主页显示评论计数
  card_post_count: false

接下来，前往 Waline 官方文档，查看如何在 Vercel 上部署 Waline 服务，如图：
之后，就按照 Waline 官方文档 上的 Vercel 部署步骤，一步步部署完成，如图：
当你走到第六步的时候，如图：
使用 Cloud Flare 代理 Vercel 项目的自定义域名，从而能够正常访问 Waline 服务，现在先去添加一个自定义域名，如图：
来到 Cloud Flare 中你的域名的 DNS 中添加 CNAME 记录，并设置 TTL 为 1小时，并保存，如图：
然后，我们返回 Vercel 中你的项目中，点开Settings -> Domains，如图：
访问添加的域名是否代理成功，如图：

配置 _config.hexo-theme-butterfly.yml 文件，找到你的 Waline 配置项，填写你的 Waline 服务地址，如下：

# Waline 评论插件配置，一个简单的评论系统，基于 Valine 开发，支持后端
# 官方文档：https://waline.js.org/
waline:
  # 服务器 URL
  serverURL: 此处填写你的Vercel上部署的 Waline 服务地址
  # 评论框背景图片
  bg:
  # 使用 Waline 的访客计数作为页面的访客量
  pageview: false
  # 其他可选配置
  option:

最后，重启一下你的博客，就可以看到你的博客中添加了 Waline 评论系统了，如图：

添加Algolia_search全局搜索

同样是发布博客的时候，没有配置全局搜索，所以现在添加，顺便记录踩过的坑

安装 algolia_search 对应的包，这里我安装的是比较新的 hexo-algoliasearch 具体可以去hexo-algoliasearch Github文档查看，安装命令如下：
1
npm install hexo-algoliasearch --save
前往Algolia官网注册一个账号，我曾尝试使用GitHub登录，但是不好使，最后我使用QQ邮箱注册的账户，登录后到仪表盘（Overview），点击“查看所有应用”如图：
进入到应用列表后，一般系统会自动创建一个应用（My First App）,这里并不用它这个，咱们自己创建，如图：
填写应用信息，按照下方图片指示，一步步创建，如图：
创建成功后，进入刚创建的应用管理页面，然后点击 Search 菜单按钮进入下一个页面，如图：
首次进入 Search 页面，会提示你创建一个 index 索引，具体看下方图片指示，创建完成后点击左下角的 设置⚙ 按钮进入设置页面，如图：
进入设置页面后分两步，首先先找到 API Keys 选项，然后点击它进入到你创建的 App 的所有的 keys 列表页面，复制它们备用，如图：
配置本地环境变量的 Algolia Write API Key，分为 Windows 和 Mac 两种，具体请看下方：
- Windows：因为我用的也是Windows，所以这里我新建 Windows 下一个环境变量的方法，如下：
  - 首先你打开你电脑上的 高级系统设置 ，此处 Win10 和 Win11 的打开 高级系统设置 方法有些许不同，具体方法请自行上网搜索，然后打开后的页面是一样的，如图：
  - 然后点击 环境变量 按钮，进入到 环境变量 页面，如图：
  - 然后点击下方系统变量的 新建 按钮，进入到 新建系统变量 页面，变量名为：HEXO_ALGOLIA_INDEXING_KEY ，值则为你复制的 Write API Key ，然后全部确定关闭页面就行，如图：
- Mac：这里我没有Mac电脑，没有亲身实践，故我引用了这篇文章，这里我把他文章里的步骤拷贝过来，如下：
  - 打开 终端 ，输入 vi ~/.bash_profile ，然后回车，进入到编辑模式
  - 然后在 export 数据下面添加一行 export HEXO_ALGOLIA_INDEXING_KEY=你的Write API Key
  - 并且在 PATH 后面添加上 $HEXO_ALGOLIA_INDEXING_KEY，如图（图片出自上方那篇文章）：
  - 尔后按下 ESC 键并输入 :wq 退出编辑模式，这样Mac模式下的 HEXO_ALGOLIA_INDEXING_KEY 应该就添加成功了
  - 最后输入 source ~/.bash_profile 刷新环境变量
  - 注意：因为这里我没有Mac电脑，没有亲身实践，故我引用的这篇文章，如你遇到错误，请自行解决。🤝

配置项目根目录下的 _config.yml 文件，添加 algolia 配置项，直接放到最下面就行了，配置如下：

# Algolia API配置
# https://dashboard.algolia.com/
algolia:
  appId: "你的appId"
  apiKey: "你的apiKey"
  adminApiKey: "你的adminApiKey"
  indexName: "你自己的索引名称"
  chunkSize: 5000
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

配置完成后，一定要先 hexo clean 一下，也可以在 package.json 里添加一行自定义命令，如下：
1
"algolia-cg": "hexo clean && hexo generate && hexo algolia"
- 效果如图：
这里对上方的 hexo algolia 命令做一下解释：
- 请注意，我们是不需要修改上方的 Cloud Flare 的部署构建命令的，因为只要我们在本地运行过 hexo algolia 命令，远程的 Algolia 索引上就会产生索引数据，
- 所以，按照我的方法来的话，只要在推送你的代码到你的GitHub仓库前，运行自定义的命令 algolia-cg 即可。
- 之后你再推送代码到GitHub仓库，Cloud Flare 会正常部署你的Blog，直接去你的Blog上测试搜索即可，如图：
到这里就已经可以使用全局搜索了！😁😃😀