1.1 本地环境

在电脑上面安装：

安装完毕以后，可以在 cmd 里面通过：node -v、npm -v 和 git –version 查看安装的版本。

1.2 github 准备

1.2.1 注册 github

（略）

1.2.2 本地连接 gihub

新建本地文件夹 hexo，然后右键选择 Open Git Bash Here，然后在终端里输入：

1
2
git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 邮箱"

创建 ssh 密钥：

1
ssh-keygen -t rsa -C "你的 GitHub 邮箱"

一路回车就行。然后进入 C:\Users\ 用户名 .ssh 目录，复制 id_rsa.pub 里的内容。
回到 GitHub，进入【Settings】，选择左边栏的【SSH and GPG keys】，点击【New SSH key】，Title 随便取，然后把 id_rsa.pub 里面的内容到复制到 Key 中，点击【Add SSH key】。
然后在在 Git Bash Here 界面中验证，结果如下：

1
2
ssh -T git@github.com
Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.

1.2.3 创建新的 github 仓库

在自己 GitHub 的主页 repository 中点击右上角的【New】，填写基本信息：

  • Repository name 中输入用户名.github.io，一定要是这个名字！
  • 勾选 Add a README file

填好后点击 Create repository 创建仓库。

访问 https://用户名.github.io 可以看到默认界面。

1.3 hexo 准备

在刚刚已经创建好的文件夹【hexo】内，同样右键点击 Open Git Bash Here，然后使用 npm 安装 Hexo。在命令行中输入：

1
npm install -g hexo-cli

由于网络问题，安装时间可能会有点久。
有的教程可能会提示先修改源：

1
npm config set registry https://registry.npm.taobao.org

我修改后却出现安装没有响应的情况，因此要修改~/.npmrc，把源改回去：

1
registry=https://registry.npmjs.org/

安装成功后查看版本：

1
hexo -version

1.4 初始化博客

创建好的 hexo 文件夹内，再新建一个文件夹【myblog】用来存放 hexo 博客程序。
在终端输入：

1
2
3
hexo init # 初始化hexo
npm install # 安装组件
npm install hexo-renderer-pug hexo-renderer-stylus --save # 安装插件和渲染器

时间可能会很久。
完成后执行生成页面：

1
hexo g   # 生成页面

启动本地 web 服务器：

1
hexo s   # 启动预览

访问 http://localhost:4000 就可以看到了。如果 4000 端口被占用了，可以运行 hexo server -p 5000 更改端口号为 5000（或者是其他端口）后重试。

1.5 提交到 github

先安装 hexo-deployer-git：

1
npm install hexo-deployer-git --save

然后修改_config.yml 文件末尾的 Deployment 部分，repo 地址填的是仓库 ssh 链接地址：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:xxx/xxx.github.io.git
  branch: main

还有一种方式就是直接使用 git 命令。
首次提交：

1
2
3
4
git init
git add .
git commit -m "Initial commit"
git push -u origin main

后续更新：

1
2
3
4
5
6
git add .

git commit -m "Initial commit"

git push -u origin main

为防止之后 cloudflare pages 在初始化时找不到主题的 url，我们需要在根目录新建一个文件，取名 .gitmodules ，写入以下内容：

1
2
3
[submodule "themes/LiveForCode"]
path = themes/LiveForCode
url = git@github.com:first19326/Hexo-LiveForCode.git

运行：

1
2
hexo clean # 清缓存，有的教程用hexo c但是我的不能执行
hexo d # 部署 hexo deploy

稍等片刻就可以访问到最新的 xxx.github.io 博客网站了。

一键本地启动：hexo clean && hexo g && hexo s

一键部署：hexo clean && hexo g && hexo d

1.6 修改主题

在hexo 官方主题网站挑选自己喜欢的主题。我选的是liveforcode。跟着教程一步步操作就可以了。

主题的添加也有两种方式。

1.6.1 克隆最新版本

在终端窗口下，定位到 Hexo 站点目录下。使用 Git Checkout 代码：

1
2
cd your-hexo-site
git clone https://github.com/first19326/hexo-liveforcode

将克隆下来的文件夹中的 LiveForCode 文件夹移动至站点的 themes 目录下，并将 source 文件夹中的 about、category、comment、donate、friend 以及 tag 文件夹移动至 Hexo 站点目录下的 source 文件夹中。这些文件夹分别对应着 关于 、 标签 、 留言板 、 赞赏 、 友情链接 以及 分类 页面，其中的 index.md 中的内容为各个页面显示的内容，大家可以根据自己的情况进行修改。

clone 的时候遇到一个问题，报错：

