简介

注意事项：本文中部分操作会涉及到网络问题，请确保电脑能正常访问 github 或 google

Hexo 是一个博客框架，可以把平时写的 Markdown 笔记转换成对应的 html,然后部署到自己的服务器，方便查看，由于之前的域名到期了，之前通过阿里云的 oss 对象存储的图片无法访问了，索性就重新再部署一下，并把所有的版本给更新到最新版本，同时完善 docker 构建发布到服务器

环境准备

安装 node 环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 安装 node 我直接通过 asdf 进行安装的并设置全局版本
asdf plugin-add nodejs
asdf install nodejs latest
asdf global nodejs latest
# 查看当前的版本 (本地为 v20.5.1)
node -v

# 安装 pnpm (有 npm 也行)
npm install pnpm -g
# 查看当前 pnpm 版本 (本地为 8.6.12)
pnpm -v
# 查看当前 pnpm 源 (如果不是国内的自己设置一下)
pnpm config get registry
# 如果不是国内的，执行下面命令设置一下，防止后面下载依赖包过慢（这个是淘宝的）
pnpm config set registry https://registry.npmmirror.com

安装 hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 全局安装 hexo-cli 脚手架
pnpm install hexo-cli -g
# 如果是第一次使用会提示  ERR_PNPM_NO_GLOBAL_BIN_DIR  Unable to find the global bin directory  Run "pnpm setup" to create it automatically, or set the global-bin-dir setting, or the PNPM_HOME env variable. The global bin directory should be in the PATH. 
# 按照提示执行 pnpm setup 这个是要给自动设置一下全局的 全局 bin 目录
# 自动设置（也可执行其它命令指定,我用的自动的给默认到 /Users/ada/Library/pnpm 路径了
pnpm setup
#To start using pnpm, run:  source /Users/ada/.zshrc  执行完后会有提示，按照提示执行命令
source /Users/ada/.zshrc
# 安装验证(安装成功了会输出对应的信息)
hexo -v
# 初始化创建一个博客 名字自己起（就是会创建一个文件并且给初始化好模板）
hexo init hexo-ada-blog
# 进入该文件夹
cd hexo-ada-blog
# 安装依赖
pnpm install
# 启动服务 也可以通过简写 hexo s 启动，启动默认本地 4000 端口，可通过链接进行访问
hexo server
# 指定端口
hexo server -p 4001

访问 hexo

更换主题

默认的主题比较丑，这里推荐更换为 butterfly 这个主题

1
2
3
4
title: 'GitHub - blinkfox/hexo-theme-matery: A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com'
image: 'https://opengraph.githubassets.com/2b13c08198b30a3f53526a4931316200601e41b9751a5f004be924b2e7b3e78c/blinkfox/hexo-theme-matery'
description: 'A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com - GitHub - blinkfox/hexo-theme-matery: A beautiful hexo blog theme with…'
url: 'https://github.com/blinkfox/hexo-theme-matery'
1
2
3
4
# 通过 git 下载，或者上面链接访问项目地址下载 master 分支进行解压
cd /Users/ada/workspace/automatex/hexo-ada-blog/themes
# git 下载
git clone https://github.com/blinkfox/hexo-theme-matery.git

下载主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery
切换主题

下图就是切换主题的前后对比，根据个人喜好选择对应主题(如果要选择其它的主题也都是一样的流程)

1️⃣下载主题到 theme 下 2️⃣修改配置为主题的名称(每个主题都有对应的教程和文档)

image.png

上传Github

1️⃣ 将上面的文件上传至 Github 并拉取一个开发分支(这样做的目的是为了我们写笔记，修改配置等都在开发分支上进行操作，没有问题了就合到主分支上)
2️⃣ 为什么选择 Github 而不是国内的其它代码托管平台，是因为我想使用 github 的 workflowe 功能，我期望的是后期我从开发分支往主分支上合并的时候就自动触发一些功能（比如把我的原始笔记 Markdown 编译成 hexo 的 html 并推送到我的服务器上，这样就不用每次手动去上传）

