博客搭建与维护

封面来源：碧蓝航线 永夜幻光 活动CG

0. 前言

0.1 本文须知

本博客采用Hexo框架进行搭建，使用hexo-theme-butterfly主题进行美化，同时对一些细节进行了魔改，博客部署在Gitee上，未来会将其部署在服务器上（先暂时白嫖一会😆 ）。

博主在遇上问题时，会及时更新…

0.2 如何搭建博客

编写目的

最近没事的时候经常在交流群里宣传我的博客并互换友链，让我的博客流量增加了不少（也就几百😂），很多小伙伴看到我的博客后，都觉得还行，也想自己搭建一个博客，但是新手在第一次搭建博客的时候总会出一些问题，要么是不知道怎么搭建，要么看不懂主题的文档，抑或不知道插件的使用。

我原本以为根据网上的众多教程可以解决这些问题，可依旧有小伙伴来问我，因此，我决定写一下怎么搭建一个博客。

—— 本节编辑于 2020/08/13

搭建须知

如果仅搭建一个简单的博客，你的电脑上需要有Node.js和Git才可以搭建。

不会Git及其配置？没关系！在本博客搜索关键词Git即可，我写过一篇关于Git的简易使用教程。

如果你想要对搭建好的博客进行魔改美化，你还需要一定的HTML + CSS + JS 的知识。

如果不会以上提及的技术也没关系，我会给出参考教程如何搭建，一些魔改美化也可以自己去网上搜索。

还有一点，我们编写博客文章的工具使用的是Typora，这是一款高自定义化的、简洁的Markdown编辑工具。

什么？你没用过？没关系，在本博客搜索关键词Typora即可，我曾经写过一篇关于Typora和Markdown相关的文章。

那么！我们就开始了！👊

初步搭建

首先你需要先搭建出一个简单的博客，然后你才可以在这个基础上进行美化，参考教程看这里：

手把手教你从0开始搭建自己的个人博客

这是一个视频教程，讲的十分详细（感谢羊哥！），我当初也是跟着这个视频进行搭建的。

在这个视频最后，还给出了主题配置的步骤，如果你不喜欢视频中的主题，可以去GitHub上搜索 hexo theme ，就能找到许多好看的主题，配置方式与视频中类似。

配置图床

完成以上步骤后，博客基本就初步搭建好了，我们可以编写Markdown文件放进博客文章目录blog/source/_posts中，但是这下又出现了一个问题，博客中的图片应该怎么办呢？

.md文件中的图片都是引用的，图片是放在本地的，那我们怎么在博客中引用图片呢？

这就需要图床了，图床有很多，有使用Gitee或GitHub解决了，也有使用其他方式解决的，我选择的是国内的阿里OSS。

既然如此，你得先注册一个阿里云账号，具体步骤就不说，这个很简单。

然后你可以查看这篇教程： 阿里云OSS PicGo 配置图床教程 超详细

上文给出的链接是配置阿里云OSS，然后将其与PicGo结合，这个就看个人使用习惯了，可以使用PicGo也可以不使用，我们重点是配置阿里云OSS的方法。

对了，还有一点，配置阿里云OSS不用购买什么流量包、储存包（这个我记得是不用购买的，我也忘记了，相信你肯定懂得随机应变😘），直接用就完事了，记得往里面充值几块钱，阿里云OSS默认是按量收费的，我们博客访问量较低，使用默认的就行。

---

当然，如果你想白嫖，可以使用 GitHub 或 Gitee 来搭建一个免费的图床，具体做法可以参考羊哥的这篇文章：

使用GitHub作为个人博客免费图床

使用emoji表情

这下图片的事情解决了，你会发现我在博客中使用了一些emoji表情，很有意思，这些表情可以直接在Typora中使用，但是部署到博客上就成了:kissing_heart:这样一段字符串，解决办法很简单，装一个插件就可以了。

具体做法参考这篇文章： Hexo中使用emoji表情

emoji表情的代码也可以参考我写过的 Typora和Markdown使用方法的文章。

主题配置

接下来就是美化我们的博客了，选取一个自己喜欢的主题，然后用它就完事了！

本站使用的是hexo-theme-butterfly主题进行美化，如果你不喜欢这个主题，可以去GitHub上搜索 hexo theme ，也可以找到许多好看的主题。

基本上主题都有对应的使用文档，一些主题的配置就不在此多说了，可以参看下面这些链接：

butterfly文档： hexo-theme-butterfly 安装文档(一)快速开始

butterfly主题魔改： Hexo博客之butterfly主题优雅魔改系列

