作为一个想要使用hexo在github上搭建自己的主页的小白而言，首先需要搭建好自己的主页，也许以为是markdown的原因，也许我们需要还要搭建一个图床。我相信hexo架构一定是一个不错的选择，以下这一部分就是一个hexo架构搭建的过程。

参考教程：文档 | Hexo

什么是hexo

hexo是一个快速简洁并且高效的一个博客的框架，使用markdown语言解系文章。

安装

安装hexo需要以下的应用程序：

  • node.js
  • git
    屏幕截图 2026-02-07 101521.png

关于Git

首先打开powershell，输入git --version,如果有显示版本号，那么我们的程序就是正确安装好了的。

关于node.js

我们通过nvs进行安装，首先用管理员身份打开powershell，执行以下的命令：winget install jasongin.nvs,然后就会开始安装。
但是在这里有一个坑，就是如果我们直接打开普通的powershell的模式下，我们输入nvs --version 的时候会显示无法执行脚本文件，这是因为powershell的管理模式默认的运行策略是restricted，所以我们需要运行命令，更改运行的模式。屏幕截图 2026-02-07 101521.png

具体过程如上图所示，而后我们可以看到重新运行nvs --version能够顺利显示版本号相关的信息。而后我们利用nvs进行安装，但是好像会出现报错，并没有开始安装，而是出现了nvs自身的完整安装的说明，这说明nvs虽然能够被调用，但仍然没有完成核心的安装的配置流程。

我们需要配置nvs的安装目录：

1
2
3
# 设置nvs的主目录（单用户模式，推荐） $env:NVS_HOME="$env:LOCALAPPDATA\nvs" 
# 创建目录（确保目录存在） 
New-Item -ItemType Directory -Path $env:NVS_HOME -Force

第二部我们需要克隆nvs仓库，需要使用到git命令，如果没有git需要重新进行安装。

1
2
# 克隆nvs的官方仓库到指定目录（需先安装Git，若提示git未找到，先安装Git） 
git clone https://github.com/jasongin/nvs "$env:NVS_HOME"

但是克隆完成后，不代表我们真的完成了这一个nvs的配置，我的电脑遇到的情况是我的powershell配置存在，但内容为空的报错。首先我们要查看我们的nvs的核心文件是否存在：

1
2
# 列出nvs目录下的文件 
Get-ChildItem "$env:LOCALAPPDATA\nvs"

我们可以看到类似于下图的输出
image.png
可以看到，我们的nvs.cmd,nvs.ps1，文件都是存在的，但是缺少了nvs.psd1文件，我们可以直接使用nvs.cmd来完成这个安装的过程。

但是这最终出现了问题，有点烦，我还是选择去node.js的官网去进行下载安装
点击进入官网首页后，可以看到有两个下载区。current和LTS，选择Windows 64-bit installer后进行安装。确认add to path后，我们就可以进入下一部分。

安装配置 hexo

确认node、npm是否能够使用了，输入以下两个命令：

1
2
3
4
5
6
7
node -v 
# 会显示类似 v24.13.0（你的Node版本） 
npm -v 
# 会显示类似 11.6.2（你的npm版本）
npm install -g hexo-cli
# 全局安装命令行工具，如果安装很慢切镜像
npm config set registry https://registry.npmmirror.com

创建并且初始化hexo博客：

1
2
3
4
5
mkdir hexo-blog # 创建文件夹 
cd hexo-blog # 进入这个文件夹
hexo init
npm install
hexo server # 也可以缩写成：hexo s

以上五个命令，执行完最后一个命令后，会输出提示：Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.我们用浏览器打开那个网址（实际上是本地的预览），就可以看到我们的新网页啦，新网页暂时很丑，而且网页是基于本地的，我们需要准备github+hexo+部署。

github配置

首先需要准备github仓库，我们要先注册一个github的账号

  • 登录 GitHub，点击右上角「+」→「New repository」；
  • 仓库名填：你的GitHub用户名.github.io（必须严格这个格式）；
  • 选择「Public」（GitHub Pages 不支持私有仓库）；
  • 点击「Create repository」完成创建。
    然后我们打开hexo文件夹的config文件，找到末尾的deploy部分进行修改：
1
2
3
4
deploy: 
	type: git 
	repo: https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git # 替换成你的仓库地址 
	branch: main # 注意：GitHub新仓库默认分支是main（旧版是master，根据你的仓库分支改）

我们需要使用SSH秘钥，ssh-keygen -t ed25519 -C "你的GitHub邮箱@xxx.com",而后把秘钥添加到github里面。验证是否连接：ssh -T git@github.com。最后在cmd终端执行hexo的github插件：

1
npm install hexo-deployer-git --save

然后清理缓存，生成最新的静态文件：hexo clean && hexo generate，然后打开浏览器，访问你自己的网址https://你的GitHub用户名.github.io，你就可以看到你的个人的博客啦
image.png
一张成果图，可以看到这个主页还是很low的，后续我们会进行，页面设置的优化。

图床的配置

有一篇文章，算是相当的全面了，如下所示：
搭建图床存储个人文件_picgo-CSDN博客
按着做，准能搞好。

