使用 Hexo 与 Github Page 搭建个人博客

原文章发布在个人的博客上：使用 Hexo 与 Github Page 搭建个人博客 | What was I thinking? (dawnfz-lenfeng.github.io)。

---

  
一次偶尔的机会，碰到了Yihui Xie | 谢益辉大佬的博客，第一反应是轻便！漂亮！能在一个世外桃源一般的地方表达自己，就像初遇本站架构 - Tan Jay | 唐 洁 (tang-jay.github.io)1里面所说，“我的心被狙中了”！一阵莫名的激动让我想创建一个自己的博客。
于是趁不多闲余时间，大约花了一个下战书的时间把本站构建起来，效率算高。总体来说难度不算大，因此总结一下踩到的坑和帮助过我的资料。
  准备工作

本地环境

在开始之前，请确保安装以下软件：

• Git: https://git-scm.com/
  
• Node.js: http://nodejs.cn/
  

按照提示直接安装即可。安装完毕以后，可以在 cmd 里面通过以下命令检查是否安装成功：

1. node -v
2. npm -v
3. git -v

复制代码

正确安装会输出书本号信息。
本地 ssh 毗连 Github

使用 ssh 毗连至 github 是步伐员最基本的操作，首先先确保自己拥有 github 账号。
打开 cmd 或者 powershell 面板，输入以下命令配置本机 ssh：

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

复制代码

连续回车后终极会生成文件至C:\Users\用户名\.ssh\中。找到.ssh\id_rsa.pub文件，用记事本打开并复制里面的内容，打开你的github主页，进入Settings->SSH and GPG keys->New SSH key：

将id_rsa.pub里面的内容到复制到Key中即可。
随后使用以下命令进行毗连测试：

1. ssh -T git@github.com

复制代码

出现以下提示词即为毗连成功：

1. Hi <你的用户名>! You've successfully authenticated, but GitHub does not provide shell access.

复制代码

如果出现

1. ssh: connect to host github.com port 22: Connection timed out.

复制代码

则实验更改端口号为 443。即在先前C:\Users\用户名\.ssh\目录下新建config文件，用记事本打开，输入：

1. Host github.com
2.   User git
3.   HostName ssh.github.com
4.   PreferredAuthentications publickey
5.   IdentityFile ~/.ssh/id_rsa
6.   Port 443

复制代码

再实验用ssh -T git@github.com
测试，基本能办理问题。
npm 镜像配置

在开始之前，由于国内网络问题，推荐使用阿里定制的 cnpm 命令行工具代替默认的 npm：

1. npm install -g cnpm --registry=http://registry.npmmirror.com

复制代码

随后可检查是否安装成功：

1. cnpm -v

复制代码

安装成功之后，以后安装依赖包的方式和 npm 的是一样的，只是 npm 的命令换成是 cnpm 就可以了，好比：

1. cnpm install express

复制代码

网站摆设

Hexo 本地摆设

本地环境摆设完成后，hexo 的摆设非常简单！
首先辈入 cmd 窗口输入指令安装 hexo：

1. cnpm install -g hexo-cli

复制代码

创建一个目录，比方D:/blog，进入该目录中，输入

1. hexo init

复制代码

但注意此处可能会因为网络问题无法初始化，需要一点运气成分。如果挂梯子仍无法办理，参考以下办理方案2：
本质上hexo init
等价于以下命令：

1. git clone https://github.com/hexojs/hexo-starter.git .
2. git submodule init
3. git submodule update
4. npm i

复制代码

因此只需替换成镜像网站即可：

1. git clone https://gitee.com/weilining/hexo-starter.git .
2. git submodule init
3. git submodule update
4. cnpm i

复制代码

如果配置成功，命令行输入：

1. hexo s

复制代码

默认会在 http://localhost:4000/ 构建网页，初始会看到：

Hexo 摆设至 Github

首先在 Github 中创建新的仓库，命名为<username>.github.io.

我们再安装 hexo-deployer-git：

1. cnpm install hexo-deployer-git --save

复制代码

然后修改 Hexo 目录下的_config.yml文件：

1. deploy:
2.   type: git
3.   repository: git@github.com:<username>/<username>.github.io.git
4.   branch: main

复制代码

修改完成后运行以下命令：

1. hexo d

复制代码

稍等片刻访问 https://username.github.io 即可看到页面。
常用命令

在生成的 Hexo 目录中，目录结构为

• node_modules：依赖包
  
• public：存放生成的页面
  
• scaffolds：生成文章的一些模板
  
• source：用来存放你的文章
  
• themes：主题
  
• _config.yml: 博客的配置文件
  

