重装系统后Hexo博客部署教程

重装-环境配置-计算机环境配置

Word count: 3kReading time: 11 min

 2022/02/03 

前言

本文针对已经在别的电脑或系统上搭建过Hexo博客，准备重新在新电脑或系统上搭建回之前的博客，也就是说，之前已经在gthub账号上有建立过博客仓库了。

在重新搭建前保证自己以前的blog文件夹中以下文件有被拷贝备份下来：

文件夹/文件	拷贝内容
/blog目录下的文件	除landscape外的.yml文件
/blog目录下的文件	package.json文件
/blog目录下的文件夹	scaffolds、source、themes三个文件夹

零基础建立、搭载博客可以参考b站视频：

手把手教你搭建属于自己的hexo+github博客

手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

Hexo博客搭建与部署

hexo&github 搭建博客（保姆级）

注意：若是在Git Bash here中输入hexo执行指令，则不需要输入hexo -s，直接输入hexo s即可

博客重新搭载操作

一、软件下载

到nodejs官网下载nodejs软件并安装

cmd中输入node -v确认版本及确认已安装完毕
下载Git软件并安装

cmd中输入git确认版本及确认已安装完毕

二、建立本机与github的联系

Git下载完后，双击安装Git目录下的git-bash.exe，输入ssh-keygen -t rsa -C "github对应的邮箱账号"，然后直接回车3次（无脑回车即可），将会生产本机对应的SSH号存于C盘Users上的id_rsa.pub文件中（如果找不到该文件，可以下载Everything软件直接搜索文件名，可以快速找到文件的位置）
用记事本打开id_rsa文件，Ctrl+A全选复制文件的全部内容
重新建立github与本机的联系
- 打开github的settings，点击SSH and GPG keys，点击New SSH key创建github与新系统的联系
- 其中title填写github的用户名即可，key填写在id_rsa.pub中复制的文件内容，也就是SSH号，完成后点击Add SSH key即可
打开cmd输入npm install hexo-cli -g安装hexo
- mac先通过sudo su进入root用户，再全局安装hexo
- mac用sudo指令，否则会有权限问题sudo npm install -g hexo-cli安装hexo
- npm安装hexo时更换镜像源
  - npm config set registry http://registry.npm.taobao.org
新建blog文件夹，之后的博客搭载将全部在该文件夹中进行，如果出现什么错误不要慌，把这个文件夹干掉重新建立再次进行下面的步骤即可
- cmd中进入对应的盘(如D:)，进而进入新建的blog文件夹（如cd MyBlog\blog）
- 输入hexo init(若是将以前可正常运行的完整blog路径拷贝下来，里面已有环境在，则不需要进行此步骤)
- 输入npm install
- 最后输入hexo s，复制链接（我这里cmd给的链接是http://localhost:4000），到浏览器浏览该链接可以看到最简单的hexo博客界面
- 将前言中备份的旧博客文件及文件夹全部复制到新的blog文件夹中，替换新blog文件夹的内容
- 继续在blog路径的cmd下输入npm install hexo-deployer-git --save安装环境
- 按需添加博客加密npm install hexo-blog-encrypt
  - 参考：【Hexo】静态博客设置文章加密访问
之后便可以继续用hexo s查看hexo博客，此时的博客已经恢复成旧博客的内容了

三、部署博客到github上

记得操作时用hexo clean清理环境，如果出现问题也可以重新打开cmd
- cmd中进入对应的盘(如D:)，进而进入新建的blog文件夹（如cd MyBlog\blog）
- 输入hexo g生成博客
- 输入hexo d提交博客部署到github中
  - hexo d这个过程可能会出现各种错误，如果git config类型的提示则在博客路径的cmd中输入git config --global user.email "github对应的邮箱账号"、回车后继续输入git config --global user.name "github用户名"，之后再次hexo d部署博客，在弹窗中输入github账号密码搭建联系即可（注意，密码不能填入github的密码，而是填入Token，否则会报错）
    - Token的位置：Setting->Devloper Settting->Personal access tokens
    - 创建Token的方式：
    - 在博客的_config.yml文件中修改repo项为https://AkiraZheng:拿到的token@github.com/AkiraZheng/AkiraZheng.github.io.git
  - hexo d这个过程可能会出现各种错误，FATAL中如果出现code: 128错误，很可能是网络问题无法打开github仓库，这是可以关闭cmd挂个梯子后再进行部署
- 提交后若出现"Please tell me who you are"，则根据提示输入git config --global user.email "you@example.com"和git config --global user.name "Your Name"(如"1428384878@qq.com"和"AkiraZheng")
至此，hexo博客的重新建立联系已经完成了，此时可以浏览自己的博客网站，新的博客网站将与新系统相关联
注意：如果多端从git上拉项目的话，需要先建立空文件夹完成hexo init等操作建立好环境，然后再根据下面链接中的二：(推荐)在搭建完成博客之后将多端同步加入拉取git上的项目
- hexo多端同步管理
  1
  2
  3
  4
  5
  6
  // git初始化
  git init
  // 添加仓库地址
  git remote add origin https://github.com/用户名/仓库名.git
  // 新建分支并切换到新建的分支
  git checkout -b 分支名
  - 执行完命令后，在sourceTree中拉取本地这个文件夹，就能更方便地进行更换分支等操作了

四、引入mathjax公式

首先，如果blog源码还没开启过mathjax:

由于archer主题中已经配置了mathjax，但是默认是false，因此需要先在_config.yml同目录下的_config.archer.yml中将mathjax: false改为mathjax: true：

math:
  mathjax:
    enable: true
    version: 3.2.0