下载了主题使用后，你会发现菜单栏的选项很少，只有什么归档之类的，甚至分类、标签都没有，你需要自己添加这些选项，做法在主题文档中也给出了，再给你一个参考链接： 短短1天我学会了如何修改Butterfly的配置文件

主题的配置文档一定要认真读 ，内容很多，不同人的表述方式不同，认真读就知道作者说的什么意思了。

主题配置补充

虽然主题文档写的很详细了，但我还是有些地方需要说明，以免部分小伙伴看不懂主题文档，我们在此以butterfly主题的文档为参考，其他主题的文档应该也差不多。

在主题文档中，会涉及到这几个页面：

这里出现了两种页面Page页和Post页，那它们指的是什么意思呢？（Front-matter指的是啥可以看主题文档的说明）

Page页指的就是我们的博客文章详情页 ，比如下图是博客文章在首页的样子，类似一张卡片，点一下可以查看文章的详细内容，跳转到的页面就是Page页（文章详情页）。

文章首页卡片：

Page页（文章详情页）：

那Post页又是什么呢？

Post页就是我们点击菜单栏选项后跳转的页面。 Post页都是使用命令hexo new page xxxx创建的页面，首页是主题本来就有的，因此不属于Post页。

菜单栏选项（首页不属于Post页）：

我们选中其中其中一个点击进去，就可以进入Post页，比如点击 “ 标签 ” ：

进入了标签页，也叫Post页。

相信你明白了Page页和Post页的区别，你就可以对不同的页面进行不同的配置了。

---

我还要说明一下配置文件的区别 ：

我们下载Hexo后，进入博客文件夹，会有这样一个名为_config.yml文件，目录结构：

这里的这个_config.yml文件是主配置文件，我们添加了一些插件之类的就要在里面添加一些配置。

在主题文件中，可能也有一个名为_config.yml的文件，目录：themes/主题名/_config.yml。

我们管这个_config.yml文件叫主题配置文件，每一个主题都有一个主题配置文件，不同的主题中主题配置文件的内容不一样。我们需要对主题进行一些设置时，一般都是在主题配置文件中进行修改。

还有很重要的一点： 这些配置文件都是YML文件，我们要注意.yml文件的正确书写方式，每个英文冒号后都要加一个空格，同级配置前的缩进保持一致。（如果你学过SpringBoot应该就懂我的意思了）

---

如果你阅读完上述内容，并成功实现了，一个博客基本就搭建完成了！ 🎉

下文是我在搭建博客时遇到的一些问题和一些魔改，感兴趣可以阅读一下！😎

1. 问题

1.1 hexo-abbrlink插件

由来

Hexo框架中文章链接默认的生成规则是：:year/:month/:day/:title，即：按照年、月、日、标题来生成的。如果标题中没有中文还好，如果有中文，URL链接也会是中文，但是复制后的链接会变成URL 编码形式表示的ASCII 字符（十六进制格式）。很长一串，十分不好看，这时候可以选用安装hexo-abbrlink插件来解决。

具体的安装方式参考：Hexo+Github 博客butterfly 和 matery 主题 搭建完全教程

问题描述

安装好插件后，给文章的font部分添加自定义abbrlink即可实现自定义文章链接。

但是我在第一次自定义abbrlink时，没有将自定义的地址书写规范。有一天发现后，便前往文章修改，修改之后使用hexo -g命令可以看到修改后的文件，但是推送到Gitee依旧是没有修改的，这就导致了在博客点击修改完的文章直接显示 404 错误。

---

问题示例：

修改前： abbrlink:Basic-CSS3-knowledge

修改为：abbrlink:Basic-CSS3-Knowledge

然后一波操作：hexo clean、hexo g、hexo d，但在Gitee的仓库可以看到，文件的名字依旧没有改变，仍然是： abbrlink:Basic-CSS3-knowledge。然后前往博客网址，点击修改了地址的文章，发现出现 404 错误，地址栏是：https://xxxxxxx/Basic-CSS3-knowledge。😠

同时，在执行hexo d时，出现错误：😡

The file will have its original line endings in your working directory.

解决方法

• 前往博客的文件夹，删除文件夹.deploy_git
• 运行命令：git config --global core.autocrlf false
• 然后继续一波操作：hexo clean、hexo g、hexo d
• 前往Gitee仓库查看，名字已经更改。

这种方式属于强制推送，会让你仓库的提交次数清零。

---

除了以上这种方式，还可以直接前往博客的文件夹，找到.deploy_git文件夹，在其中找到文章标题对应的文件夹，将文件夹名修改。

1.2 无法显示社交图标

问题描述

