【2025最新版】搭建个人博客教程

–小记：

在搭建我的这个博客之前我在CSDN也发布过一些文章，目前应该也是几千粉丝了，但是有时候CSDN发布的文章会被系统审核不通过就很烦，而且CSDN老套的博客模板确实不太好看，看到别人都是用自己博客写的就感觉自己很LOW，所以就想自己来搭建一个属于自己的个人博客。当然搭建博客的主要目的也是为了分享一些比较有用的教程给大家的，我搞了蛮久的，每个都需要自己去看一遍才能理解到他的意思。下面就给大家分享一下我是如何搭建我的个人博客的

1、环境准备

在我们搭建我们的个人博客之前我们需要准备一下我们的环境（安装下方的顺序来安装，别弄混了）

1.安装git

1
2
$ apt install git  /**/安装git
$ git --version /**/查看git的版本

image-20241209230841729出现了这个git version就代表我们安装成功了

2.安装node.js环境

我们需要在我们的机子上安装node.js环境，我这边发现我的服务器好像安装了npm就自带node版本，我不知道为什么，如果你们的服务器安装了npm后仍然没有node环境的话可以找文章去安装一下nodejs，不过好像安装了就附带的。Node 版本一定不要最新的22版本(会出现各种奇怪的问题)，建议16和18稳定版本。

1
2
3
4
$ sudo apt install npm # 下载npm软件包
$ sudo apt install nodejs # 下载noede.js环境
$ npm -v  # 验证环境中是否存在正确的 npm 版本
$ node -v # 验证环境中是否存在正确的 node 版本

image-20241209231833640

3.注册 GitHub 账号

打开浏览器，访问 GitHub 官网（https://github.com/）。在首页上找到“Sign up”按钮，点击后按照提示填写相关信息，包括用户名、邮箱地址和密码等，完成注册过程。这个账号将作为存储博客文件的仓库，承载着博客的所有代码和内容。(我相信大家都已经注册过了，我就不演示注册过程了，如果后面有空的话我再来更新这里)

2、安装hexo

1.安装hexo框架

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1
$ npm install hexo-cli -g # 安装hexo

2.初始化hexo

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ sudo npm install hexo -g #安装hexo
$ mkdir blog #此处可以是任意你喜欢的名字
$ hexo init blog #初始化部署hexo

这样就代表我们已经初始化成功了,此时已经可以打开你的博客了，在Bash里面输入:

1
$ hexo s

image-20241209234155552

这样就代表我们已经在我们的4000端口搭建好了网站。我们可以进入我们的网站看一下，如下图，这个就是我们使用的hexo框架

image-20241209234446006如果你打不开你的网站的话，你可以去你的服务器看一下是不是你的安全组没有打开！！！切记要先打开你的安全组才能访问到你的这个网站哦，要牢记，其他的也是一样的

4dfefd177286eef60b2e9e8622c6576

3、安装butterfly主题

1.安装butterfly

hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的主题。

在你的 Hexo 根目录里输入以下命令：

1
$ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly #下载稳定版butterfly主题

当你安装完成之后你可以看到自己的blog/themes下面多了一个butterfly主题，这样就代表我们已经安装好了我们的主题

image-20241209235610191

2.应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

1
theme: butterfly

3.安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安装：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

这里我出现了一个问题，就是我的npm install不动了，后面排除因素应该是没有使用国内镜像导致的，换了速度就快了

1
2
3
4
npm config get registry #查看自己的镜像是哪里的
npm config set registry=https://registry.npmmirror.com #更改自己的镜像为国内镜像
//重新执行以下命令查看是否配置成功
npm config get registry

image-20241210000710999

4.升级建议（我建议实施，便于后期的管理）

升级完成后，请到 Github 的 Releases 界面查看新版的更新内容。

里面有标注 _config 文件的变更内容（如有），请根据实际情况更新你的配置内容。

为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做）：

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。这边我建议用cp命令，直接将主题的config内容复制到hexo根目录上

1
cp themes/butterfly/_config.yml  _config.butterfly.yml

image-20241210001058106

注意:

复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml

不要把主题目录的 _config.yml 删掉

以后只需要在 _config.butterfly.yml 进行配置就行。如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

Hexo 会自动合并主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

5.启动环境

1
hexo s #启动本地环境

当你出现这个butterfly时你就说明你的主题已经安装成功了

4、主题页面

1.配置网站页面

我们打开hexo根目录的_config.yml，首先出现的时网站的页面配置，我们按需修改我们自己的主题名字和标题，作者还有语言这些。修改网站各种资料，例如标题、副标题和邮箱等个人资料，就修改 Hexo 的_config.yml。注释是我自己打上去的，记得每一个冒号后面都要空一格，这样才能显示出来效果

image-20241210112429168然后我们可以在_config.butterfly.yml中配置我们的网站图标，这样我们的图标就配置好了，logo那边只要随便在网上找个图片，然后复制一下图片链接就可以了。后续我会出一个picgo联合markdown文档做个图床，然后把链接放到我们自己的云资源中

image-20241210120344014image-20241210120439348

2.目录配置

