前言

求学以来，零零散散的记录了一些问题，也形成了一些笔记，但是从未有过管理自己的博客的想法。归根结底，到底还是由于平台太多，自己太懒，并不像多平台发布，只想着取悦自己。因此，我搭建了一个专属自己的平台，随性发布一些内容。

选择Hexo+GitHub搭建博客，是因为本人现阶段并不打算租服务器或者在这上面花费太多的💴，因此选择这个组合来搭建博客

为了美化博客，最简单的方式就是使用butterfly等现有的主题，而关于如何使用Node.js、GitHub、Hexo、Butterfly搭建、美化，网络上有太多太多行之有效的教程，多出一份也毫无意义。因此，本人在此专门从小白角度，以身试法，总结一下自己遇到的问题

博客搭建

  1. 博客搭建初期，使用Github的进行ssh key连接过程，如果报错，很大程度上是网络问题，需要不断尝试 打开代理-切换代理-关闭代理等多种方法，或者是稍后访问。

  2. 基于Hexo的博客搭建常见命令

    hexo n page "分类"  # 新建页面

    hexo new "My Blot"  # 新建博客，注意冒号是必须带上的,会在source文件夹中出现 My Blot.md文件

    hexo g  # 为md文件生成网页资源

    hexo d  # 将网页资源推送到页面，也就是基于Github 搭建的页面

    hexo c  # 清除所有已经生成的网页资源

    hexo s  # 在本机上查看网页资源 （hostlocal：4000）端口号可能不一样

博客美化

  1. 本文接下来全部基于butterfly
  2. yml打开时，尽量不要用记事本，因为yml中格式要求十分严格，：后面必须有一个空格，使用记事本容易破坏原有结构而导致报错
  3. 子页面的生成

​ Butterfly中提到，子页面也是普通页面，因此可以按照普通页面的生成方式进行生成。并且在示例中说明了如何添加“分类”、“标签”、“照片”等多个子页面。

​ 但是，本人遇到的问题如下：

pi0kDOg.png

此情况一般是子页面缺失，需要新建子页面，子页面文件需要在主页面文件夹下，具体文件结构如下图：

pi0khlT.png

pi0kfpV.png

其中Gallery文件夹包括index.md，以及所属的三个子页面文件夹girls、scenry、wallpaper，必须按照这个顺序，才能使得子页面有效。

  1. Butterfly中画廊的应用

说明文档中给出了代码示例，只要将下面代码放入Gallery主页面的index.md文件中，该页面下将会出现三个选项，这时候我们需要创建三个子页面

<div class="gallery-group-main">
{% galleryGroup '壁纸' '也许，勇士每天面对的，都是星辰大海' '/Gallery/wallpaper' https://z1.ax1x.com/2023/11/25/piwvNvR.png %}
{% galleryGroup '绝色' '如果你认为她是美的，那她便是极美的' '/Gallery/girls' https://z1.ax1x.com/2023/11/25/piwvY8J.png %}
{% galleryGroup '风景' '人生在意的不是旅途终点，而是沿途的风景' '/Gallery/scenry' https://z1.ax1x.com/2023/11/25/piwvr5D.png %}
</div>

并且将下面代码放入子页面的index.md,便可以实现示例中的操作

{% gallery %}
![piwviHf.png](https://z1.ax1x.com/2023/11/25/piwviHf.png)
![piwvJC4.md.png](https://z1.ax1x.com/2023/11/25/piwvJC4.md.png)
![piwvY8J.png](https://z1.ax1x.com/2023/11/25/piwvY8J.png)
{% endgallery %}
  1. 图床

将图片放至线上，在md文件中调用时直接使用html调用，可以节省本地的空间

博客书写

对于初学者，使用Typora或者vscode进行markdown文件的撰写都可以，但是语法需要多家联系

结语

关于Hexo+butterfly的博客搭建就到此结束，希望各位初学者能够跟随更加详细的博客，搭建出自己平台，当然，如果遇到一些 “这么简单我竟然没搞定” 的问题，也欢迎留言联系博主，让后续的学者少挠头！