Hexo搭建个人博客

本文介绍如何使用Hexo搭建一个个人博客。

一、安装Node.js

关于安装node.js这部分，我参考的是这篇文章。

首先到node.js中文官网下载安装包。

运行安装包，修改安装路径，不勾选 necessary tools，一路next安装完毕。默认的设置是有安装npm的，这个很重要，相当于应用商店，第三方的包都通过它下载，必装。

顺便吐槽一句这个npm明明用了淘宝镜像还是一样下载不动，然后过一会就又好了，玄学网络。而且下载完一个包也无法继续输入命令，只能关掉cmd重新打开，隔壁python的pip都没有这种问题。

win+r输入cmd打开命令提示符，输入

node -v

或

node --version

查看node版本，如果提示“不是内部或外部命令”说明没安装成功。

npm也是一样，输入

npm -v

查看npm版本。

二、安装Hexo

成功安装node.js和npm后，继续在cmd中输入以下命令

npm install -g hexo-cli

安装Hexo。

合理外推卸载命令就是

npm uninstall -g hexo-cli

注意到有个-g，意思是全局安装，不加-g就是在当前文件夹局部安装，出了当前文件夹就相当于没安装，类比python的虚拟环境。

同时还有 hexo 和 hexo-cli 的区别，之前也疑惑过 vue 和 vue-cli，这个我暂时还不太明白。总之有-cli和没有是两个不同的东西。按我理解，用hexo就是把hexo整个框架都下载下来，而用hexo-cli就是只下载hexo的一些命令，用创建hexo项目的时候用命令远程拉取模板。不知道我理解的对不对。

三、创建Hexo项目

cmd输入

hexo init personal-hexo

新建hexo项目。其中personal-hexo是创建的hexo项目的名称

进入hexo项目的文件夹，一手

npm install

安装依赖包。

再一手

hexo server

或

hexo s

启动hexo服务器。这时会告诉你hexo正在本地运行，打开它给的地址 http://localhost:4000/ ，就可以看到hexo的默认页面了。

四、Hexo使用指南

IDE打开hexo项目，先看项目结构。根目录下，scaffolds文件夹里存放模板文件。scaffolds/post.md 文件就是文章的模板文件，比如往里面加一条categories，新建的博文就会带上这个字段。

scaffolds/_config.yml 文件是整个博客网站的配置文件。title就是HTML中的title，subtitle和description想填什么就填什么，author改成自己，language改成zh-CN，url改成 http://你的Github昵称.github.io ，其他暂时都不用改。

scaffolds/source 文件夹下的是网站的主体，其中的文件夹可以通过url访问到，以下划线开头的文件夹除外。

scaffolds/source/_posts 中存放的即我们的博客。在终端中执行命令

hexo new Hexo搭建个人博客

其中”Hexo搭建个人博客”是文章名。

发现 scaffolds/source/_posts 中多了刚才新建的文章，打开浏览器也可以看到博文创建成功了。现在可以用markdown尽情编辑博文了！

五、更换主题

我使用的是 hexo-theme-pure 主题，Github地址在这，Gitee地址在这。建议看Gitee上的，文档是中文。

第三方的主题都放在themes文件夹下。项目根目录下终端执行

git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

themes/pure/_config.yml 是主题的配置文件。按需配置，我的配置如下：

menu

决定菜单中有哪些栏目。由于我没有豆瓣号，就把豆瓣书单那一栏注释掉了，这样就没有豆瓣书单这个页面。

site

决定博客网站的基本配置。

根据logo中的url找到对应的图片，即博客的头像，改成自己的图片。

title就是HTML中的title

favicon即浏览器标签上的图标，找到 themes/pure/source/favicon.png，改成自己的图片。

board是公告，可以是HTML中的元素

config

skin可以更改主题颜色，除默认的白色外还有 theme-black theme-blue theme-green theme-purple 四种。

donate

文章底部请作者喝咖啡的赞赏部分。我不喜欢，enable改成false就不显示了。要保留的话按对应路径找到图片替换成自己的。

share

文章底部的分享部分。sites是电脑网页显示的，mobile_sites是手机网页端显示的，可以加的值有 qq,wechat,qzone,weibo,facebook,twitter

repository

platform有github和gitee两种，username填你对应托管平台的用户名。

pv

用于统计你的网站有多少访客。提供了不蒜子和leancloud两种方式，我用的是不蒜子，把busuanzi下的enable设为true。

postCount

统计你每一篇文章的字数和阅读时间。要开启哪一个功能就把对应的值设为true，enable为true则这两个功能都失效。

profile

一些个人资料。按前面的方法自行配置就好了。

复制_source

把 themes/pure/_source里的所有文件夹（除去你前面menu那里注释掉的界面，比如我不需要豆瓣书单，books文件夹就不需要复制）复制到根目录下的source文件里。_data和404也复制过去。_data里的links.yml文件中是友情链接，每个友情链接按如下格式：

MyFriendName:
    link: https://his_link/         // 改成朋友的链接
    avatar: https://his_avatar.png  // 改成朋友的头像url
    desc: "His discription"         // 给朋友的描述

_data里的gallery.yml文件是干什么的我暂时还没搞懂。

现在重新访问浏览器，发现你的博客网站已经大变样了，一切操作正确的话不会出现任何问题。

六、将Hexo部署到 Github Pages

使用 hexo-deployer-git。参考这篇文章。

先在自己的github上新建一个仓库，仓库名为 你的Github昵称.github.io ，如 PrinceSaoKe.github.io。

在终端输入

npm install hexo-deployer-git --save

安装 hexo-deployer-git。

打开根目录下的_config.yml文件，滑到最底下找到deploy，改成

deploy:
    type: git
    repo: https://github.com/你的github昵称/你的github昵称.github.io
    branch: master  // 注意看你仓库的主分支是master还是main，一般是master

最后，依次在终端输入以下命令：

hexo cl     // 清理之前的页面
hexo g      // 生成新的页面
hexo d      // 部署网站到创建的仓库

hexo d这一步需要vpn。

刚部署完可能要过一两分钟，然后在任意一个设备的浏览器输入网址 http://你的Github昵称.github.io 就可以访问到你的hexo博客啦！

---

写博客好累，后面应该不会写得这么详细了。我的hexo个人博客也上传到了github，欢迎参观