我们可以看到我们上面有点空，没东西导航，所以我们可以设置我们的网站图标，我们找到_config.butterfly.yml，里面去配置一下我们的目录

1
2
3
4
5
6
7
8
9
Home: / || fas fa-home  # 目录
Archives: /archives/ || fas fa-archive #档案
Tags: /tags/ || fas fa-tags #标签
Categories: /categories/ || fas fa-folder-open #分类
List||fas fa-list: #
  Music: /music/ || fas fa-music #音乐
  Movie: /movies/ || fas fa-video #电影
Link: /link/ || fas fa-link #友情链接
About: /about/ || fas fa-heart #关于

记得在menu下面要留两个空，代表是在menu的下面一层，

!image-20241210121239446

可以看到我们的目录菜单已经出来了，但是都是英文的，所以我们就只需要去改一下就好了

image-20241210121535655image-20241210121547549

3.社交设置

我们处理完我们的目录我们就可以去搞一下我们的社交媒体类了

Butterfly 支持 font-awesome v6 图标.

书写格式 图标名：url || 描述性文字 || color

1
2
3
social:
  fab fa-github: https://github.com/maodoo0701 || Github || "#hdhfbb"
  fas fa-envelope: mailto:[email protected] || Email || "#000000"

设置完之后我们的图标就有变化了，里面就自带跳转链接了

image-20241210153004089

4.头像设置

我们设置好我们的社交栏之后就可以设置我们的头像和图标了

image-20241210153141993

1
2
3
4
favicon: /img/favicon.png #网站图标
avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

弄好了就是这个样子，头像会变化，然后图标会改变

image-20241210154730126

5.背景图和顶部脚步图设置

image-20241210155046947

将脚部的设为true，背景和顶部设为同一个图片，这样就可以看起来更顺滑一点，如果不设置脚步图片true的话就会像下图一样，有点不和谐还是

image-20241210155132293

设置完之后我们的图片就会和顶部图一模一样了，这样我们可以看起来会更丝滑一点

image-20241210155311200

但是还是会有一点点的小差别，因为阴影部分感觉不能和背景图的色差保持一致，就会导致不好看，我在另一篇博客上面发了背景一图流，如果感兴趣的话可以再去更改这个背景图

6.代码块格式设置

如果你需要 MacOS 风格的代码高亮样式，可以把macStyle 设为 true。这样我们的文章就会展现出是mac格式了，可能要更好看一点

image-20241210160027109下面就是效果图了，变成了mac格式的代码块，我觉得要好看一些

image-20241210160124666

7.文章封面

1
2
3
4
5
6
7
8
9
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  default_cover:
    - https://maodoo.oss-cn-beijing.aliyuncs.com/20241210172528345.jpg
    - https://maodoo.oss-cn-beijing.aliyuncs.com/20241210172459243.png
    #从这两个图片之中随机选取图片

image-20241210172546540

把所有图片都导入上去之后，我们可以去创建几篇新博客，看看有没有生效，再打开可以发现我们的文章封面已经生效了

1
2
3
4
hexo new 我的第一篇博客  #创建标题为“我的第一篇博客”的文章
hexo new 爱笑的个人博客搭建教程 #创建标题为“爱笑的个人博客搭建教程”的文章
hexo cl #清除缓存
hexo s #本地调试预览

image-20241210173554270

8.主题目录

搞了这么多，点击了一下目录，发现目录那边每个都点击不起来，原来是我没有配置

1、标签页

​ 1.前往你的 Hexo 的根目录

​ 2.输入 hexo new page tags

​ 3.你会找到 source/tags/index.md 这个文件

​ 4.修改这个文件：

1
2
3
4
5
6
7
---
title: 标签
date: 2018-01-05 00:00:00
type: 'tags'
orderby: random
order: 1
---

2.分类页

分类页文件名不一定是 categories, 例子中的 categories 只是一个示例
记得添加 type: “categories”

​ 1.前往你的 Hexo 的根目录

​ 2.输入 hexo new page categories

​ 3.你会找到 source/categories/index.md 这个文件

4.修改这个文件：

1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: 'categories'
---

image-20241210174435927

image-20241210174447852

3、友情链接

​ 1.前往你的 Hexo 的根目录

​ 2.输入 hexo new page link

​ 3.你会找到 source/link/index.md 这个文件

​ 4.修改这个文件：

1
2
3
4
5
---
title: 友情链接
date: 2018-06-07 22:17:49
type: 'link'
---

image-20241210174835106

image-20241210174852133

5.数据来源

在 Hexo 根目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.yml

1
2
3
mkdir _data #创建一个名为data的文件夹
touch link.yml #创建一个名为link.yml的文件
vi link.yml #编辑link.yml

image-20241210175036655

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

image-20241210175009883

这样我们的目录部分就搭建完成了，其他地方按需修改即可

image-20241210175316684

这个就是差不多整个主题的配置了，还有一些配置我没写出来，但是你们可以去看一下官方文档，那边写的更加详细，或者看哔哩哔哩的卷二兔的课，几乎把所有配置都讲了，还有部署到GitHub的过程，比较多，所以我下期再讲，这期就先到这里。