使用Hexo&github.io搭建个人博客

发表于 更新于 分类于 本文字数： 2.1k

网页：github.io

框架：Hexo

一个记录，搭博客好累…

参考

搭建过程：https://zhuanlan.zhihu.com/p/392994381

环境

本机环境：windows11

md编辑器：Typora

Git

下载链接：git-scm.com/

之前装过，跳过

image-20251004111515909

就是跳过了发现没开gitbash，直接在windows的cmd里执行命令了（）

从后面回来的我：朋友们千万不要像我一样用cmd啊，gitbash和cmd是两个不一样的环境！一定要用gitbash！

总结一下这俩（用到目前）的区别：gitbash用的是linux语法，快捷键是复制：shift+Insert，粘贴：ctrl+Insert

Nodejs

下载链接：nodejs.org/en/download/

装过，跳过

image-20251004111559094

二编：经常警告说当前版本略低于 Hexo 8.0.0 所需的最低版本（要求 >=20.19.0），所以可能大概以后升级一下吧

image-20251005151658564

Hexo

安装命令

1
npm install hexo -g

报了一大堆错，改成用管理员权限运行命令提示符就ok了

但是一测试又有问题

image-20251004114106190

应该是环境变量问题。查找npm的全局安装路径

1
npm config get prefix

image-20251004114255788

然后把路径添加到系统变量。进环境变量，选择系统变量，编辑Path，新建路径，添加npm的路径，确定。然后关闭当前命令行，打开一个新的再测试，OK了

image-20251004114623424

hexo依赖

1
npm install --save hexo-deployer-git

image-20251004114712087

后面重跑：

image-20251004211833110

配置SSH

生成一个RSA的SSH key。邮件地址是GitHub关联的邮件地址

1
ssh-keygen -t rsa -C "邮件地址"

有三次问题，一是保存key的路径，二是密码三是确认密码。全部回车表示默认…发现默认不了，保存路径有问题，是linux格式的，改成C:\Users\Anthon\.ssh\id_rsa（当然是错过一次才发现的），而且没有.ssh目录的话要先新建一个，不然会报错目录不存在

image-20251004145733689

然后进.ssh文件夹，复制id_rsa.pub（公钥）文件里的全部内容

image-20251004145752965

接着打开github主页，点击个人设置，点击左侧的SSH and GPG keys，点击New SSH key，Key里输入刚刚复制的内容，标题起一个，设置完成后点击Add SSH key

（很好，刚刚我发现我一直在cmd里运行命令，但是参考都是在gitbash里（晕）。算了反正都过来了，现在开始也不迟，在文件夹右键，选择open gitbash here，后面就在这执行命令）

然后测试：

1
ssh -T git@github.com

image-20251004151147330

使用-v参数开启详细模式排错

1
ssh -vT git@github.com

这里ssh客户端识别了RSA密钥。嗯但是其实没有看出别的什么，ds推测是因为OpenSSH 8.8及更高版本默认禁用ssh-rsa签名算法，所以换个Ed25519就可以了

image-20251004163242324

新生成一个Ed25519密钥

1
ssh-keygen -t ed25519 -C "your_email@example.com"

记得改位置

image-20251004162228287

然后去GitHub删掉旧密钥，添加上.pub的内容。再试，成功

image-20251004162201726

配置账号密码

1
2
git config --global user.name "liyunchen" #你的github用户名
git config --global user.email "xxx@163.com" #填写你的github注册邮箱

搭建博客

Hexo命令：

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

本地新建博客

gitbash进入博客的存放目录，初始化博客

1
hexo init

好吧，得在空目录里执行，后面才能加东西进去

image-20251004164434570

然后再重试，成功

image-20251004164716816

博客目录出现了：

image-20251004164834914

生成静态文件：

1
hexo g

image-20251004211404531

生成静态网页：

1
hexo s

模块兼容问题。项目中使用的 strip-ansi 模块新版仅支持 ES 模块，而 Hexo 或其部分依赖仍在使用 CommonJS 的 require() 语法来加载它，两者不兼容

image-20251004165746361

解决方案：锁定兼容版本。通过项目的 package.json 文件，强制将 strip-ansi 锁定到一个兼容 CommonJS 的旧版本。

