使用Hexo搭建个人博客-保姆级教程

使用Hexo搭建个人博客-保姆级教材

首先我们看一下最终效果，按照以下步骤最后就可以完成和我一样的博客 https://chen-mingxuan.gitee.io/blog-test/

PS：CSDN不知道为什么不能用外链图片。，所以建议大家按我博客上的做，有问题写在评论里，或者联系我

一、准备环境

1.安装Typora

大家都有就不介绍了

2.安装nodejs

在这个网站中进行下载安装http://nodejs.cn/download/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cpr4B1v-1630037801346)(http://www.cmxblog.cn:8848/download/1429615025944920066)]

安装过程就不做介绍了，全是下一步，最终安装成功，如果觉得有问题可以在百度搜索安装教程

3.安装git

在这个网站进行安装 https://git-scm.com/download/win

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEG8RWAT-1630037801348)(http://www.cmxblog.cn:8848/download/1429615953410392066)]

和安装nodejs一样没有什么改变，应该好多人以前就装了

4.在码云注册

在这里注册 https://gitee.com/ 不用github是因为外网访问慢

在这里提醒以下注册完成后最好进行实名认证，后面会用到因为需要审核所以还是提前弄了

5.安装Hexo

在电脑上先建好一个文件夹用来存我们的保存安装的文件

我自己选择在这里存放

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Ek69DUu-1630037801349)(http://www.cmxblog.cn:8848/download/1429618104207540225)]

进入这个文件夹，我们打开cmd命令窗口

输入

npm install hexo-cli -g

• 出现下图表示安装成功：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RV5Ot2Ba-1630037801351)(http://www.cmxblog.cn:8848/download/1429620119868407810)]

然后我们接着进入刚才创建的空文件夹

鼠标右击出现Git Bush Here然后点击，输入

hexo init

成功后会显示这样

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nWxVAcUo-1630037801351)(http://www.cmxblog.cn:8848/download/1429620092550905857)]

文件夹中也有了内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnlhQXEZ-1630037801353)(http://www.cmxblog.cn:8848/download/1429620338655887362)]

然后接着在输入

生成静态页面

hexo g

启动服务

hexo s

启动完成访问 http://localhost:4000/出现以下界面说明成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwEMGRZt-1630037801353)(http://www.cmxblog.cn:8848/download/1429621042879528961)]

二、美化博客主题

1.克隆主题

我选择使用的是next主题，想用别的主题在百度自行查找

进入主题文件夹

cd themes

克隆主题

git clone https://github.com/theme-next/hexo-theme-next.git

完成后会出现这个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NKbMcIXv-1630037801353)(http://www.cmxblog.cn:8848/download/1429630920465448962)]

2.切换主题

我们现在切换成我们刚才下载的主题

进入根目录（后面说的根目录都指的是这里，一定要和主题文件夹themes区分）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iNgavCmN-1630037801354)(http://www.cmxblog.cn:8848/download/1429631825449451521)]

进入修改，在这里替换成 hexo-theme-next

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFIAhqtu-1630037801354)(http://www.cmxblog.cn:8848/download/1429632285824647169)]

进行测试

生成静态页面

hexo g

启动服务

hexo s

启动完成访问 http://localhost:4000/出现以下界面说明成功

在后续我们会频繁使用 hexo clean 、hexo g 和 hexo s，这些命令作用后面不在介绍，后续讲到重启hexo都是在根目录进行hexo g和hexo s

PS：启动后使用ctrl+c结束运行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ms3nozYD-1630037801354)(http://www.cmxblog.cn:8848/download/1429633951890276354)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n5RUWhWv-1630037801355)(http://www.cmxblog.cn:8848/download/1429632968762195969)]

3.添加文章

在下面的路径中直接创建md文件（根目录中的source下的_posts文件夹）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DenhBVvH-1630037801357)(http://www.cmxblog.cn:8848/download/1429634889942171649)]

在文件头加入 front-matter 部分（在Typora顶部的编辑下有YAML-Front-Matter），title 表示文章标题，date 表示发布时间。如图所示，图片上用到的其他参数，后面会介绍到。
重要的事情说三遍！！！
front-matte 书写的时候要注意，冒号后面要跟一个空格号。

front-matte 书写的时候要注意，冒号后面要跟一个空格号。

front-matte 书写的时候要注意，冒号后面要跟一个空格号。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CqVLJDkf-1630037801360)(http://www.cmxblog.cn:8848/download/1429637516344033281)]

在准备好md文件后我们进行重启

生成静态页面

hexo g

启动服务

hexo s

启动完成访问 http://localhost:4000/出现以下界面说明成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KLFP7DqP-1630037801360)(http://www.cmxblog.cn:8848/download/1429638473622618113)]

4.设置主题样式

打开主题文件夹下的 _config.yml 配置文件（注意：这里要区别，不是項目根目录，主题文件夹的路径为：新建空白文件夹名称/themes/主题文件夹名称）。通过查找功能找到 Schemes 模块，修改为 Gemini 风格。如果喜欢其他风格可以自己修改。如下图所示

在 scheme: Muse 前加#

删除 scheme: Gemini 前的#

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gtuC7FJb-1630037801361)(http://www.cmxblog.cn:8848/download/1429639792190160898)]

重启访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IG4rax3p-1630037801362)(http://www.cmxblog.cn:8848/download/1429640654228684802)]

出现下图说明成功

三、美化个人栏

1.修改作者、名称

在上面的网站界面，可以发现网站的文字是英文，只要修改一下语言模式即可。打开根目录文件夹下的 _config.yml 配置文件。找到 language，设置为 zh-CN。标题等其他参数的设置如下。可以对照效果图的具体位置，根据自己的实际需求进行修改。（注意：修改了项目根目录下的 _config.yml配置文件，需要重启部署项目后才能生效）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wqhrjHJU-1630037801363)(http://www.cmxblog.cn:8848/download/1429642242552889346)]

保存后重启

出现下图说明成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZC7Ev5g-1630037801364)(http://www.cmxblog.cn:8848/download/1429642702621900802)]

2.添加分类

​ 在项目根目录下，执行下面的命令行，新建分类页面，然后会在项目根目录下的 source 文件夹中新建一个 categories 文件夹。

hexo new page categories

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T7QmGoCw-1630037801364)(http://www.cmxblog.cn:8848/download/1429643569072832513)]

打开 categories 文件夹中的 index.md 文件，添加 type 字段，设置为 “categories”。如下图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkkOo1d4-1630037801365)(http://www.cmxblog.cn:8848/download/1429643853547307009)]

接着到主题文件夹下的 _config.yml 配置文件下，找到 menu 模块，把 categories 的注释给去掉。如下图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5ObNyHv-1630037801365)(http://www.cmxblog.cn:8848/download/1429645436318253058)]

如何将文章添加到对应分类？

• 文章发布前，在 front-matter 部分，多写一个 categories 字段，然后参数写上类别的名称，保存后重启服务，在网页上点击“分类”，可以看到分类下已经生成了刚刚设置的类别，并把刚刚发布的文章归类在此类别下。如下图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OrOfvC6v-1630037801366)(http://www.cmxblog.cn:8848/download/1429646751429689345)]

然后启动查看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wa7f