根据Butterfly的文档，可以在侧边栏添加社交图标，但是我的浏览器无法显示这些图标。同时，在文章页末尾可以设置分享按钮以分享文章，但我的浏览器也无法显示。最奇怪的是，使用手机是可以看到这些内容的。

我曾一度认为是主题的Bug，一直等待修复，直到一次升级主题，使用其他浏览器访问了博客，奇怪的事情发生了：社交图标和分享按钮可以正常显示。

那么很显然就是浏览器的问题了。

问题原因

我最开始使用的是Chrome（谷歌浏览器），无法正常显示，然后使用QQ浏览器可以正常访问。难道是Chrome的问题？

可以说是，可以说不是。

经过短暂的排查，我在Chrome上安装了广告拦截插件AdGuard，就是因为这个插件对上面的内容进行了拦截才无法正常显示。

解决方法

• 不使用插件AdGuard
• 更换广告拦截插件为AdBlock
• 自定义插件AdGuard拦截规则

错误关联

因为插件AdGuard的拦截效果，也导致文章搜索功能迟迟无法成功添加。

本地搜索插件一直被拦截，我曾一度以为是搜索插件或主题的问题。

1.3 本地运行错误

当我们下载好 hexo，执行 hexo init 并换上喜欢的主题后，执行：

hexo clean
hexo g
hexo s

在浏览器地址栏输入 localhost:4000 进行本地访问时，浏览器页面上出现以下字样，且没有跳转至博客界面：

extends includes/layout.pug block content include ./includes/mixins/post -ui.pug #recent posts.recent posts +postUI include includes/pagination.pug

只需要在博客目录下打开 git bash，然后下载以下插件：

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

最后再次执行：

hexo clean
hexo g
hexo s

再次访问 localhost:4000 即可成功本地运行！

1.4 Node.js 版本过高？

当我们刚进行完 hexo init 后，会运行 hexo v 命令，查看一下 Hexo 的版本，结果出现以下问题：

Warning: Accessing non-existent property 'column' of module exports inside circular dependency
Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

或者当我们执行 hexo g 时，出现以下问题：

Warning: Accessing non-existent property 'column' of module exports inside circular dependency
Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

出现以上两种问题很有可能是 Node.js 版本过高的原因，建议换成低版本的 Node.js。

比如：我出现上述错误时，Node.js 的版本是 14.15，最后我将其卸载重新安装了12.18 版本的 Node.js 就解决了问题。

总的来说，不建议使用版本过于高的软件，指不定会出现什么错误，而且很有可能还找不到资料。

1.5 重建博客时运行错误

情况一：未按要求创建文件夹

在选定目录下执行完 hexo init 命令后，会生成博客的基本骨架，这个时候的 source 目录下有且仅有一个名为 _posts 的目录。如果曾经搭建过 Hexo 博客，很有可能会直接将旧博客目录下的 source 文件夹直接复制到新的博客目录下，但这很有可能会出现问题。

建议 在博客目录下执行 hexo new page tags 类似的命令生成对应的文件夹。前面的命令就是生成名为 tags 的文件夹，用于存放博客文章的分类，如果想要生成其他文件夹，只需要更改 tags 即可。

当然，如果曾经搭建过博客，执行命令生成完对应的目录后，可以将旧文件夹中的 index.md 等文件直接拷贝到对应的文件夹中。

如果没有搭建过博客，且使用了 butterfly 主题，可以参考：Butterfly 安裝文檔(二) 主題頁面

情况二：插件缺失

如果备份了旧博客目录资源，且由于某种原因需要重新搭建一个 Hexo 博客，并直接将旧博客的配置文件（全局配置文件、主题配置文件）直接复制到新的博客目录下时，运行 hexo g 后很有可能因为 缺失某些插件 而导致出现某些错误。

如果出现错误，建议检查插件是否缺失。

在此列举一下本站所使用的插件：

1、butterfly 主题必备渲染插件： pug 以及 stylus 的渲染器，安装命令：

npm install hexo-renderer-pug hexo-renderer-stylus --save

2、文章字数统计插件，安装命令：

npm install hexo-wordcount --save

3、本地搜索插件，安装命令：

npm install hexo-generator-search --save

4、Markdown 渲染器与 emoji 表情显示插件，安装命令：

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

5、地址栏美化，文章永久链接插件，安装命令：

npm install hexo-abbrlink --save

6、RSS 订阅插件，安装命令：

npm install hexo-generator-feed --save

7、Git 部署插件，安装命令：

npm install --save hexo-deployer-git

2. 一些魔改

2.1 移除文章页侧边栏滚动条

本次修改基于Butterfly主题！

前往blog – themes – Butterfly – layout – includes – sidebar.png进行修改，在下图所示的位置添加：(style="overflow: hidden;")即可。