1
2
error: RPC failed; curl 18 transfer closed with outstanding read data remaining
error: 723 bytes of body are still expected

解决方案如下：

  • 加大缓存区（大概 500m）：git config –global http.postBuffer 524288000
  • 少 clone 一些，增加参数：【–-depth 1】
  • clone http 方式换成 SSH 的方式，即： https:// 改为 git://

1.6.2 下载稳定版本

前往 LiveForCode 版本发布页面。
选择你所需要的版本，下载 Download 区域下的 Source Code (zip) 到本地。
解压所下载的压缩包，并将解压后的文件夹中的 LiveForCode 文件夹移动至站点的 themes 目录下，并将 source 文件夹中的 about、category、comment、donate、friend 以及 tag 文件夹移动至 Hexo 站点目录下的 source 文件夹中。这些文件夹分别对应着 关于 、 标签 、 留言板 、 赞赏 、 友情链接 以及 分类 页面，其中的 index.md 中的内容为各个页面显示的内容，大家可以根据自己的情况进行修改。

使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新，而不用再次下载压缩包替换。

1.7 私有仓库+cloudflare 部署

参考《hexo + github + cloudflare》

为了防止个人信息泄露，可以使用 cloudflare 部署。用 qq 邮箱能注册免费账户。
打开 cloudflare 的主页，在左下角找到【Workers 和 Pages】，点击【创建应用程序】然后选择【Pages】，【连接 Github】，然后授权，选择仓库以及分支。
构建配置命令这里一定要输入 npx hexo generate 。
添加环境变量 NODEVERSION 和 NPMVERSION ，选择你电脑里的版本号：

1
2
3
4
5
6
7
OTP5Q2Q0 MINGW64 /d
$ node -v
v21.6.1

OTP5Q2Q0 MINGW64 /d
$ npm -v
8.16.0

部署，大功告成，顺利的话，部署完成之后打开 cloudflare 给的链接，就能看到和本地调试一样的内容了。

为了更好记，更有个人的标记，这时候就要用到最开始准备的域名了，在项目设置找到自定义域名。

未完待续。

1.8 编写文章

1.8.1 新建文章

新建文章的命令：

1
hexo new layout "title"

layout 是文章的布局，默认为 post，可以先不写。
title 是文章的标题，也是文件的名字，存储在 source/_posts 下。

遇到一个问题，我的 vscode 装了插件，会自动格式化 md 格式的文本，在 scaffolds 下对应的是新建文章类型的模板，比如 new post,new draft,new page。vscode 会自动格式化里面的 js 代码使花括号之间增加空格。导致新建文章的模板内容是[object null]。把 scaffolds 文件夹下面的文件格式随便改成 vscode 无法识别的类型即可。

1.8.2 设置密码访问

安装插件：

1
npm install hexo-blog-encrypt

添加字段到文章信息头,相关字段：

  • password：访问密码
  • abstract：用于设置加密文章显示的摘要。
  • message：输入密码提示。
  • wrong_pass_message: 输入错误提示。
1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: Password Test
date: 2019-12-21 11:54:07
abbrlink: 851269546
tags:
  - hexo
categories:
  - 教程
password: 1234
abstract: "用于设置加密文章显示的摘要。"
message: "输入密码提示。"
wrong_pass_message: "输入错误提示"
---

注意冒号要用半角的。
在密码输入正确后，可能有缓存，后面无论打开几次都能直接看到文章了，除非改密码或者本地浏览器清空了缓存。

分别为每篇文章设置密码，虽然很灵活，但是配置或者修改起来非常麻烦。为此，可以通过设置统一配置来实现全局加密。

通过添加指定 tag 的方式，可以为所有需要加密的文章添加统一加密操作。只需要在需要加密的文章中，添加设置的 tag 值 即可。

在 Hexo 主配置文件 _config.yml 中添加如下配置：

1
2
3
4
5
6
7
8
9
# Security
encrypt: # hexo-blog-encrypt
  silent: true
  abstract: 这是一篇加密文章，需要密码才能继续阅读。
  message: 当前文章暂不对外可见，请输入密码后查看！
  tags:
  - {name: private, password: "hello"}
  wrong_pass_message: 抱歉，您输入的密码错误，请检查后重新输入。
  wrong_hash_message: 抱歉, 当前文章不能被校验, 不过您还是可以看看解密后的内容。

表示当在文章中指定了 private 这个 tag 后，该文章就会自动加密并使用对应的值 hello 作为密码，输入密码后才可查看。

相应的文章头部设置：

1
2
3
4
5
6
---
title: Password Test
date: 2019-12-21 11:54:07
tags:
    - private
---