打开目录里的package.json 文件，先看看本来有没有resolution字段，没有，新建一个，加入以下内容，保存。这里的 "6.0.1" 是明确支持 CommonJS 的 strip-ansi 版本

1
2
3
"overrides": {
  "strip-ansi": "6.0.1"
}

完成配置后，删除package-lock.json和node_module，重新安装依赖再试

1
npm install

image-20251004204327482

此时主包终于发现补兑，跑去在gitbash环境里重新运行了一些上面的命令（包括安装npm、hexo -v、安装hexo-deployer-git），一通乱搞OK了

image-20251004204038757

访问url可以看到

image-20251004204636973

部署到GitHub

新建一个仓库，仓库名必须是用户名.github.io。下面勾选README和public，点击create

image-20251004204856555

查看分支，是main

image-20251004205026425

编辑博客目录下的_config.yml。修改最后的deploy，branch看上面的分支是什么就填什么

1
2
3
4
deploy:
  type: git
  repository: https://github.com/Mintind/Mintind.github.io.git
  branch: main

至于repository这个链接，可以在仓库里点clone，选择https或者ssh，复制这个链接

image-20251004210630668

完成之后保存。发布

1
hexo -d

image-20251004211854079

在浏览器访问https://mintind.github.io/

嗯发现是白的

image-20251004212305562

（此处经历了回去在gitbash里装hexo-deployer-git）

变动了之后可以clean一下重新生成和部署

1
2
hexo clean && hexo generate
hexo deploy

这回不一样了

image-20251004212603266

image-20251004212615690

再访问，有了

image-20251004212632664

添加博客

添加新博客

1
hexo new 'chenge-first-blog'

image-20251004213543006

在blog\source\_posts目录下就可以看到这篇博客的md文件，可以进行编写（从其他地方粘过了也可以）

image-20251004214254402

这里学到了一个技巧，可以在博客里加上一段

1
<!--more-->

这样在点击more才会查看文章全部内容

图像路径问题

因为md文件只是借用本地图片，图像都需要有个保存路径，Typora默认的保存路径在default/picture下，但是写博客的这些md文件所用的图片需要上传，要保存在博客目录下，所以建议把图像设置成保存为相对路径。

打开一个md文件，点左上角文件-偏好设置，点击图像，插入图片时，选择复制图片到./${filename}.assets文件夹，个人感觉这样最方便也最好找

image-20251004214828290

设置完了再插入图片时，就会看到博客所在目录变成了这样：

image-20251004215041864

部署新博客

编写完成后，再次生成和部署

1
2
hexo g
hexo d

再访问博客地址。嗯能看到新博客了，但是问题还挺多的，首先就是图片无法显示

image-20251004220909988

基础设置&显示图片

进仓库看这篇新博客的html文件，发现url有问题

image-20251005144135434

查资料发现跟_config.yml的设置有关，就来都来了，更新一下基础设置。打开_config.yml，设置Site和URL。url换成自己博客地址。其他的看着设置就行

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: Mintind's Blog
subtitle: ''
description: ''
keywords:
author: Mintind
language: en
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://mintind.github.io

参考：https://juejin.cn/post/7273435095922114560

安装 Hexo 资源文件夹插件。这个插件会在使用hexo n命令生成新博客时自动建一个与文章同名的文件夹来存放资源

1
npm install hexo-asset-image --save

image-20251005143257347

嗯后面说这个插件有问题还是装这个：

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

然后把_config.yml中的post_asset_folder设置为true

image-20251005143329312

因为这个插件使用的文件夹是与文章同名，那么Typora的图像保存路径也要改一下了，改成./${filename}

image-20251005145808156

记一下：如果图片采用网络地址，在文章开头的front-matter下添加一行（目前还没用上）

1
<meta name="referrer" content="no-referrer"/>

清理并重新生成部署

这回生成和部署的时候能看到上传图片了：

image-20251005150845253

image-20251005150909066

再查看html文件，路径正确了

image-20251005152036583

再查看博客网页，如果发现路径没刷新的话可能是用的缓存，可以打开开发者模式，禁用缓存再刷新一下。图片成功显示了。嗯就是图片名丑丑的但我实在暂时没有给图片命名的习惯

image-20251005152201756

关于图片和md文件迁移

如果之前图片存错路径了，可以新建一个md文件，全部复制粘贴过来，会自动生成新的图片文件夹（已经做好几次了T^T）