hexo静态博客搭建 – 苏子子苏

wordpress主题丰富，生态良好，官方提供docker镜像，部署简单，但是动态博客占用相对较多，Hexo这类静态博客可以部署在github上，节省了服务器资源，是个不错的选择。

步骤逻辑

本地环境构建，本地环境构建完成后，其实就可以修改预览我们的博客了，但是不能够在公网访问，所以就需要执行下一步推送到github
推送github，因为我们会得到一个github相关的域名以便于可以从公网访问，但是github在国内是被墙的，所以就需要执行下一步在cloud pages上部署
在cloudflare pages上部署，这样做是为了绑定域名，以便于国内也可以访问

本地环境构建

本地环境为windows环境，需要安装git和node.js。

node.js:下载
git: 下载

在cmd窗口或者git中使用npm -v和node -v验证node.js是否安装成功

在桌面运行git程序，点击Open Git Bash here，然后进入cd d:到D盘(D盘为博客的目录，下面会用到)

全局安装hexo框架

$ npm install -g hexo-cli

验证hexo是否安装成功

$ hexo -v
hexo-cli: 4.3.1
os: win32 10.0.22631
node: 21.7.1
acorn: 8.11.3
ada: 2.7.6
ares: 1.27.0
base64: 0.5.2
brotli: 1.1.0
cjs_module_lexer: 1.2.2
cldr: 44.1
icu: 74.2
llhttp: 9.1.3
modules: 120
napi: 9
nghttp2: 1.60.0
nghttp3: 0.7.0
ngtcp2: 1.3.0
openssl: 3.0.13+quic
simdjson: 3.7.0
simdutf: 4.0.8
tz: 2024a
undici: 6.6.2
unicode: 15.1
uv: 1.48.0
uvwasi: 0.0.20
v8: 11.8.172.17-node.20
zlib: 1.3.0.1-motley-40e35a7

初始化hexo文件夹，folder 为在D盘下面新创建的目录，即为博客的目录

$ hexo init <folder>

安装 hexo 依赖包，以后所有的指令都会在folder文件夹下执行

$ cd <folder>
$ npm install

编译静态文件到public文件夹，自动生成public文件夹

$ hexo g

启动服务，用于预览主题

$ hexo s

然后在浏览器输入http://localhost:4000 即可预览Hexo博客。

Github配置

注册github账号，新建仓库，仓库名称为： <用户名.github.io>

生成SSH密钥，在git bash中输入下面命令

git config --global user.name "你的GitHub用户名"
git config --global user.email "你注册github的邮箱"

生成密匙，在git bash中输入下面命令，一路回车即可

ssh-keygen -t rsa -C "你注册github的邮箱"

执行完成后，会出现下面一段内容，密匙保存在/c/Users/meng9/.ssh文件夹中，需要复制id_rsa.pub中的内容

$ ssh-keygen -t rsa -C "[email protected]"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/meng9/.ssh/id_rsa):
Created directory '/c/Users/meng9/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/meng9/.ssh/id_rsa
Your public key has been saved in /c/Users/meng9/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:mUFmwEzA4DLky/4KFQYzsbPiBPsILgNKrdRb1Z2BHck [email protected]
The key's randomart image is:
+---[RSA 3072]----+
|=o.o.=o.+ +oo    |
|o*  . o+..Eo     |
|*.+    ... o     |
|o+.  .  +        |
|**.o .  S        |
|%+. o            |
|*=..             |
|o..              |
| ...             |
+----[SHA256]-----+

添加github SSH Key，点击Settings，再左侧点击SSH and GPG keys，右上角点击New SSH key，把上一步复制的内容粘贴到Key文本框中

验证是否成功，执行 ssh -T [email protected]，输入yes回车即可。

The authenticity of host 'github.com (20.20.243.169)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvsF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
Hi ximing! You've successfully authenticated, but GitHub does not provide shell access.

编辑_config.yml文件，在文件末尾替换deploy以下内容

deploy:
  type: git
  repo: https://github.com/你的github用户名/你的github用户名.github.io.git,main

安装推送插件

npm install hexo-deployer-git --save

清理缓存，重新生成静态文件，推送github，会有一个connection to gthub认证的提示，按照提示操作即可

hexo clean && hexo g && hexo de

Cloudflare pages部署

在pages页面点击“连接到 Git” ,如果未显示您的存储库，请在 GitHub 上为 Cloudflare Pages 应用配置存储库访问权限。构建设置中按照下面图片填写即可

部署完成后，在自定义域中绑定域名，这样就可以使用自己的域名访问你的博客了。如果你的文章有修改的需要，只需要每次在本地Git bash环境中重新执行下面命令就行

