我的个人博客地址：https://qiacuhome.cn/，我将这篇文章在首页置顶了
有想要互换友链的小伙伴可以去留言板留言嗷！

1 前言

1.1 介绍

本文详细介绍了Hexo的从零开始搭建方法、主题配置、额外功能以及自己发现的一些小技巧等，未来也将在我的个人博客不定时更新，但可能不会花时间在CSDN进行更新。本文旨在记录自己的探索过程，同时也希望能够帮到后来接触到Hexo的小伙伴少走一些弯路。

1.2 碎碎念

前段时间重装了一下电脑，只备份了写过的博客，没有备份原来的配置，就是打算要更换一下主题。听说NextT主题非常火，可我看了下界面，并不是我的菜。经过一番挑选，就在要放弃更换主题、还是用原来的主题时，发现了Matery，各方面都完全符合我的审美（除了一些配色），于是迫不及待开始重新搭建我的Hexo博客——恰醋的小屋。

这篇博客也是我在本次配置过程中记录的，比之前写过的要详细一些，图片也很多，对于初学者来说应该很容易弄明白。

不少想要搭建博客的小伙伴可能也都和我一样，没有前端基础（到目前为止，我只学过C/C++和Python，C/C++也好久没写过代码了），所以大家都是跟着文档摸索着前进的，一篇篇文档、博客可能如同指引灯一般，引导着我们一步步满足自己的好奇心。

希望我的这篇博客也能发出微弱的烛光吧~

2 准备工作

2.1 安装配置node

前往Node.js官网下载nodejs安装包，不推荐下载最新版，因为我这里遇到了错误（但我并不确定是不是版本问题），换成了12.15.0版本的成功了。可以点击下面的阿里云镜像，去阿里云下载12.15.0版本，可以保证成功。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvImDDGt-1613479970867)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(1)].png)

下载完成后开始安装，整个安装过程默认即可。为了避免之后出现不可预知的麻烦，我在这里选择自动安装需要的工具。如果你也这样选择，那么在nodejs安装完成后，会自动弹出cmd，随便按几个键后会弹出PowerShell，Chocolatey就会自动开始安装。等待一段时间，安装完成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gLdFNobo-1613479743034)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(2)]].png)

在cmd中输入npm -v和node -v以检测安装是否成功。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3iU0rEQG-1613472172174)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(3)].png)

之后的博客部署过程中，我们将多次使用npm安装需要的模块，如果你在国内，那么使用默认源可能会比较慢，因此需要修改下载源。我本来打算使用中科大源，但是在几天前由于一些原因，中科大发布公告说无法再正常继续相关镜像的同步工作，只好作罢。现在网上我能找到的都是修改为淘宝源（https://registry.npm.taobao.org），于是也随波逐流了。

# 修改源
npm config set registry https://registry.npm.taobao.org
# 验证
npm config get registry

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUEG7vMi-1613472172177)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(4)].png)

2.2 安装配置Git

如果用过github等，或许对这个并不陌生，

前往git官网下载相应操作系统的最新版本的安装包，我下载的是windows系统下的exe安装包。下载完成后开始安装。这个安装过程每个人可能都不一样，我简单贴一下我更改过的两个选项，未贴出的均为默认。

选择Git文件默认的编辑器，我选择VS Code，这个其实无所谓的，因为它很少用到，默认Vim也可以。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WbNggljN-1613472172178)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(5)].png)

配置终端模拟器以与Git Bash一起使用。我这里完全可以使用Windows Terminal，而不使用Git Bash，因此修改了，如果你无法确定，那么就默认选择第一项。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXyIGzWo-1613472172180)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(6)].png)

安装完成后，可以输入git --version验证是否安装成功。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IklLA2sh-1613472172181)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(7)].png)

2.3 安装Hexo博客框架

在终端输入以下命令安装Hexo博客框架。

# 安装hexo框架
npm install hexo-cli -g
# 验证安装
hexo -v

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fefF8hbw-1613472172182)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(8)].png)

至此，我们的准备工作已经完成，安装了nodejs和git两个工具以及hexo博客框架。

3 搭建最基础的博客

3.1 初始化博客

首先，我们需要一个文件夹来保存自己的博客网站信息，新建一个空文件夹，然后在这里打开你想用的任何bash或shell（cmd, Git Bash, PowerShell, Windows Terminal等），输入hexo init进行初始化。初始化完成后，可以看到该文件夹下多出了许多文件。然后输入npm install自动安装一些需要的模块。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OkgRe4nT-1613472172182)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(9)].png)

