正如标题所见，这是我第一次真真正正的用自己的知（D）识（S）库（H）搭建起来的，基于Hexo架构博客，并且在这里，完成我第一篇真正属于我自己意志的，不受其他平台规则限制的博客。下面，我将简单地讲述一下我搭建博客时候的心路历程，感悟，亦或者甚至，规划。

心路历程

关于为何搭建这个博客

其实最初搭建博客的想法，总结来讲就两点：

1.被学长所搭建的博客所吸引，所以自己也想搭建一个；
2.自己想在一些感兴趣的领域发表一些深刻独到的见解，结果发出去发现自己的评论被平台删除了。别人看不到没关系，甚至都不能取悦自己。

于是乎，搭建博客的想法便萌发出来。

然而毫无疑问的是，搭建博客可不是一件耍耍嘴皮子就能完成的事情。搭环境，本地跑通，通过github仓库发布上线，换主题……这些光听起来就已经足够让人头晕。无奈的是，当时本人正值军训，学校事情颇多，再加上自己个人认为0基础，实在是没有自信去搭建一个属于自己的博客。于是，这个事情只能搁置了。

就在我即将要把这个事情遗忘之时，Baiyb大佬的博客搭建教程救了我。

这个教程可以说是相当保姆级别了，甚至可以说是胎教级别的。感兴趣的朋友可以去看看。

话题转回搭建博客的缘由，除了上面那两点，更具体来说，是想搭建一个真正属于自己（或者更通俗的话来说，取悦自己）的平台，可以无视平台规则限制，可以不用多考虑自己个人账号下粉丝们的感受，且可以长期保存并且在几年后的同一天仍然可以回忆观看自己所写博客的平台。简言之，博客就是俺的家，是我在混乱的互联网世界中最温暖的港湾。

搭建博客时的大致过程

本次所搭建的博客基于Hexo框架+Github pages，搭建博客前，需要先配置node.js的运行环境，以及我们和github沟通的桥梁：git，创建好github pages仓库，以及最为重要的：Hexo——将我们所写的markdown文件发送至以静态网页为媒介的互联网上。

安装完Git，Node.js,注册完GitHub账号后，接下来就可以部署Hexo框架就好了，你可以直接hexo init启动，也可以像我一样直接下载大佬的懒人包。不过需要注意的是，安装好后的hexo框架版本是7.3.0，如果想使用最新的8.1.2版本，需要自己进行更新，请先看看自己有什么要更新，例如在Powershell管理员模式下，输入：

1
2
cd D:\example\Hexo-files
npm outdated

（这里的example等文件仅供参考，你也可以直接定位到Hexo-files）
这里会列出「当前版本 / 想要版本 / 最新版本」三列。

如果你只是小版本的更新，可以直接：

1
npm update

这里只会在 package.json 的 ^ 范围内升（如^8.1.2 → 8.x 的最新版），不会跨大版本。

但是如果要更新大版本的话，则需要执行：

1
npm install hexo@latest

⚠️ 注意：大版本可能不兼容你原来的主题和插件，升完必须完整验证一遍。

至于验证可敲入以下指令：

1
2
npx hexo version
hexo clean; hexo g; hexo s

如果 http://localhost:4000能显示你定制的博客页面，那么恭喜你，基本更新的没有什么大问题了，可以直接Hexo d了。

顺带一提，每次执行完hexo c，hexo g，hexo s本地检查完毕后，可以直接进行hexo d，因为如果在hexo d之前再重复进行hexo c与hexo g之后，有概率会把你更新的特性直接又给清除了，所以直接hexo d更保险一些。

好了，绕了太多了，现在我们重新说回Hexo初始化。

初始化完hexo，在git bash执行完第一次hexo g与hexo s后，会出现我上述的4000网站，按住ctrl点一下，当出现经典的landscape页面时，恭喜你，初始化+本地运行就算是很顺利的成功了……吗？

你建了房子，你总要给别人看一看吧！

接下来，就要讲到最难的部分了：部署到github pages仓库。

将你的博客部署到github pages仓库

要完成这一步时，你需要先创建一个github pages 仓库。大佬的教程已经很详细了，不再细说。这里需要注意的是，一定要先确认自己原来的github账号还有没有效，如果无效，创建新仓库时，会出现Owner has been deleted报错，如下图

Owner报错