此中所有文章会存放于source/_posts之下，如果要写文章可以在命令行输入：

1. hexo new post "My New Post"

复制代码

此时会调用scaffolds/post.md模板，主动在source/_posts中生成My New Post.md文件。实际上，也可以自己手动创建，只需将注意配置好 md 文件中的头信息即可。
在 Hexo 中构建和发布网页只需认识以下几个命令即可：

• 清理页面缓存
  

1. hexo clean

复制代码

• 编译页面
  

1. hexo generate
2. hexo g

复制代码

• 创建本地服务器，默认所在为 http://localhost:4000/
  

1. hexo s
2. erverhexo s

复制代码

• 摆设到远程服务器
  

1. hexo d
2. eployhexo d

复制代码

更多信息可以访问 Hexo 官方文档。
个性化配置

主题选择

可以在Hexo 主题官网浏览心仪的主题，访问对应 github 仓库，使用git clone进行下载。以本站的 Maupassant 为例（不希望你和我撞车！）：

1. git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

复制代码

如果网络问题下载不下来可以使用镜像：

1. git clone https://gitclone.com/github.com/tufu9441/maupassant-hexo.git themes/maupassant

复制代码

然后编辑Hexo目录下的_config.yml，将theme的值改为你的主题文件夹名即可。详细的主题配置可以查询主题自带的文档，比方本站主题文档。
Markdown 引擎优化

Hexo 默认搭配的 Markdown 渲染器是hexo-renderer-marked，但其支持的渲染格式有限，因此更推荐使用功能更加强大，渲染速度更快的hexo-renderer-markdown-it渲染器3。经过测试，发现hexo-renderer-pandoc更好用，完美支持多行公式4！
通过以下方式安装：

1. cnpm un hexo-renderer-marked --save
2. cnpm i hexo-renderer-pandoc --save

复制代码

如果碰到无法卸载的情况，可手动删除 Hexo 根目录下node_modules/hexo-renderer-marked文件夹，而且修改对应package.json。
在使用hexo-renderer-pandoc过程中，可能会碰到图片标题渲染问题，即 pandoc 引擎和主题都会为图片添加标题，从而造成渲染效果中出现2个标题。
办理这个问题只需要禁用 pandoc 的添加标题的功能即可5：

1. # disable duplicated titles in images
2. pandoc:
3.   extensions:
4.     - '-implicit_figures'

复制代码

Obsidian 工具链

关于写条记的工具，这里推荐 Obsidian，能够很好的与 Hexo 进行联动兼容。
首先去Obsidian 官网下载 Obsidian，打开后在source目录下创建 Obsidian 仓库。此时我们可以直接在_posts下创建条记，完美兼容 Obsidian 生态。
我们还可以使用 Obsidian 的模板系统。在source/目录下创建新文件夹命名为template。在 Obsidian 的设置里面将其设置为模板文件夹，并将 Hexo 目录下的scaffolds/中所有文件复制进该文件夹。

此中post.md的配置可参考：

1. ---
2. title: {{title}}
3. date: {{date}}
4. tags:
5. toc: false
6. mathjax: false
7. ---
9. <!--more-->

复制代码

此中<!--more-->之前的信息会主动变为择要，而{{title}}与{{date}}都是 Obsidian 内置属性，在插入模板时可以根据文章名和系统时间主动生成，格式可以在设置里面更改。
需要写条记时，只需在 Obsidian 左侧点击“插入模板”即可一键配置头信息。

此时需要在 Hexo 目录下的_config.yml中添加exclude信息，克制页面构建时读取此类文件夹：

1. exclude:
2.   - ".obsidian/**/*"
3.   - "template/*"

复制代码

最后注意，在 Obisidian 中插入图片必须使用 md 格式，即![]()格式，而并非 Obsidian 的![[]]格式，而且路径需要使用绝对路径，比方\images\1.png。

---

   

• 另外也很佩服这位博客作者，能在四天零基础构建（包罗学习 git ），动手本领也了得！ ↩︎
  
• 彻底办理 hexo init
  卡顿问题 | Ln’s Blog (weilining.github.io) ↩︎
  
• 原先参考自【Hexo】选择更高级的Markdown渲染器_hexo-renderer-marked-CSDN博客 ↩︎
  
• 关于多行公式渲染折磨我非常久，终极这篇博客救了我！Hexo 书写 LaTeX 公式时的一些问题及办理方法 · Blowfish (jdhao.github.io) ↩︎
  
• Hexo NexT 使用 pandoc 插件渲染图片问题 - Flyan Lu’s Blog (fanlumaster.github.io) ↩︎
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。