使用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 书写的时候要注意，冒号后面要跟一个空格号。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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-wa7fX6ku-1630037801366)(http://www.cmxblog.cn:8848/download/1429646894967160834)]

3.添加标签

方法和添加分类一样

在根目录上执行下面命令

hexo new page tags

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

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

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

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

文章添加到对应标签和添加分类一样，就不在赘述了。

但是需要补充一点， front-matter 中字段有多个参数的时候，可以使用如下图的写法。

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

重启查看结果

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

4.添加站内搜索功能

我们使用Local Search，下面介绍 Local Search 的安装吧。注意：安装的时候要是项目根目录下安装。

安装 hexo-generator-search

npm install hexo-generator-search --save

安装 hexo-generator-searchdb

npm install hexo-generator-searchdb --save

在项目根目录下的 _config.yml 配置文件的文末添加下面这段代码。

search:path: search.xmlfield: postformat: htmllimit: 10000

编辑主题文件夹的 _config.yml 配置文件，设置 Local searchenable 为 ture。

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

重启服务查看

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

5.添加头像

打开主题文件夹下的 _config.yml 配置文件，通过查找功能找到 avatar，然后把一个在线的头像图片地址（百度图片中直接复制链接即可），作为 url 的参数。如下图所示：

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

然后蒋rounded和rotated两个属性的值变为true（开启圆形头像和旋转动画）

然后查看结果：

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

四、界面美化

1.设置右上角fork me

在 GitHub Corners 上选择你喜欢的挂饰，复制方框内的代码。

个人喜欢蓝色所以采用蓝色

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

打开主题文件夹下的 layout 文件夹，用记事本的方式打开 _layout.swig，把刚刚复制的代码放到

下面，并把 href 的参数，修改为自己的 github 链接（放自己要跳转的网址即可）。

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

重启，查看结果

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

2.背景特效

打开主题文件夹下的 layout 文件夹，用文本的方式打开 _layout.swig 文件，在文末加上如下的代码：

<!-- 动态背景 -->
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

重启后出现粒子动态特效

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

3.设置背景图片

搭建博客所使用的所以图片都建议使用网络上的（我自己的是在自己服务器上，如果想要有一个放图片的可以百度搜索使用Gitee创建文件服务器，本人没有亲自尝试，也可以使用其他教程）

在主题目录里中的source目录下的css目录中创建_custom目录，再创建custom.styl文件

custom.styl文件内部复制下面代码

body{//强烈建议使用网图background:url(https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fwww.pptbz.com%252Fpptpic%252FUploadFiles_6909%252F201406%252F2014061415430346.jpg%26refer%3Dhttp%253A%252F%252Fwww.pptbz.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1632289509%26t%3Dc0d7511ecc4e1aaf0fbc80a67c26328e&thumburl=https%3A%2F%2Fimg1.baidu.com%2Fit%2Fu%3D607224174%2C52592584%26fm%3D26%26fmt%3Dauto%26gp%3D0.jpg);background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:center;// 设置主题部分的透明度，具体看图opacity: 0.8;
}

最后在主题source目录下找到css目录里面有main.styl 在最后加入

@import "_custom/custom";

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

最后重启查看结果

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

4.设置首页文章预览

默认情况下，文章在首页是全文显示的，这样肯定是不方便读者浏览。所以需要实现预览模式。效果图如下：

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

方法一：使用 < !–more–> 手动切断
这种方法可以根据文章的内容，自己在合适的位置添加 < !–more–> 标签，使用灵活，也是Hexo推荐的方法。
方法二：添加 description
在文章的 front-matter 中添加 description 和 photos 字段，如下图所示。如果不需要显示图片的话，可以把 photos 去掉。
ps：不知道 front-matter 是什么的话，跳转到第二章的第3点的添加文章看下。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ameuudLg-1630037801376)(http://www.cmxblog.cn:8848/download/1429686047079530497)]

查看结果：

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

5.社交小图标设置

在主题文件夹下的 _config.yml 配置文件中，搜索 Social，然后提示自己增加自己需要的小图标并设置对应连接。
图标可以到 Font Awesome Icon 网站查找。
也可以粘贴我的，只需把链接改了

social:GitHub: https://github.com/yunyuchengfeng || fab fa-githubE-Mail: 1601533465@qq.com || fa fa-envelopeCSDN : https://blog.csdn.net/qq_43828852?spm=1011.2124.3001.5343 || fas fa-bookQQ: http://sighttp.qq.com/authd?IDKEY=b517b0b5b2cd04f44b4993de9a2e8d919ea67939a38efa40 || fab fa-qq

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

刷新查看结果

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

6.底部隐藏由 Hexo & NexT.Gemini 强力驱动

在主题文件夹下，打开 layout/_partials/footer.swig 文件，注释掉相关代码如下所示，位置是文末。

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

保存后查看结果，出现下图情况

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

7.设置网站图片 Favicon

在阿里巴巴矢量图标库中找到自己的喜欢的图标，下载下来，覆盖掉主题文件夹下的 source/images 目录里面的三张图片即可。

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

替换后

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

上面图片发生变化，说明成功

五、文章内部设置

1.博客置顶设置

安装插件

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的 Front-matter 中加上 top 即可，数值越大表示等级越高，越靠前显示。

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

在主题文件夹中打开 layout/_macro/post.swig 文件，定位到 post.header ，把下面的代码添加进去即可。

{% if post.top %}<i class="fas fa-thumbtack"></i><font color=#492821>置顶</font>
{% endif %}

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

然后重启查看结果

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

在这里shuoyx如果感觉图片左对齐不好的话，就在这个文件上接着改改成自己想要的样子可以调width值来自行决定

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

2.文末显示微信公众号设置

在主题文件夹下打开 _config.yml 配置文件，定位到 follow_me,去除前面#

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

对上面的地址进行替换放自己的公众号二维码或微信二维码

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

3.设置打赏功能

在主题文件夹下打开 _config.yml 配置文件，定位到 reward,先讲enable设置为true，再去除前面WeChatpay和alipay前面的#，替换为图片链接（不是本地）

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

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

重启查看

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

4.文章底部版权信息设置

在主题文件夹的 layout/_macro 目录下，新建一个 my-copyright.swig 文件，把下面的代码复制进去。

{% if page.copyright %}
<div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><!-- JS库 sweetalert 可修改路径 --><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p><p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p><p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fab fa-creative-commons-share"></i> 转载请保留原文链接及作者。</p>
</div>
<script> var clipboard = new Clipboard('.fa-clipboard');$(".fa-clipboard").click(function(){clipboard.on('success', function(){swal({   title: "",   text: '复制成功',icon: "success", showConfirmButton: true});});});
</script>
{% endif %}

在主题文件夹的 source/css/_common/components/post/ 目录下，新建一个 my-post-copyright.styl 添加如下代码。

.my_post_copyright {width: 85%;max-width: 45em;margin: 2.8em auto 0;padding: 0.5em 1.0em;border: 1px solid #d3d3d3;font-size: 0.93rem;line-height: 1.6em;word-break: break-all;background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {display: inline-block;width: 5.2em;color: #b5b5b5;font-weight: bold;
}
.my_post_copyright .raw {margin-left: 1em;width: 5em;
}
.my_post_copyright a {color: #808080;border-bottom:0;
}
.my_post_copyright a:hover {color: #a3d2a3;text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {color: #000;
}
.my_post_copyright .post-url:hover {font-weight: normal;
}
.my_post_copyright .copy-path {margin-left: 1em;width: 1em;+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {color: #808080;cursor: pointer;
}

打开主题文加下的 layout/_macro/post.swig 文件，找到如图所示的位置添加上下面这段代码。

<div>{% if not is_index %}{% include 'my-copyright.swig' %}{% endif %}
</div>

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

打开项目根目录下的 source/css/_common/components/post/post.styl 文件，在文末加上这句代码：
```
@import "my-post-copyright"
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8EAoCs3T-1630037801393)(http://www.cmxblog.cn:8848/download/1429762778599653378)]

最后在文章中加入 copyright : ture

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

重启查看结果

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

5.网站底部字数统计设置

npm install hexo-wordcount --save

打开主题文件夹下的 layout/_partials/footer.swig 文件，在文末添加上下面这段代码。
```
<div class="theme-info"><div class="powered-by"></div><span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
```
重启出现下列样式

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

6.网站底部加上访问量

已经在（网站底部字数统计设置）这一节安装了相关插件，所以不需要再安装了。

打开主题文件夹下的 layout/_partials/footer.swig 文件，在文末添加如下代码，位置如下图所示：

<div class="powered-by"><i class="fa fa-user-md"></i><span id="busuanzi_container_site_pv">本站访问量:<span id="busuanzi_value_site_pv"></span>次</span><span class="post-meta-divider">|</span><span id="busuanzi_container_site_uv">本站总访客量：<span id="busuanzi_value_site_uv"></span>人</span><span class="post-meta-divider">|</span>
</div>

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

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

现在可能会出现次数不对的情况，我们先不去管他

7.外链网易云音乐设置

打开网易云，登录自己的账号，选择自己喜欢的一首歌，点下面的分享，然后复制链接，如下图所示

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

复制后会出现这样的链接 https://music.163.com/song?id=513360721&userid=1314218479 我们需要记下id后面的数字

打开主题文件夹下的 layout/_macro/sidebar.swig 文件，自己找个合适的位置，把刚刚复制的代码放进去。我放置的位置如下图所示

在下面的地方粘贴下列代码，将自己选择的歌的id进行替换

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=513360721&auto=1&height=66"></iframe>

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

重启查看

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

8.文章内链接文本样式设置

打开主题文件夹下的 source\css\_common\components\post\post.styl 文件，然后在文末加上下面这段代码即可。

// 文章内链接文本样式
.post-body p a{color: #0593d3; //原始链接颜色border-bottom: none;border-bottom: 1px solid #0593d3; //底部分割线颜色&:hover {color: #fc6423; //鼠标经过颜色border-bottom: none;border-bottom: 1px solid #fc6423; //底部分割线颜色}
}

鼠标悬停变色

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

9.评论模块接入

我使用的是来必里云跟帖功能来设置评论模块。
首先得先到来必里申请一个账号。
点击右上角的头像，进入“管理页面”，会看到“您确定要获得来必力安装代码吗?”的提示，直接点击“实行”即可。
申请 City 免费版，如实填写信息即可。申请成功后，可以看到“一般网站”下的第二行代码，有个 data-uid，把后面的值复制下来留着备用。

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

在主题文件下打开 _config.yml 配置文件，定位到 livere_uid，把刚刚拷贝的data-uid粘贴到相应的位置。

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

重启后查看

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

六、部署到码云

1.创建仓库

找到创建仓库

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

创建完成后，点击复制

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

2.部署到远程仓库

打开项目根目录下的 _config.yml 配置文件，修改 deploy 的值。tpye 设置为 git，repo 则设置为刚刚新建的远程仓库链接。
注意：冒号后面需要再加一个空格，不然会出现格式错误。

deploy:  type: gitrepo: https://gitee.com/chen-mingxuan/myblog.gitbranch: master

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

在项目根目录下，打开 Git Bash，配置码云的用户和邮箱。

git config --global user.name空格+你的码云的名字
git config --global user.email空格+你的码云的邮箱

安装hexo-deployer-git，安装成功图如下：

npm install hexo-deployer-git --save

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

一键部署到远程仓库，部署成功图如下：
```
hexo clean
hexo g
hexo d
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S5lLsRIH-1630037801401)(http://www.cmxblog.cn:8848/download/1430001797971443714)]

到这个界面说明成功部署

我们再去仓库查看，已经发生变化

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

3.发布

点击服务中的Gitee Pages

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

然后按下图操作[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2BYHpWtL-1630037801403)(http://www.cmxblog.cn:8848/download/1430010687781994497)]

启动后

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

会给你一个地址我们拷贝这个地址

打开项目根目录下的 _config.yml 文件，修改 URL 部分的参数。
url 字段的值修改为远程访问连接
root 字段的值修改 /+远程仓库的名称

url: http://chen-mingxuan.gitee.io
root: /myblog

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

重新部署

hexo clean
hexo g
hexo d

然后我们在这个界面点击更新

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

跟新完成后访问上面那个路径，可以出现我们设计好的博客。

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

到这就可以完结散花了！！

七、参考

本文参考链接：

https://blog.csdn.net/weidong_y/article/details/90904781?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

使用Hexo搭建个人博客-保姆级教程相关推荐

hexo —— 搭建个人博客保姆级教程
之前我去找过很多大佬使用 hexo 搭建博客的文章,大多是 18 19 年的文章,因为这期间 github 发生了下更新,有些东西不配置的话会报错.在这篇文章中,我将会带领大家搭建一个属于个人的博客, ...
快速搭建个人博客——保姆级教程
文章目录序言本地网站开发工具 WebStorm Vscode 框架 Hexo(强烈推荐) WordPress 本地环境 git node.js Hexo 安装初始化主题样式 Butterf ...
Github + Hexo 搭建个人博客超详细教程
Github + Hexo 搭建个人博客超详细教程本文目录 generated with DocToc 网站搭建本文目录 1.安装node.js 2.添加国内镜像 3.安装Git 4.注册Gith ...
Hexo搭建Github-Pages博客填坑教程
目录: 1.安装Hexo 2.部署Hexo 3.Hexo命令 4.一些报错处理 5.博客管理 6.插件(RSS.Sitemap) 7.评论设置 8.404页面 9.统计 10.更新 11.总结 12. ...
利用Hexo搭建个人博客－博客初始化篇
上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境. 相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面, ...
利用Hexo搭建个人博客－博客发布篇
通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...
hexo搭建个人博客_hexo 搭建个人博客
hexo 搭建个人博客 hexo-theme-matery README Hexo BLOG 地址 iyuhp's blog 基本介绍本 blog 使用 HEXO 搭建, MATERY 作为主题, ...
使用github+hexo搭建静态博客
npm install hexo -g #安装Hexo npm update hexo -g #升级 hexo init #初始化博客命令简写 hexo n "我的博客" == ...
给hexo搭建的博客更换主题
怎么给hexo搭建的博客更换主题首先要进入hexo的官网主题界面,找到你所想要的主题网址:https://hexo.io/themes/ 点进该主题,就会进入你选中的主题的拥有者的博客,你就可以看 ...

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

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

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

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

一、准备环境

1.安装Typora

2.安装nodejs

3.安装git

4.在码云注册

5.安装Hexo

二、美化博客主题

1.克隆主题

2.切换主题

3.添加文章

4.设置主题样式

三、美化个人栏

1.修改作者、名称

2.添加分类

3.添加标签

4.添加站内搜索功能

5.添加头像

四、界面美化

1.设置右上角fork me

2.背景特效

3.设置背景图片

4.设置首页文章预览

5.社交小图标设置

6.底部隐藏由 Hexo & NexT.Gemini 强力驱动

7.设置网站图片 Favicon

五、文章内部设置

1.博客置顶设置

2.文末显示微信公众号设置

3.设置打赏功能

4.文章底部版权信息设置

5.网站底部字数统计设置

6.网站底部加上访问量

7.外链网易云音乐设置

8.文章内链接文本样式设置

9.评论模块接入

六、部署到码云

1.创建仓库

2.部署到远程仓库

3.发布

七、参考

使用Hexo搭建个人博客-保姆级教程相关推荐

最新文章

热门文章