hexo clean && hexo g && hexo de

即可重新推送到 GitHub 仓库，Cloudflare Pages 将会自动抓取仓库内容，生成网页。

安装主题

安装butterfly主题

博客目录下git bash 输入命令

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

安装渲染器

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

修改主题

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

更新推送

清理缓存，重新生成静态文件，推送到github的命令，每次更新完内容执行此命令

hexo clean && hexo g && hexo de

装饰博客

修改菜单

以buttetfly主题为例，在 themes->butterfly->_config.yml 文件中找到 menu，有#号代表显示，无#号代表不显示

menu:
  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

像fas fa-home和fas fa-folder-open都是图标，图标网址为：https://fontawesome.com/v4/icons/

添加页面

我们的菜单中有个about，但是默认没有对应的页面，我们需要在about菜单下新建一个页面显示。
博客目录下，git bash 输入下面命令

hexo new page about

会生成source->about->index.md文件，编辑index.md文件，新加入type: "about"，最下面可以输入内容。

---
title: about
date: 2024-03-17 15:23:32
type: "about"
---

清风明月本无价，可惜只值四万钱。
小舟从此逝，江海寄余生。

更改顶部图片显示

这里做一下说明，disable_top_img这个值为false时，显示顶部图片，true则相反。index_img则为home顶部图片的地址，输入相应的url即可。下面则为各种不同菜单选项的顶部图片显示，比如tag这个菜单选项，当设置一个图片地址时，点击tag就会在顶部出现相应的图片。总之，每个菜单选项都可以设置顶部图片。


# Avatar (頭像)
avatar:
  img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
  effect: false

# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img: https://cdn.pixabay.com/photo/2023/10/23/17/10/landscape-8336497_1280.jpg

# If the banner of page not setting, it will show the top_img
default_top_img:

# The banner image of archive page
archive_img:

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:

写文章

git bash输入下面命令

hexo n  我的第一篇文章

创建完成后，会有提示，INFO Created: D:\hexo\source\ _posts\我的第一篇文章.md，去相应的文件夹打开编辑即可。

遇到的问题

在执行npm install hexo-deployer-git --save 这个命令时会报下面的错误，原因为网络超时，你懂的。

npm ERR! Invalid response body while trying to fetch https://registry.npmjs.org/with: Idle timeout reached for host `registry.npmjs.org:443`

尝试更换淘宝源，执行npm config set registry https://registry.npm.taobao.org这个命令时，接着又报证书过期的错误

npm ERR! request to https://registry.npm.taobao.org/hexo-renderer-pug failed, reason: certificate has expired

无奈又换回了默认源，执行npm config set registry https://registry.npmjs.org/ 换回默认源之后，这次使用https代理解决，简单省事。就是在cmd或者git窗口中配置代理，配置代理只对当前窗口有效，所以不用担心影响全局。

CMD窗口设置如下，直接在cmd窗口运行下面命令
SET HTTPS_PROXY=http://192.168.50.106:7890
SET HTTP_PROXY=http://192.168.50.106:7890

Git窗口设置如下，直接在git窗口运行下面命令
export HTTPS_PROXY=http://192.168.50.106:7890
export HTTP_PROXY=http://192.168.50.106:7890

测试是否生效，有返回内容代表代理有效，不要使用ping，因为使用的协议不同，是ping不通的。

curl google.com

这样网络的原因就解决了。设置代理请参考：如何在linux上设置代理
推送到github后如果遇到404的问题，检查_config.yml文件是否有语法错误。还有就是github仓库不能设置为私有，否则也会遇到404错误，这时需要重新推送github才能使用github域名打开网站。

最好每次在git bash窗口中都设置代理，要不然每次重新推送github会出现下面错误fatal: unable to access 'https://github.com/suzigfu/suzigfu.github.io.git/': OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 0

warning: in the working copy of '2024/03/13/hello-world/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/2024/03/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/2024/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'archives/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'css/index.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/main.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/search/algolia.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/search/local-search.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/tw_cn.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'js/utils.js', LF will be replaced by CRLF the next time Git touches it
[master dfda32d] Site updated: 2024-03-14 08:50:18
 5 files changed, 46 insertions(+), 38 deletions(-)
fatal: unable to access 'https://github.com/suzigfu/suzigfu.github.io.git/': OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 0
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
    at ChildProcess.<anonymous> (D:\hexo\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:51:21)
    at ChildProcess.emit (node:events:519:28)
    at cp.emit (D:\hexo\node_modules\cross-spawn\lib\enoent.js:34:29)
    at ChildProcess._handle.onexit (node:internal/child_process:294:12)