主要参考b站up主：使用Hexo搭建个人博客手摸手教学
学习搭建博客是一个非常费时费力的过程，会遇到很多坑，大部分都是通过chatgpt帮我解决了🫣🫣🫣

常用工具推荐

md编辑器：Typora

代码编辑器：vscode

环境搭建

git安装

git下载for mac，点击Binary installer的最新版本的版本号，如2.33.0。安装过程不赘述

查看是否成功

1
2
% git version
git version 2.33.0

没有安装成功一定要卸载重来

node安装

Node.js下载，我下载的是长期支持版本18.16.0 LTS

1
2
% node -v
v18.16.0

npm安装

这里需要在终端里运行代码，也是我踩坑最多的地方

1
% npm install -g hexo-cli

可能会遇到以下问题：

  1. 如果没有权限就
1
% sudo npm install -g hexo-cli
  1. 如果连不上网，需要将下载源更换，再执行hexo-cli下载代码即可
1
% npm config set registry https://registry.npm.taobao.org

查看安装是否成功：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
% hexo version
hexo-cli: 4.3.0
os: darwin 22.1.0 13.0

node: 18.16.0
acorn: 8.8.2
ada: 1.0.4
ares: 1.19.0
brotli: 1.0.9
cldr: 42.0
icu: 72.1
llhttp: 6.0.10
modules: 108
napi: 8
nghttp2: 1.52.0
nghttp3: 0.7.0
ngtcp2: 0.8.1
openssl: 3.0.8+quic
simdutf: 3.2.2
tz: 2022g
undici: 5.21.0
unicode: 15.0
uv: 1.44.2
uvwasi: 0.0.15
v8: 10.2.154.26-node.26
zlib: 1.2.13

创建博客

我文件夹的创建位置位于/Users/yangzhi/Documents/zhi_blog，即我在文稿文件里zhi_blog文件夹。

创建博客文件夹

hexo init [文件夹名字]，我用的是blog

1
zhi_blog% hexo init blog

安装依赖

这里首先需要用cd将路径跳至刚才创建的文件夹下，即/Users/yangzhi/Documents/zhi_blo/blog

1
blog % npm install

运行博客

1
2
3
4
blog % hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

再访问http://localhost:4000可以看到一个初始化的本地博客

发布博客到github

创建仓库

仓库名：需要用[username].github.io
设置为public
生成完成后，点击SSH，复制链接，之后需要用到

git配置

这里[username]填自己的github用户名，[useremail]填自己的github的邮箱

1
2
% git config --global user.name "[username]"
% git config --global user.email "[useremail]"

不需要中括号

配置blog文件夹

先运行终端，安装插件

1
blog % npm install hexo-deployer-git --save

用vscode打开blog文件夹，找到_config.yml，添加下述code

1
2
3
4
deploy:
  type: 'git'
  repo: '[SSH链接]' #git@github.com:username/username.github.io.git
  branch: main

依次执行以下代码

1
2
3
blog % hexo clean #清楚缓存
blog % hexo g #生成文件
blog % hexo d #上传至github

注意： 在第一次运行hexo d会有很多问题，开始需要输入用户名和密码，在配置ssh密钥，这里详见Hexo：配置 SSH 公钥部署

这里我遇到一个问题就是后来使用的时候有遇到过连不上github

  1. ssh -T git@github.com测试是否能连上github，正常应该会显示用户名
  2. 如果不能，ssh-keygen -t rsa -C "email@.com"，生成rsa文件，id_rsa.pub文件，复制到
  3. github头像下的setting，找到ssh key ，把刚才的内容复制进去即可。

成功后可以在github仓库里看到文件。

博客配置文件

_config.yml文件

都会有详细描述配置 | Hexo

主要看Site,URL部分

每次更改_config.yml（或者说每次修改blog下文件）都需要运行

1
2
3
blog % hexo clean #清楚缓存
blog % hexo g #生成文件
blog % hexo s #运行hexo

主题配置

我用的是butterfly模版，github可以搜索到

操作文档Butterfly 安裝文檔(一) 快速開始 | Butterfly

butterfly模版安装

1
blog % npm install hexo-theme-butterfly

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

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

需要安装插件

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

在blog目录创建一个文件 _config.butterfly.yml，并把./node_modules/hexo-theme-butterfly/_config.yml内容复制到 _config.butterfly.yml 去。

后续主题配置

Butterfly 安裝文檔(二) 主題頁面 | Butterfly