因此，请一定要再次确认自己的GitHub账号是否有效！如果无效，直接注销了然后重新注册一个！

翻过这座大山，又要面对创建ssh key这一座更高的山。按教程生成好ssh key，然后放进GitHub仓库便可。

##⚠️ 注意

放进github仓库的ssh key一定要是公钥！一定要是公钥！一定要是公钥！重要的事情说三遍！github仓库也是不支持添加私有的ssh key的！也不要随便发给别人！

添加后测试与GitHub的通信，之后就可以在_config.yml文件中配置Hexo的部署目标了。

##⚠️ 注意

从这里开始，如果你要更改.yml，.js文件，这里强烈建议使用VS code 进行更改，相比于记事本，这里不同的键、值、注释等都用不同颜色标清，错误也会用不同颜色标清，且可自动补全，更为清晰一些，也可以更好地控制缩进等操作。

接下来，用npm install指令安装部署插件，之后执行hexo clean；hexo g；hexo d指令，看到：

1
INFO  Deploy done: git

那么恭喜你，hexo已经把站点部署到仓库了。

接下来尝试在多个智能设备访问https://你的GitHub用户名.github.io，当再次出现那高贵的landscape文件时，恭喜你，真正属于自己的互联网小房就算是真正搭建好了。

布置你的Hexo背景

光建好房子还不够，总要装修一下吧！总要换个好床吧！不能让我睡毛坯房的硬板床上啊

因此，给“房子”换上一个舒适的“床”很关键。
Hexo框架博客也是如此。你可以根据自己的喜好，在github上找到你喜欢的，你自己个人认为适合你的主题，比如butterfly。不同的主题都有自己特色的，或者一些可定制的功能或者特效。比如butterfly上的打字机特效，以及我之前用过的yilia-plus主题中，标题可以随标签页的切换而切换等等。选择你喜欢的便可。至于如何更换，在BaiYB大佬的教程中已经很详细了，这里便不再细说。

个人想说的是，有没有一种可能，我们可以把其他主题的一些插件特性，移植到我们自己的主题上？

有的兄弟，有的！

例如，从 yilia-plus 移植「标签页标题切换」到 Butterfly。

大体功能是，切到别的标签页时，页面标题变成「example1 原标题」； 切回来时变成「example2 原标题」，2 秒后自动恢复原标题。

原理大概便是：监听 visibilitychange 事件，改 document.title。

把其他主题的特性移植到自己的主题，需要先明白，任何主题功能 = 脚本本体 + 引入位置 + 配置项。而移植就是把这三件分别安顿好。后面的很多移植方法论全建立在这个模型上。

第 1 步：创建脚本文件

新建 你的博客目录/source/js/tab-title-change.js：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
 * 标签页标题切换（从 yilia-plus 移植到 Butterfly）
 *
 * 行为：切到别的标签页时标题变成「我藏好了哦~ 原标题」，
 *       切回来时变成「被你发现啦~ 原标题」，2 秒后恢复原标题。
 */
(function () {
  'use strict';

  // ===== 配置区：想改文案就改这里 =====
  var CONFIG = {
    leftTitle: 'example 1 ',
    returnTitle: 'example 2 ',
    restoreDelay: 2000
  };

  var originTitle = document.title;
  var titleTimer = null;

  function resetOriginTitle() {
    // 只有在标题处于"正常状态"时才更新基线，
    // 否则会把带前缀的标题当成新基线，越套越长
    if (document.title !== CONFIG.leftTitle + originTitle &&
        document.title !== CONFIG.returnTitle + originTitle) {
      originTitle = document.title;
    }
  }

  document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
      if (titleTimer) {
        clearTimeout(titleTimer);
        titleTimer = null;
      }
      document.title = CONFIG.leftTitle + originTitle;
    } else {
      document.title = CONFIG.returnTitle + originTitle;
      titleTimer = setTimeout(function () {
        document.title = originTitle;
        titleTimer = null;
      }, CONFIG.restoreDelay);
    }
  });

  // 兼容 Butterfly 的 pjax 无刷新跳转：页面内容换了，标题基线也要更新
  document.addEventListener('pjax:complete', function () {
    if (titleTimer) {
      clearTimeout(titleTimer);
      titleTimer = null;
    }
    // pjax 跳转后标题由主题重新写入，此时重新记录基线
    setTimeout(function () {
      if (!document.hidden) {
        originTitle = document.title;
      }
    }, 0);
  });

  // 兜底：有些 pjax 版本只触发 success
  document.addEventListener('pjax:success', resetOriginTitle);
})();