上传 github

初始项目

在 source 下创建 about/index.md 文件 （第一次使用是没有的，需要自己创建）

1
2
3
4
5
6
---  
title: about  
date: 2019-10-25 00:00:00  
type: "about"  
layout: "about"  
---

在 source 下创建 categories/index.md 文件 （第一次使用是没有的，需要自己创建）

1
2
3
4
5
6
---  
title: categories  
date: 2019-10-25 00:00:00  
type: "categories"  
layout: "categories"  
---

在 source 下创建 tags/index.md 文件 （第一次使用是没有的，需要自己创建）

1
2
3
4
5
6
---  
title: tags  
date: 2019-07-19 16:40:27  
type: "tags"  
layout: "tags"  
---

在 source 下创建 404.md 文件（第一次使用是没有的，需要自己创建

1
2
3
4
5
6
7
---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

初始化必要 md 文件

新增笔记

把自己写的Markdown 笔记上传到 source/_posts 目录
上传笔记

基础配置

代码高亮

修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并将 prismjs.enable 的值设置为 true

1
2
3
4
5
6
7
8
9
10
11
12
highlight:  
  enable: false  
  line_number: true  
  auto_detect: false  
  tab_replace: ''  
  wrap: true  
  hljs: false  
prismjs:  
  enable: true  
  preprocess: true  
  line_number: true  
  tab_replace: ''

代码高亮

搜索

安装 hexo-generator-search 插件

1
2
# 安装依赖包 hexo-generator-search
pnpm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项

1
2
3
search:  
  path: search.xml  
  field: post

中文链接转拼音

如果你的文章名称是中文的建议安装 ，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接

安装 hexo-permalink-pinyin 插件

1
2
# 安装依赖包 hexo-permalink-pinyin
pnpm install hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项

1
2
3
permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

中文链接转拼音

文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，建议安装  hexo-wordcount插件

安装 hexo-wordcount 插件

1
pnpm install hexo-permalink-pinyin --save

在当前主题的 _config.yml 文件中 themes/hexo-theme-matery/_config.yml，将各个文章字数相关的配置激活即可

1
2
3
4
5
6
7
postInfo:
  date: true
  update: true
  wordCount: true # 设置文章字数统计为 true.
  totalCount: true # 设置站点文章总字数统计为 true.
  min2read: true # 阅读时长.
  readCount: true # 阅读次数.

统计激活效果

开启加密

如果有些文章是内部观看的，可以开启这个功能防止被别人看到了

1️⃣ 找到 themes/hexo-theme-matery/_config.yml 这个主题下的配置文件
2️⃣ 找到以下设置，并将 enable 设置为 true

1
2
3
4
verifyPassword:  
  enable: true  
  promptMessage: 请输入访问本文章的密码  
  errorMessage: 密码错误，将返回主页！

在文章中添加 password 字段，值为 SHA256 加密 后的密码
开启加密

优化定制

bilibili 嵌入

新增 js 脚本文件

1
2
3
4
hexo.extend.tag.register('bili',function(args){
    var src = args[0];
    return '<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"><iframe src="'+src+'" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;"> </iframe></div>';
});

新增 JS 文件

1
2
# {% bili B站的嵌入代码 %}
{% bili //player.bilibili.com/player.html?aid=676477776&bvid=BV1nU4y1g7M3&cid=435566224&page=5 %}

嵌入代码获取方式

自动部署

在本地电脑上执行ssh 命令生成 id_rsa.pub 与 id_rsa 文件

1
2
# 生成秘钥
ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa

生成秘钥

进入GitHub对应的项目生成 secret
image.png

上传公钥到服务器

1
2
3
4
cd ~/.ssh/
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys
cat ./id_rsa.pub >> ~/.ssh/authorized_keys

上传公钥到服务器

目前发现有问题，先暂停了，采用的其它方式