3.2 访问自己的博客

在初始化完成后，我们就可以使用hexo s或hexo server命令来访问自己的博客了。可以看到，它提示我们Hexo正运行在http://localhost:4000，我们通过浏览器访问该网页，就可以看到初始化的博客了。我就不放图了，留给你们自己去看吧。另外就是，初始会有一篇名为《Hello World》的博客，在这篇博客中可以看到hexo常用的四个命令及其用法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dt1nPXvU-1613472172183)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(10)].png)

一定要记得，此时不要关闭终端，当你访问完成后，先按‘Ctrl+C’结束，然后再退出终端。如果你已经关闭了，那么也不要紧，如果后面遇到了问题，最简单直接的方法就是重启一下电脑。你也可以自行查找如果关闭4000端口。

3.3 使用不同的主题

hexo默认的主题为landscape，如果不喜欢该主题，可以自行下载其他的主题。每个主题的使用方法都不尽相同，具体的要看主题作者给出的文档，建议新手找那些文档详细且还在更新的主题使用。下载相应的主题后，记得去hexo文件夹下找到_config.yml文件，修改theme参数为你使用的主题名。

当然，在你对hexo知之甚少的情况下贸然修改主题是会要人命的（Hexo: 气死你气死你气死你，略~​），所以你也可以选择先跳过这一步。

我最开始使用的主题为Ayer，目前使用的主题为matery，这两个主题都给出了十分详细的使用文档。

3.4 将博客部署到github上

尽管Github比较慢，但我建议新手还是尝试一下（实际上，就我最近的使用感受而言，github速度95%时间以上都是挺快的），因为Github比国内的Gitee、Coding等平台的都要好，即使你现在为了访问速度使用Gitee或Coding，之后大概率也会转回Github。当然，若你并不打算购买域名，为了提高访问速度还是使用Gitee或Coding吧。

3.4.1 新建仓库（repository）

登录自己的Github账号，新建一个仓库,命名为**你的账户名.github.io **(固定格式)。例如：假如你的账户名为 zhangsan，那么respository name就必须为 zhangsan.github.io。另外要注意，是账户名而不是昵称！账户名是你申请的时候输入的名字，也是你访问自己Github主页是url最后一级的显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gy9ITWzc-1613472172184)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(11)].png)

3.4.2 使用Github Pages

新创建一个空项目后，点击Settings。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jyDsjjr9-1613472172185)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(12)].png)

然后拉到最下面，可以看到一个Github Pages，点击Choose a theme，随便选择一个主题（反正之后也不会用），然后一路默认直到创建完成，此时你会发现多了一个_config.yml文件，README也发生了变化。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CSGu74tO-1613472172185)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(13)].png)

3.4.3 配置SSH key

要使用git工具首先要配置一下SSH Key。

如果以前使用过git，那么在“C://User/UserName/.ssh/id_rsa.pub”文件中存储着SSH Key。如果没有，就需要先在本机配置一下github账户。

git config --global user.name "用户名"
git config --global user.email "邮箱地址"

然后输入ssh-keygen -t rsa -C "邮箱地址"生成密钥SSH Key，根据提示按三次回车（即全部默认），就可以在id_rsa.pub文件中查看到自己的SSH Key了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHrIxQKC-1613472172186)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(14)].png)

输入cat ~/.ssh/id_rsa.pub，讲输出复制到剪切板，然后进入github官网，在你的头像下面点击Settings，在左侧栏可以找关键词SSH。点击New SSH key新建一个SSH，名字随便，内容就是你刚才复制的内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2DNJwge-1613472172187)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(15)].png)

然后ssh -T gti@github.com验证是否成功。出现“Hi UserName”字样即为成功。这里我踩了坑，如果用户名和你的电脑名一样的话，SSH无法正常使用，必须要修改一下主机名。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8yUqLciu-1613472172187)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(16)].png)

3.4.3 将博客上传到Github

在hexo文件夹下打开终端，输入以下命令安装git部署插件。

npm install hexo-deployer-git --save

中间可能会出现一些Warning，不必理会，只要最后成功安装了就行。然后打开_config.yml，在结尾找到deploy修改为如下（注意，每个冒号后面都必须跟一个空格，否则会出错）：

deploy:
  type: git
  repo: 
    github: https://github.com/qiacu/qiacu.github.io
  branch: master

修改好后，就可以使用hexo g和hexo d命令来将我们写的博客部署到github上面了。建议每次重新部署时按照一下步骤：