安装butterfly主题

这个主页看着，似乎的确是太丑了，所以我们需要对它进行一些优化，使得这个主题变得更加好看，我们选择了butterfly进行配置

1
2
# 克隆Butterfly主题到themes文件夹
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  • 如果提示git: 'clone' is not a git command，先装 Git（https://git-scm.com/download/win，安装时勾选 Add Git to PATH）；
  • 克隆完成后，themes文件夹里会多出butterfly文件夹，说明安装成功。

打开 Hexo 根目录的_config.yml（记事本 / VS Code），找到theme配置项，把默认的landscape改成butterfly：

1
2
3
4
# 找到这一行
theme: landscape
# 改成
theme: butterfly

保存文件（Ctrl+S）。

安装主题依赖（必须！否则样式会乱）

在终端执行：

1
2
# 安装Butterfly需要的依赖
npm install hexo-renderer-pug hexo-renderer-stylus --save

本地预览新主题（看效果）

执行：

1
hexo clean && hexo s

打开http://localhost:4000，你会发现页面已经从简陋的默认样式，变成高颜值的 Butterfly 主题（有卡片布局、导航栏、侧边栏，颜值直接提升）！
image.png

当然，我们还要进行进一步的配置与细化的操作

基础美化

首先，我们从hexo根目录进入themes/butterfly/文件夹，找到_config.ymy（与hexo主配置名称同名的文件），用记事本打开。接下来我们进行美化的操作：

1
2
attention！！！
需要注意ymy文件的特殊的格式要求，其中在":"之后，必须空一格再进行输入，缩进是两个空格，而不是tab

1.导航栏美化

1
2
3
4
5
6
7
menu:
  首页: / || fas fa-home          # 首页（必加）
  文章归档: /archives/ || fas fa-archive  # 文章归档
  分类: /categories/ || fas fa-folder-open # 分类页
  标签: /tags/ || fas fa-tags      # 标签页
  关于我: /about/ || fas fa-user    # 关于页（后续会教你建）
  # 音乐: /music/ || fas fa-music   # 可选，想要就取消注释

2.导航栏固定

1
2
3
4
5
nav:
  logo:
  display_title: true
  display_post_title: true
  fixed: true  # 改成true，导航栏固定在顶部

个人信息美化

头像配置

设置自己的图像，增加动态效果。改头像连接加悬停特效

1
2
3
avatar:
  img: https://你的头像图片链接.jpg  # 替换成你的头像链接
  effect: true  # 鼠标悬停头像旋转，增加动态效果

侧边栏作者信息

1
2
3
4
5
6
7
8
card_author:
  enable: true
  description: 小白一枚
  button:
    enable: true
    icon: fab fa-github
    text: 我的GitHub
    link: https://github.com/你的GitHub用户名

侧边栏公告

1
2
3
card_announcement:
  enable: true
  content: 欢迎来到我的博客～  # 改成你的自定义文案

主页样式美化

主页副标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
subtitle:
  enable: true  # 开启副标题
  effect: true  # 打字机特效
  typed_option:
    strings:
      - "一个新手的Hexo博客"
      - "记录学习日常"
      - "分享编程笔记"  # 可以加多个文案，会轮播
    typeSpeed: 50  # 打字速度（越小越快）
    backSpeed: 30  # 回删速度
    loop: true     # 循环播放
  source: false
  sub:
    - "一个新手的Hexo博客"
    - "记录学习日常"
    - "分享编程笔记"

新建“关于我”

在CMD终端执行：

1
hexo new page about

执行后，会在source/about文件夹生成index.md，打开这个文件，写你的简介（比如）：

1
2
3
4
5
6
7
8
9
10
11
---
title: 关于我
date: 2026-02-07 16:00:00
---

### 自我介绍
大家好～我是一个Hexo新手，正在学习搭建个人博客，分享我的学习笔记和日常。

### 联系方式
- GitHub：https://github.com/你的用户名
- 邮箱：你的邮箱@qq.com

修改后保存

在cmd中执行：

1
hexo clean && hexo s

部署到 GitHub（让外网能看到）：

1
hexo clean && hexo g && hexo d

等 1-2 分钟，访问https://你的GitHub用户名.github.io，美化后的博客就生效了！

如何将blog同步到github

首先，打开CMD终端，进入Hexo博客的根目录：

输入`hexo new “0：我的第一篇博客”

执行命令直接打开notepad source\_posts\我的第一篇原创博客.md,编写markdown格式的内容以后，按照最上面的修改后保存的操作，就可以上传到github上面啦。

一个markdown的模板如下，AI生成的：

1
2
3
4
5
6
7
--- 
title: 我的第一篇原创博客 # 文章标题（可改） 
date: 2026-02-09 10:00:00 # 发布时间（自动生成，不用改） 
cover: https://bucket-plusone.oss-cn-wuhan-lr.aliyuncs.com/img/你的封面图.jpg  
tags: [Hexo, 新手笔记]  
categories: 学习记录 
---

image.png
最终的样式也是非常的好看！！！