写在前面

这篇博客主要是总结一下使用Hexo博客的经验，部署到Github Pages并自定义域名，和语雀实时同步功能尚未实现，只写了批量导出语雀知识库markdown文件到本地。

大致步骤

  1. 安装nodejs，npm
  2. 安装hexo，本地部署
  3. 创建仓库
  4. 安装Git并绑定GitHub
  5. 发布网站
  6. 自定义域名
  7. 博客高级样式
  8. 同步语雀

    本地搭建HEXO

    安装nodejs，npm

    链接：https://nodejs.org/en/download/ ，新版nodejs已经集成了npm
    nodejs.png
    在cmd输入以下两条指令测试是否安装成功
    1. node -v
    2. npm -v
    image.png

    安装hexo，本地部署

    首先在电脑上新建一个文件夹，用于存放hexo框架和以后写的博客文件，使用npm命令安装hexo
    npm install -g hexo-cli

    初始化博客系统

hexo init blog

可能会遇到Bug：’hexo’ 不是内部或外部命令，也不是可运行的程序

解决方案：通过npm config get prefix 获取到npm的安装目录，将其添加到PATH中
演示：

D:\Code\chuanxz-hexo>npm config get prefix
C:\Users\yihan\AppData\Roaming\npm

image.png
可以通过hexo -v查看hexo版本，判断是否安装成功

D:\Code\chuanxz-hexo>hexo -v
hexo-cli: 4.3.0
os: win32 10.0.22000
node: 16.13.2
v8: 9.4.146.24-node.14
uv: 1.42.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.45.1
napi: 8
llhttp: 6.0.4
openssl: 1.1.1l+quic
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

快速创建一篇测试博客

hexo new test_blog 
hexo g
hexo s

以上三条命令的作用分别是：创建新博客、生成网站、开启本地预览

成功后在网页端访问4000端口如下效果，http://localhost:4000/
image.png

完成以上操作，仅可以在本地使用hexo博客系统了，接下来就是发布到网上。

发布到Github

创建仓库

在github上新建一个仓库，名字必须是：用户名.github.io
image.png

安装Git并绑定GitHub

Git是开源的分布式版本控制系统，用于将本地博客上传到GitHub
链接：https://git-scm.com/download/win ，Git教程

鼠标右键或者直接在菜单栏处使用GitBash
image.png
设置用户名和密码

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

生成ssh文件，连敲三个回车即可

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

找到本地的ssh文件，我的路径：C:\Windows\System32\drivers\etc
在GitHub的Setting里新建一个SSH Key，Key为刚刚的ssh文件内容
image.png
image.png

用GitBash测试公钥是否配置成功，看到success就ok了
image.png

发布网站

本地的Git已经绑定到GItHub上，接下来就是把hexo博客发布上去。
首先修改blog下的_config.yml配置文件，该文件用于将hexo和Github关联，repo为仓库的完整路径（下图箭头）
image.png
image.png

deploy:
  type: git
  repo: https://github.com/YourCat/YourCat.github.io.git
  branch: master

该配置用于告诉hexo博客部署在哪里，我们还需要用npm安装一个部署插件，在cmd中输入

npm install hexo-deployer-git --save

这时在GitBash输入以hexo下三条命令发布博客

hexo clean 
hexo g 
hexo d

这一步经常会遇到如下两种问题

OpenSSL SSL_read: Connection was reset, errno 10054
Failed to connect to github.com port 443: Timed out

这是由网络不稳定导致的连接超时，网上有许多解决方案，这个时候你会发现无法访问GitHub的网站了。
暴力的话重复几次上述三条命令也可以成功。
发布成功是如下这样子，同时在github的仓库里可以看到本地的hexo博客已经过来了
image.png
image.png

这个时候已经可以在外网访问到博客了，差不多成功了~
image.png

其他步骤

自定义域名

完成以上的操作已经可以使用GitHub提供的域名xx.github.io访问到我们的博客项目了，但是作为一个新世纪的弄潮儿，怎么能够没有自己的个性化域名呢~

  1. 首先在阿里云购买一个域名，买买买的事情就跳过了，直接进到域名控制台解析域名