hexo clean
hexo g
hexo d

输出如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vtf448tW-1613472172189)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(17)].png)

去Githu查看：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TSC4x4ue-1613472172190)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(18)].png)

部署成功，访问http://UserName.github,io即可查看网页。如果用的是Gitee，还需要手动更新一下才能正常访问（之后每次修改后也都需要手动更新）。

剩下的就是简单修改一些_config.yml里面的东西，具体可以参考官方文档，这里不再详述。顺便说一句，对于新手来说，最好的教程就是官方文档。

4 提升博客的逼格

4.1 绑定域名

是否绑定域名由你自己选择，不是必须的。

4.1.1 申请域名

可以申请域名的平台有很多，我这里选择的是腾讯云。进入腾讯云官网，搜索关键词域名，点击域名注册。输入自己想要申请的域名查询是否被注册（图中最下面那个cn的已经被我注册了）。选中自己想要注册的域名，加入购物车后购买即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hp0nlcxU-1613472172190)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(19)].png)

4.1.2 域名解析

购买成功后，进入域名管理控制台，此时在服务状态一栏你的显示可能是正在审核，一般几个小时后就可以正常了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qaYOVOu-1613472172191)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(20)].png)

点击解析，添加两条记录：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oiBaTDmt-1613472172192)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(21)].png)

4.1.3 域名绑定

打开Github的hexo项目，点击settings，拉到最下面的Custom domain处，填写上自己的域名，保存。（记得勾选HTTPS，否则后面打开你的网站会提示不安全）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HKc9p2of-1613472172192)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(22)].png)

成功后，在本地hexo根目录下进入source，创建一个名为CNAME的文件，使用记事本写入你的域名，保存即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPxkLvZW-1613472172193)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(23)].png)

4.1.4 配置SSL证书

进入SSL证书管理，点击提交资料。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vo0xtLk5-1613472172193)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(24)].png)

跟着提示，一步步走下去，有哪里不懂的地方直接点进附近的链接查看文档。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gW5ePB63-1613472172194)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(25)].png)

4.2 SEO优化

如果没有任何配置，那么自己写的博客可能很难被百度、谷歌等搜索引擎搜到，因此需要我们将网站提交给百度和谷歌。

首先我们需要安装两个hexo插件：

npm install hexo-generator-sitemap --save		
npm install hexo-generator-baidu-sitemap --save

打开hexo根目录配置文件，写入以下内容：

sitemap:
	path: sitemap.xml
baidusitemap:
	path: baidusitemap.xml

重启 hexo，本地访问 localhost:4000/sitemap.xml和 localhost:4000/baidusitemap.xml，就能正确的展示出两个sitemap 文件了。

4.2.1 提交百度

进入百度站点管理，添加自己的网站。验证方式我选择的是添加html标签。

然后手动提交baidusitemap.xml。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MMndkv0e-1613472172195)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(30)].png)

在“抓取诊断”中手动抓取，然后Robots->检测并更新。

4.2.2 提交谷歌

GoogleSearchConsole → 站点地图 → 输入sitemap.xml → 提交。

4.3 打造免费图床

图片存储是写博客的一个大问题，如果只是本地浏览markdown文档，那么图片存在本地即可，可是要发布到网上，那么就要使用图床了。可是很多正规的图床都需要付费，而且构建也比较麻烦，这就让我们很头疼。我最开始使用过聚合图床，但是免费版有限制，有时候也会出现问题，而且安全性也无法保证。所以一个好的图床对我们来说是十分重要的。

在这里，本醋将使用Github+jsDelivr+PicGo+Imagine来构造一个快速、免费的图床。

4.3.1 Github生成token

新建一个Github仓库，名字随意，权限设置为public。然后点击用户头像进入Settings->Developer settings->Personal access tokens->Generate new token（右上角那个，而不是文中的链接）。note中输入备注，什么都可以，然后勾选repo。之后拉到最下面，generate token。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T7zmPN97-1613472172195)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(35)].png)

然后，会生成Token密钥，这个页面只会出现一次，所以最好把这个密钥记下来，一会儿要用。

4.3.2 配置PicGo并用jsdelivr作为CDN加速

前往下载PicGo，安装过程没什么好说的。

安装好之后打开，开始配置图床：图床设置->GitHub图床。

