hexo实战：（二）个人独立博客豪华装修合集|rss|xml|博客|插件|根目录|装修合集

前言

上次介绍了使用 Hexo+GitHub Pages，零成本搭建一个专属自己的独立博客网站。我觉得那篇文章是没有入门门槛的，不管你是什么行业，只要想打造个人 IP，又不太想受博客平台约束，那么读完后动手操作一下也能轻松完成。而这次呢，上篇也说了 Hexo 会出三篇内容，这里就要在前者基础上做进一步升级，将完成下面七个主要的博客常用功能。

指标

Hexo 如何安装 Butterfly 主题并配置？
Hexo 如何创建页面和添加文章？
Hexo 如何添加第三方评论系统？
Butterfly 主题如何添加站内搜索？
Butterfly 主题如何添加百度统计？
Butterfly 主题如何添加文章置顶功能？
Butterfly 主题如何配置 RSS 和 404 页面？
如何配合 Typora 完成 md 的同步与本地备份？

主题添加与配置

Hexo 官网专门有一个栏目的主题列表，这里我选的 “butterfly”，首先拉取主题代码到 themes 目录下，然后在 Hexo 的配置中启动主题。

拉取主题包

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

启动主题

theme: butterfly

基础配置

基础配置主要是设置网站的标题、描述、SEO、菜单等项，下面我就列出 hexo 的 config（根目录下_config.yml），和主题 Butterfly 的 config（themes 的 Butterfly 下_config.yml），并注释相关项的简介仅供参考。

hexo_config.yml

来百度APP畅享高清图片

hexo_butterfly_config.yml

创建菜单页面

页面包括标签页（tags）、分类页（categories）、友链页（link）、关于页（about），当然也可以自行添加，比如音乐电影之类。不过添加这种页面方式都大同小异，以下以标签页举例。

运行命令

hexo new page tags

编辑 MD

运行命令后，会在 source 下根据 butterfly 模板生成对应的 md 文件，tags 就是 tags，不过要将 md 文件的 type 修改为对应的类型，类型见上。

title: 标签页date: 2024-05-02 21:01:24type: "tags"

Page（页面）front-matter

创建文章

写文章，可以通过命令创建，也可以在 source/_posts 目录下，自行新建 markedown 文件，因为命令也是在_posts 文件夹下新建。

运行命令

hexo new "文章的大标题"

Post（文章）front-matter

站内搜索添加

站内搜索，我是采用的 hexo-generator-search 插件解决方案，安装完插件，然后配置一下，最后用 hexo 清理再生成一下全站静态，同时在根目录也会生成一个 search.xml，用于做字符串模糊匹配的。

插件安装

npm install hexo-generator-search --save

添加或配置

清理与生成

hexo clean && hexo g

评论系统添加

第三方评论系统我这里使用的是 Gitalk ，Gitalk 是一个基于 GitHub Issue 和 Preact 开发的。使用 GitHub 登陆，能支持多国语言，至于他的原理，其他博主有介绍。这里就不展开了，如果有时间以后可能会整体介绍一下常用的第三方评论系统，因为我还是希望评论能支持多种方式登陆的，目前没有找到合适的就先选择 Gitalk。

注册应用账号

获取参数

注册成功后拿到 “Client ID” 和 “Client secrets”（点击生成再复制），其中注意的是 Homepage URL 要设置为用户名.github.io 精确到 https 的地址。Authorization callback URL 填写注册的域名，如果绑定了个性化域名就填自己的域名，也是要精确到 https 的位置。

修改 Butterfly 配置

打开 butterfly 主题的配置文件，第一个找到 “gitalk” 项，将上面复制的 client id 和 client secrets 粘贴。

第二个找到 “comments”，将 use 配置为 "gitalk"，当然也可以用 valine、Disqus 之类的第三方评论系统。

博客仓库设置

进入仓库，点击 “Settings”，找到 “Features”，将 “Issues” 勾选。

文章置顶功能添加

打开 hexo 配置文件 _config.yml，如果前面有 per_page 的关闭，使用的是 hexo-generator-index 插件排序，可以自定义序号和日期排序。

如何要置顶文章，只需在文章 md 的 front-matter 里添加一个 top 参数，数值自定。文章列表会出现一个钉子图标，要看到效果则要 hexo 先清理再生成。

添加配置

md 文章设置

清理与生成

hexo clean && hexo g

RSS 配置

对于 RSS 输出功能，需要安装 hexo-generator-feed 插件。最后使用 hexo 清理再生成，博客根目录就会生成 atom.xml

插件安装

npm install hexo-generator-feed --save

添加配置

feed: type: atom path: atom.xml limit: 20

设置 RSS 地址

rss: /atom.xml

设置 404 页面

在 hexo 的_config.yml 找到或添加 error_404，设置开启，分别添加标题和背景图。

添加百度统计

先登陆或注册百度统计平台，找到 “使用设置” -> “代码获取” -> “新版统计代码获取”，然后会看到一段 js 代码，只需要复制如下的一个 32 位长度的字符串。最后将该字符串粘贴到 butterfly 的 config.yml 中的 baidu_analytics 中，部署后一天就可以在后台查看统计报表了。