2.2 查看网页RSS

本次修改基于Butterfly主题 3.0.0 ！

实现：增加社交图标RSS，点击可查看网页RSS。

操作步骤

• 下载插件hexo-generator-feed

npm install hexo-generator-feed --save

• 在hexo的主配置文件_config.yml中任意位置添加以下代码：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

• 修改butterfly主题配置文件_config.yml ，添加RSS的图标：

social:
  fa fa-rss: /atom.xml || RSS链接

参考链接：hexo-generator-feed

2.3 分割线图标更换

本次修改基于Butterfly主题 3.0.0 ！

将图标更换为“太空飞船”。

操作步骤

修改butterfly主题配置文件_config.yml ：

hr_icon:
  enable: true
  icon: '\f197' # the unicode value of Font Awesome icon
  icon-top: -10px

icon-top常用数值：

-20px：图标位于分割线上方

-10px：图标位于分割线中间

0px：图标位于分割线下方

效果图：

2.4 实现 CheckBox

前言

Hexo 默认的 Markdown 渲染引擎名为：hexo-renderer-marked，但这个引擎无法实现 emoji 表情，因此我将它换了，使用了另外一种渲染引擎。这个引擎名为：hexo-renderer-markdown-it，据说它比默认的引擎渲染速度更快，它也支持很多插件，可以实现 emoji 表情的使用。

某日，我想利用Markdown实现 CheckBox，列出自己的计划，但是 markdown-it 引擎默认是不支持 CheckBox，需要使用第三方插件。

实现

在 GitHub 上选了三种插件，最终选择了 markdown-it-checkbox 插件，另外的两个插件是 markdown-it-task-lists 和 markdown-it-task-checkbox，但这两个插件的使用效果都不太好。

Markdown 语法必须是 - [ ] 才会渲染成功，但是这样前面又会多出 <ul> 无序列表的黑点，不符合我的审美（或许是我使用方式出了问题）。

因此最终我选择了 markdown-it-checkbox 插件来渲染出 CheckBox，但这个插件也有问题，需要进行个人美化。

在博客根目录下安装插件：

npm install markdown-it-checkbox --save

在博客主题文件夹下 \source\css 创建一个 CSS 文件，将下面的代码复制到文件中，最终在主题配置文件引用这个 CSS 文件（这里是以 Butterfly 主题为例，其他主题目录或许存在差异）。

input[type="checkbox"] {
  display: none !important;
}
input[type="checkbox"] + label::before {
  content: '\a0';
  display: inline-block;
  margin-right: 0.2em;
  border: 1px solid;
  border-radius: 0.2em;
  width: 0.8em;
  height: 0.8em;
  vertical-align: 0.1em;
  text-indent: 0.1em;
  line-height: 0.7;
  cursor: not-allowed;
}
input[type="checkbox"]:checked + label::before {
  content: '\2714';
}

到此，美化就完毕了。这个时候的 CheckBox 并不是只读的，如果想要设置成只读，可以在博客主题文件夹下 \source\js 创建一个 JS 文件，将下面的代码复制到文件中，最终在主题配置文件引用这个 JS 文件（这里是以 Butterfly 主题为例，其他主题目录或许存在差异）。

/*设置 checkbox 为只读*/
$(function() {
    $("input[type='checkbox']").click(function() {
        this.checked = !this.checked;
    });
});

最终效果可以在本站的【计划】一栏中看到效果。

从 Butterfly 3.4.0 开始，移除了 JQuery，因此我们需要采用原生 JS 的方式实现上述 JQuery 代码：

window.onload = function(){
    var inputs =  document.getElementsByTagName("input");
    for(var i = 0;i < inputs.length; i++){
        if(inputs[i].type == "checkbox"){
            inputs[i].onclick = function() {
                this.checked = !this.checked;
            }
        }
    }
}

语法

这种插件的 CheckBox 语法和 Typora 语法不一样。

Typora 语法是：-空格[空格] 实现。

该插件语法是：[空格] 实现，就是没有前面的 -。

要实现选择的话，[x] 就可以了。

2.5 添加图片边框

本节内容基于 Hexo 主题 Butterfly 5.2.1，不同的主题、不同的版本使用的 CSS 选择器可能不同，请根据自己的情况进行修改。

在博客主题文件夹下 \source\css 创建一个 CSS 文件，将下面的代码复制到文件中，最终在主题配置文件引用这个 CSS 文件（这里是以 Butterfly 主题为例，其他主题目录或许存在差异）。

/* 文章图片增加边框*/
#post img[class^=entered][class$=loaded]{
    display: block;
    border: 5px solid #ddd;
    padding: 5px;
    background: #fff;
}