如果已经修改完_config.archer.yml文件，那么就需要开始配置npm环境了：

卸载默认渲染引擎

1	npm uninstall hexo-renderer-marked --save

系统上安装 pandoc 和渲染引擎插件

检查 Pandoc 是否已安装
1
pandoc -v
如果未安装 Pandoc，可以使用以下命令安装：
1
2
brew install pandoc # MacOS
sudo apt install pandoc # Linux
blog目录下配置npm环境：安装 hexo-renderer-pandoc
1
npm install hexo-renderer-pandoc --save

参考：启用 LaTeX 数学公式

五、实现在vscode的Terminal中使用hexo指令

当通过上述步骤搭载完博客后，包括在blog中也配置好npm环境和hexo环境后，可以通过下述步骤实现在vscode的Terminal中使用hexo指令，这样就不需要每次都通过在文件夹中打开cmd或者Git Bash中输入hexo指令了

首先将blog文件夹拖入VSCode中（如本文中的MyBlog\blog文件夹）
然后在VSCode中点击Terminal->New Terminal
在新打开的Terminal中输入hexo指令，如hexo s，这时可能会出现报错
不要慌，这里是因为在此系统中禁止执行脚本，那么我们就应该先把脚本执行权限打开
- Win10下以管理员身份运行PowerShell
- 输入Set-ExecutionPolicy，回车，检查脚本执行权限是否被打开了，如果是Restricted则说明脚本执行权限没有被打开
- 执行：set-ExecutionPolicy RemoteSigned 需要开启，所以选择Y，回车
- 以上打开权限的方法参考hexo运行报无法加载文件
至此，我们已经完成了配置，可以重启VSCode，然后打开Terminal，输入hexo s或其它指令，这时就可以正常运行hexo指令了
Point：当在Terminal中启动hexo s后，在浏览器中输入http://localhost:4000即可查看博客网站，这时在VSCode中进行博客的编写、修改、部署等操作,保存更改后回到浏览器刷新即可看到更改后的效果

六、关于Archer主题的相关配置

Archer主题配置指南在github网站中

修改主题时修改./blog文件夹中的_config.archer.yml而不是thems中的

启用字数统计及阅读时间

hexo目录下执行

npm i --save hexo-wordcount
启用全局搜索功能-Algolia 搜索（在Archer官方文档中有）
- hexo目录下安装hexo-generator-searchdb插件
  
  npm install hexo-generator-searchdb --save
关闭目录自动编号
- 打开Archer主题文件夹中的/layout/layout.ejs
- 将
  
  <%- toc(page.content, {class: 'toc', list_number: true}) %>
- 替换成
  
  <%- toc(page.content, {class: 'toc', list_number: false}) %>

后记-hexo博客编写相关问题合集

1. 解决部署到github仓库时出现连接仓库超时问题

所有hexo指令操作都在hexo博客目录下右键点击Git bush下进行指令操作成功率会高很多！！

还有记得部署到github前进行hexo clean操作，降低出现bug的几率

解决方法
- 在执行hexo d前先在默认浏览器中打开github网站
- 在Git bush中输入git config --global https.proxy设置代理
- 在Git bush中输入git config --global --unset https.proxy取消代理
- 在Git bush中正常输入hexo clean && hexo g && hexo d提交代码即可

2. 解决部署到github仓库时FATAL出现code: 128错误

所有hexo指令操作都在hexo博客目录下右键点击Git bush下进行指令操作成功率会高很多！！

还有记得部署到github前进行hexo clean操作，降低出现bug的几率

解决方法一
- 删掉blog中的.deploy_git文件夹，rm -rf .deploy_git/
- cmd中输入git config --global core.autocrlf false
- cmd中输入hexo clean && hexo g && hexo d
解决方法二
- 删掉blog中的.deploy_git文件夹，rm -rf .deploy_git/
- cmd中输入npm install hexo-deployer-git
- cmd中输入hexo clean && hexo g && hexo d
解决办法三
- 太久没使用hexo可能会导致hexo与本地电脑的连接失效，此时转到二、建立本机与github的联系

3. 用Sublime Text3软件实现Markdown文件在浏览器中实时更新显示

MarkdownPreview + LiveReload

Sublime中安装插件的办法
- 组合键Ctrl+Shift+P 调出命令面板
- 输入Package Control: Install Package，回车
- 在搜索框中输入要安装的包名（一个一个，不能同时安多个）
MarkdownPreview
- 根据插件安装方法安装MarkdownPreview插件
- 设置浏览器浏览快捷键为alt+m，在Preferences -> Key Bindings打开的文件的右侧栏的中括号中添加一行代码：
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }
LiveReload实现实时更新
- 根据插件安装方法安装LiveReload插件
- 组合键Ctrl+Shift+P 输入LiveReload: Enable/disable plug-ins, 回车, 选择 Simple Reload with delay (400ms)或者Simple Reload，两者的区别仅仅在于后者没有延迟。

Sublime实现Markdown实时更新参考文章：Sublime Text3 的 Markdown 实时预览全面总结

4. 解决本地图片上传问题

在_config.yml配置文件中配置项post_asset_folder设为true

之后再用hexo new post_name命令都会自动在**source/_post**文件夹中会生成对应的图片文件夹，此时图片文件夹中的图片资源可以用相对路径来引用
在hexo文件夹打开Git bush输入

npm install https://github.com/7ym0n/hexo-asset-image --save
保证图片都保存在同名的文件夹中
文章的.md文件可以采用两种方式引用、插入图片
- 第一种为![图片描述](图片的文件名)，比如![test](1.png)
- 第二种为<img src="图片的文件名">，比如<img src="1.png" width="80%" height="80%">