期间遇到一个问题，password 字段的内容本来可以不用双引号的，但是如果是纯数字，将无法校验通过，所以最好都带上双引号。

1.8.3 添加音乐

音乐播放器功能是使用 APlayer.js 以及 Meting.js 实现，配置详情参见 APlayer、Meting。
主题中有两种实现方式，一种是 APlayer.js 结合 Meting.js 的实现方式，另外一种是 APlayer.js 单独的实现方式，两种实现方式各有优缺点：
第一种实现方式配置简单，并且可以从各个音乐平台解析音乐。由于是从各个平台解析，故而不是特别稳定，并且在 IE 浏览器中需要特殊设置。
第二种实现方式配置相对复杂，需要单独提供音乐相关信息，但是十分稳定，且对于 IE 浏览器也可兼容，无需特殊配置。
主题中默认以 第一种实现方式 实现，第二种实现方式为备选方案，在第一种实现方式出现问题的时候，可以切换到第二种实现方式，保证网站的稳定运行。
针对第二种实现方式需要 注意 的地方：
APlayer.js 是基于 HTML 5 Audio 实现的一款音乐播放器插件，故而支持的音频格式有限，包括：MP3、Wav 以及 Ogg 格式，并且不同浏览器对这三种音频格式的支持也各有不同，详细信息大家参考 HTML5 Audio(音频)。如果音频格式不支持，可以通过音频转换工具进行格式转换。
APlayer.js 是通过 XMLHttpRequest 获取歌词文件，所以存在 跨域 问题。可以考虑将歌词文件放在主题文件夹 LiveForCode 的 source 文件夹下（ 注意 ：这里的 source 文件夹不是 Hexo 站点目录下的 source 文件夹），解决跨域的问题。由于 jsDelivr 在响应请求的时候，会添加 access-control-allow-origin: * 的响应标头信息，故而不存在跨域问题，也可以使用这种方式。不过需要注意的是，jsDelivr 对资源的大小有所限制，不可以超过 50M 。
APlayer.js 获取到歌词后会将歌词中的空白行去掉，由于是单行显示歌词，所以有译文的双行歌词，只会显示下面一行歌词，可以将译文歌词拼接在歌词原文的后面解决这个问题。

修改\themes\LiveForCode_config.yml 的 autoplay 字段，想要音乐自动播放，但是怎么改都不成功。最后发现是浏览器的行为，需要在设置成允许媒体自动播放。

1.8.3 添加图片

标准 md 语法是alt

alt 是图片未成功加载的提示文字，title 是悬浮显示的额外文字

绝对路径本地引用

当 Hexo 项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过 markdown 语法访问它们。

1
![](/images/image.jpg)

图片既可以在首页内容中访问到，也可以在文章正文中访问到。

相对路径本地引用

图片除了可以放在统一的 images 文件夹中，还可以放在文章自己的目录中。文章的目录可以通过站点配置文件_config.yml 来生成。
post_asset_folder: true
将_config.yml 文件中的配置项 post_asset_folder 设为 true 后，执行命令$ hexo new post_name，在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name。将图片资源放在 post_name 中，文章就可以使用相对路径引用图片资源了。

1
![](image.jpg)

标签插件语法引用

这种相对路径的图片显示方法在博文详情页面显示没有问题，但是在首页预览页面图片将显示不出来。如果希望图片在文章和首页中同时显示，可以使用标签插件语法。

1
2
3
4
# 本地图片资源，不限制图片尺寸
{% asset_img image.jpg This is an image %}
# 网络图片资源，限制图片显示尺寸
{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 200 400 vi-vim-cheat-sheet %}

虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。

图片插件

插件 hexo-renderer-marked 解决了这个问题。可以只用 npm install hexo-renderer-marked 命令直接安装，之后在 config.yaml 中更改配置如下：

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。插入的时候要空行，否则会出现段落格式的对齐问题。

调整图片大小

方法一：嵌入 HTML 代码

使用 img 标签

1
<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />

等比缩放：
使用百分比只定义宽即可等比例缩放。注意：宽度相对于图片所在父级窗口。

1
<img src=https://img-blog.csdnimg.cn/20200822014538211.png width=60% />

固定宽高：

1
<img src=https://img-blog.csdnimg.cn/20200822014538211.png width=200 height=100 />

如果需要居中的话只要在外面包围 div 标签即可

方法二：使用支持图片大小更改操作的 Mou 编辑器

使用如下语法

1
![](./pic/pic1_50.png =100x100)

注意: =前有个空格，可以只写宽度。

个人感觉最好用的还是在文章头部写入：

1
2
3
4
5
6
<style>
img{
    width: 60%;
    padding-left: 20%;
}
</style>

__END__