一、Hexo简介

Hexo是一个开源的静态博客框架，它能够将Markdown或HTML文件渲染成静态网页。它具有以下特点：

  • 速度快：生成静态文件，加载迅速。
  • 易扩展：支持丰富的插件和主题。
  • 部署方便：可以轻松部署到GitHub Pages、Vercel等平台。

二、搭建前的准备工作

在开始搭建之前，需要确保你的电脑上已经安装了以下工具：

  1. Node.js：Hexo基于Node.js运行，因此需要先安装Node.js。

  2. Git：用于版本控制和部署博客。

如果没有安装的话可以查看hexo的官方文档按照步骤安装。

我这里安装Node.js时是通过了nvs来安装，如果通过nvs来安装，需要手动添加一下环境变量。

安装完成后，可以通过以下命令检查是否安装成功：

1
2
3
node -v
npm -v
git --version

三、安装HEXO

在准备好一切后我们开始开始hexo的安装了

1
npm install -g hexo-cli

四、创建博客文件夹

我的文件管理比较乱七八糟，可以根据自己的情况选择对应的文件夹，我就直接在原地安装了。

win+R打开cmd，然后输入指令（输入完后也不要关闭这个窗口，后面一直要用）。

1
hexo init blog

切换到新生成的文件夹

1
cd blog

安装项目依赖的包

1
npm install

启动！

1
hexo server

随后打开浏览器，输入http://localhost:4000/ 就可以看到一个已经生成好的博客了。我们可以在_config.yml文件里进行一些简单的修改，如我对一些基本信息进行了如下修改：

1
2
3
4
5
6
7
8
# Site
title: 秋的個人博客
subtitle: '不要讓時代的悲哀,成爲你的悲哀'
description: '一个专注于记录的个人博客。'
keywords: no words
author: 秋
language: zh
timezone: 'Asia/Shanghai'

五、主题

可以到hexo的官网寻找符合我们眼缘的主题。这里采用的是很多人使用的butterfly主题。

可以采用GIT安装(安装失败可以多试几次，比较玄学)

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

或者采用npm安装（我似乎是采用了这种方式,记不清了）

1
npm i hexo-theme-butterfly

安装好后我们用vscode打开刚刚的blog文件夹，找到_config.yml文件后一直往下划，或者使用查找(vscode里使用ctrl+h快捷键)：

1
theme:

在后面写上主题名

1
theme: butterfly

这个主题其实是内置了很多功能的，但是本文主要是面向创建一个可以被访问的博客，就不过过多谈论了。

随后我们在vscode里打开这个路径的文件 \blog\node_modules\hexo-theme-butterfly_config.yml

_config.yml文件里有将近一千行代码，比较多，虽然大部分不怎么启用。需要的话可以分段去看需要修改的内容，也可以复制给ai，让ai帮忙逐段解析。我们注意到这里有很多的ture和false，这些ture和false决定了你是否启用某些组件或功能。

还可以根据butterfly的官方文档进行细致的自定义。

修改开屏图片

如需修改背景图，我们可以先在主题的sourse文件夹的img文件夹里添加图片 （路径是\blog\node_modules\hexo-theme-butterfly\source\img） 然后在主题的_config.yml里搜索index_img: 在后面添加图片路径即可，如index_img: /img/76542723_p0.jpg

创建友链界面

首先win+R打开cmd，然后回到博客的根目录。运行如下命令：

1
hexo new page link

回到vscode里我们可以发现source/文件夹里多了个link文件夹，里面有一个index.md文件。
我们进行如下修改

1
2
3
4
5
---
title: 友情链接
date: 2025-01-22 16:17:49
type: "link"
---

随后我们在source文件夹里创建一个”_data”文件夹，并添加一个link.yml文件,就可以放朋友的友情链接了，内容格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- class_name: Friends Links
  class_desc: Those people, those things
  link_list:
    - name: hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: Fast, simple, and powerful blogging framework
- class_name: Websites
  class_desc: Recommended websites
  link_list:
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: China's largest social sharing platform

为了让友链界面显示在导航栏，我们需要回到主题的_config.yml文件里查找”menu:”可以进行如下修改：

1
2
3
menu:
  Home: / || fas fa-home
  友情链接: /link/ || fas fa-link

其中/link/是网址，后面的fas fa-link是一个小图标。

这个时候我们在cmd里运行hexo server，再回到博客里就可以看到自己博客的改变了。

六、一键部署到github

首先我们要有一个github账号，没有梯子的情况下，github的连接比较玄学，只能说耐心等待吧。

新建一个repositories，Repository name设置为: “你的用户名.github.io.” 然后选public就好了，下面的选项可以增加一个readme,也可以增加些协议。创建好后访问https://github.com/你的用户名/你的用户名.github.io 在菜单栏里可以看到一个Settings，点击进入后在左侧菜单栏里找到”Pages”，点击之后，就会看到 “Your site is live at https://qvq-qiu.github.io/ “;

随后我们回到博客目录下的_config.yml文件，划到最后，修改为

1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: main

win+R,cmd运行

1
npm install hexo-deployer-git --save

随后我们可以进行上传（可以先尝试看看能不能裸连github,不能的话等几分钟能裸连了再尝试上传）

1
2
hexo clean
hexo d

访问https://你的用户名.github.io/就可以访问到博客了。

碎碎念（GIT部署报错看这）

git部署那里，零基础没接触过还是比较麻烦的（至少我折腾了半天），可以和ai一起打打太极共同解决，如果发现cmd命令连接git失败的话可以尝试：

1
ping github.com

如果发现超时可以参考这个教程 https://blog.csdn.net/qq_44985985/article/details/124178193。

然后就是要用命令设置一些用户名之类的，可以和ai一同解决。

给出一个参考步骤（以下命令都是在blog文件夹里运行的，在cmd中需要先“cd 文件夹路径”切换到对应路径）：
首先是设置用户名：

1
2
git config --global user.email "your-email@example.com"
git config --global user.name "Your Name"

切换分支

1
2
git branch
git checkout -b main  # 或者 master，取决于你的仓库设置

初始化并添加远程仓库

1
2
git init
git remote add origin https://github.com/QvQ-Qiu/QvQ-Qiu.github.io.git

检验远程仓库

1
git remote -v

你应该会看到

1
2
origin  https://github.com/QvQ-Qiu/QvQ-Qiu.github.io.git (fetch)
origin  https://github.com/QvQ-Qiu/QvQ-Qiu.github.io.git (push)

尝试推送博客

1
2
3
hexo clean
hexo generate
hexo d