• 设定仓库名：用户名/图床仓库名
• 设定分支名：master
• 设定Token：刚才的密钥
• 指定存储路径：填写想要储存的路径，如img/，这样就会在仓库下创建一个名为img的文件夹，图片都会存储在此处
• 设定自定义域名：https://cdn.jsdelivr.net/gh/用户名/图床仓库名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lQH6D4dU-1613472172196)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(36)].png)

4.3.3 使用Imagine进行图片压缩（可选）

有时候，我们截取的图片都是比较大的，或者一篇博客中包含的图片比较多，这样网页加载就会比较慢。这时候我们可以使用Imagine对图片进行有损压缩。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-syNsHmFq-1613472172196)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(37)].png)

4.3.4 上传图片到PicGo并使用图床

将Imagine压缩后的图片拖到PicGo的上传去，将会自动上传并复制访问链接，将链接粘贴到markdown文档中即可。

5 主题相关配置

该部分内容可能与你使用的主题有关，如果你使用的主题不支持，那么可能还需要你自己按照各个插件的官方文档一步步配置。以下内容均是以Matery主题为基础展开的。

4.1 Twikoo评论设置

我最初是想要使用Valine或者MiniValine来做评论系统的，但是不知道什么原因，在本地端口打开网页测试评论功能时一切正常，一旦部署到github pages后就失效了，无法正常访问leancloud。我不想太过麻烦，所以直接使用了twikoo评论系统。我使用的主题Matery也支持twikoo。

注意：Twikoo不兼容IE（但兼容Edge），介意的小伙伴勿选。

以下是我的配置过程，也可以参考官方文档。

4.1.1 手动部署

进入腾讯云CloudBase，下拉到新用户专享部分，选择免费的基础版1即可（有钱的话当我没说），然后按照提示一步步购买。

购买成功后，进入环境->登录授权，开启匿名登陆。然后点击“自定义登录”一行中的“私钥下载”，下载该文件，一会儿要用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e8AXPIt9-1613472172197)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(26)].png)

进入环境->安全配置，将网站域名加入到“WEB安全域名”。如“qiacuhome.cn”。

进入云函数界面，新建云函数，函数名称填写twikoo，创建方式选空白函数，运行环境选Nodejs 10.15，函数内存选128MB，然后进入下一步。之后会看到一个输入框，清空里面的内容，填写以下代码：

exports.main = require('twikoo-func').main

创建完成后，点击“twikoo”进入云函数详情页，进入“函数代码”标签，新建文件，文件名为package.json，填写以下代码，点击保存并安装依赖。

{ "dependencies": { "twikoo-func": "1.2.0" } }

4.1.2 管理面板配置

在环境->资源购买页面可以找到自己的环境ID，复制后填入Matery主题的_config.yml文件中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BAitf5vK-1613472172197)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(27)].png)

然后重新hexo g -d，部署github pages。完成后，进入自己的网站，随便找到一个有评论框的页面进入，在右下角有一个设置，点进入，输入刚才下载的私钥，就可以进入管理界面了。按照提示修改配置即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7n40TNkV-1613472172198)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(28)].png)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdUvlGDN-1613472172199)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(29)].png)

4.2 哔哔功能

Matery主题支持哔哔功能（类似说说，但是不能评论，artitalk可以评论，但是在matery中它不是单独页面，我懒得去改就没用）。

4.2.1 创建LeanCloud应用

必须使用LeanCloud国际版。国际版和国内版就速度而言没有什么差异。然后点击左上角的创建应用，名字随意。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9dAomggG-1613472172199)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(31)].png)

然后新建一个class，名字为content。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFe08Ao4-1613472172200)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(32)].png)

然后点击content这个class，添加列，名字为content，列类型为String，列注释随便写点什么就行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ZoxEbZE-1613472172200)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(33)].png)

4.2.2 创建哔哔页面

hexo new page bb

在pathtohexo/source/bb/下找到index.md，至少写入以下内容：

title: 恰醋说
layout: bb

4.2.3 关注公众号

微信搜索公众号黑石哔哔，关注后发送//leancloud:appid,masterkey,restapi即可绑定到leancloud，之后当你想要发什么说说时，只要发送给这个公众号即可。

其中，appid, masterkey获得方式如下图所示，restapi为https://appid前八位.api.lncldglobal.com。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hC4zgd5-1613472172201)(https://cdn.jsdelivr.net/gh/qiacu/blog-imgs/img/qiacuhexoblogbuild%20(34)].png)

最后别忘记修改主题配置文件。

标签：Hexo,img,手把手,jsdelivr,2021,https,qiacu,防盗链,图片
来源： https://blog.csdn.net/qq_42994651/article/details/113827138