image.png
添加如下两条记录，
记录：www，类型：CNAME，记录值：xx.github.io
记录：@，类型：A，记录值：ip地址（ping 到xx.github.io查看）
image.png

  1. 在GitHub的仓库里设置自己的域名，Settings->GitHub Pages

image.png
ps：以上警告就是因为域名解析没配置好，需要一定时间生效，先继续下一步配置
image.png解析成功！

  1. 在本地文件夹下创建CNAME文件，内容为域名（防止后面更新博客同步到Github后域名失效）

image.png
三部曲后访问自己的域名

hexo clean
hexo g
hexo d

image.png

博客高级样式

默认的主题或许过于单调，弄潮儿又来更换主题了，在blog文件下输入以下命令

git clone https://github.com/fluid-dev/hexo-theme-fluid themes/fluid

image.png
好看的主题哪来的？安利安利-> here <-感谢(●’◡’●)

三部曲！这里我又报错了！Spawn fiaed…
image.png
直接导航->解决方案 一次不行多来几次…
访问新主题！阅读README和官网食用新主题！
大致步骤：
1.在hexo目录的_config.yml文件中指定主题

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

2.在fluid目录的_config.yml文件中修改配置信息（首页的标题，句子，背景图…）
3.第一次使用新建关于页

hexo new page about

在/source/about/index.md下添加layout属性
---
title: about
date: 2020-02-23 19:20:33
layout: about
---

image.png

上边是根据文档修改配置文件后的最终效果图~太美了😜

某年某月我又换了Butterfly这款主题：https://butterfly.js.org
使用的步骤教程也都在它的官网里了（说实话我也没想到这玩意复杂到写了七篇教程，但确实很有意思）
Butterfly 安裝文檔(一) 快速開始
Butterfly 安裝文檔(二) 主題頁面
Butterfly 安装文档(三) 主题配置-1
Butterfly 安裝文檔(四) 主題配置-2
Butterfly 安裝文檔(五) 主題問答
Butterfly 安裝文檔(六) 進階教程
Butterfly 安裝文檔(七) 更新日誌

同步语雀

有点难，尚在研究，挂一个教程…
yuque_diagram.jpg

导出语雀知识库->md

  1. 安装yuque-hexo，该工具的作用是将语雀的知识库批量导出hexo

    //先安装 yuque-hexo
npm i -g yuque-hexo

  2. 修改yuque-config，用于指定扒取的语雀账户&知识库

    {
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
 "build": "hexo generate",
 "clean": "hexo clean",
 "deploy": "hexo deploy",
 "server": "hexo server",
 "sync": "yuque-hexo sync",
 "clean:yuque": "yuque-hexo clean"
},
"yuqueConfig": {
 "postPath": "source/_posts",
 "cachePath": "yuque.json",
 "mdNameFormat": "slug",
 "adapter": "markdown",
 "concurrency": 5,
 "baseUrl": "https://www.yuque.com/api/v2",
 "login": "****",
 "repo": "****",
 "token": "***********************",
 "onlyPublished": true,
 "onlyPublic": true
},

    三处*处需要填写的内容分别对应下面语雀图片的箭头处

image.png
image.png

  1. 本地调试

出于对知识库安全性的调整，使用第三方 API 访问知识库，需要传入环境变量 YUQUE_TOKEN，在语雀上点击 个人头像 -> 设置 -> Token 即可获取。传入 YUQUE_TOKEN 到 yuque-hexo 的进程有两种方式：

  • 设置全局的环境变量 YUQUE_TOKEN
  • 命令执行时传入环境变量
    • mac / linux: YUQUE_TOKEN=xxx yuque-hexo sync
    • windows: set YUQUE_TOKEN=xxx && yuque-hexo sync


本来以为有之前搭建博客的基础，换成hexo框架重新弄弄只是分分钟的事情，没想到却磕磕绊绊折腾了大半天，中间可能省略一些粗心的bug（尽可能都列出来），bug虽小也卡了好久，接下来要开始好好写博文了。

参考&推荐

https://github.com/x-cold/yuque-hexo
教程：hexo× 语雀 实现云端富文本写作