第 2 步：在配置里引入

编辑 你的博客目录/_config.butterfly.yml，找到 inject: 段（用编辑器搜索 inject:），在 bottom: 下面加一行：

1
2
3
4
5
6
inject:
  head:
    - <style>...你的其他样式...</style>
  bottom:
    # - <script src="/js/custom.js"></script>
    - <script src="/js/tab-title-change.js"></script>     # ← 加这一行

第 3 步：验证

1
2
3
4
cd 你的博客目录
hexo clean
hexo g
hexo s

之后打开4000网站，当你看到新特性更新到你所在的主题的时候，那么恭喜你，新特性更新成功了，直接hexo d更新一下就可以了。

总结来讲，你如果想要把其他主题的特性移植到你的主题上，记得跟着五步走：
1.找到原版的”三件套”——脚本本体 + 引入位置 + 配置项
2.翻译模板语法
3.换引入方式（→ 注入点）
4.检查”行为差异”⭐
5.边界验证

如此，你学废了吗？我反正是学废了。（头晕）

借助ai的神力

“我说deepseek就是神有没有懂的！”

这是我当时把大体博客框架搭完之后的感受。

说实话，我一个零基础，啥都不懂的小白能成功做成一个博客，真的很大程度上要感谢ai的辅助。如果没有ai的科普以及日志检查，我真的无法想象自己面对一些代码错误之时会有多么手足无措。

就比如，借助ai，我终于可以知道，原来每次更新新项目时，可以先进行备份，如果更新后，代码出现了错误，可以回滚到之前的备份，就像游戏有存档一样，不至于在某一个环节失误后只能抓耳挠思，从头再来。

不过说实话，和ai对话，其实不一定要跟“八股文”似的去死记硬背那些固定的话术，其实更重要的是，你要和ai去说清楚你自己的需求。做一个形象的比喻：这就好比ai是一个厨师，你作为一个厨师长，你想让他做一个牛排，你不能只跟他说煎一份牛排，你要跟他具体说我要一份什么部位的，来自什么牛的，几分熟的牛排，你要说清楚你个人的需求，不要怕罗嗦，ai会自己总结的。写多了没关系，写少了，ai就不知道你是什么需求了，他就不能做出符合你需求的博客，因为很简单，你根本就没有说你的需求是什么。

额外一点：如何去优雅的写一篇markdown文章

It very easy. 如果追求偏商务的打法，你可以选择BaiyB大佬推荐的Hexo编辑器：倘若追求偏运动的打法，你也可以学习XBX大佬的markdown语法指南去了解更多更详细的markdown语法。

感悟

说实话，去创作一个博客不是简简单单的贴个图片贴个文章就解决了，而是说真正的从搭建框架开始，一步步真正定义自己所想要的主题和插件，实现真正的“个性化”,并且成功完成了从修复 → 理解，甚至到传授的这个过程。在这个过程中，遇到了很多代码报错，而我靠着ai一步步硬啃下来了，愣是坚持下来，并且没有放弃——这是难能可贵的。并且随着博客的建设，我真真正正理解了：**博客他就是一个坑，然后把这个坑越挖越大（bushi。**我觉得给博客去添加自己的个性化插件会是一件非常开心的事情。怎么讲呢，拿一个形象的比喻来讲，就像是马来西亚的椰浆饭Nasi Lemak，除了最基础的biasa，你还可以加随意加各种的荤菜以及素菜搭配，形成一种都属于你的椰浆饭体验。而搭建一个博客也是如此。比如说：欸，今天我想加一个来访者欢迎卡片，欢迎来自四面八方的访客；过了一点时间，又发现，欸，我是不是可以加一个音乐播放器了，久而久之，博客在这不经意间积少成多，最终慢慢积累改变成自己的形状了~~

也许，可能这些也便是创建博客的原因之一罢。

未来

关于未来，其实我自己也没有想好，我只是想先完成两个目标：
1.继续完善博客插件
2.持续地更新发布自己的文章

这两点看似简单，实则不算易事，希望能说到做到吧。

就这样了。
最后再次感谢XBX，BaiyB等大佬的教程支持以及ds，gpt的悉心辅导！