文如标题，如何利用从无到有搭建属于你的hexo博客，完全面向小白的喂饭式指南。

其实这类入门指南网上一搜一大把，这就是我一开始没有边装边记录的原因（可能就跟别的文章完全一致了），现在用了一段hexo以后顺带整合一些技巧，这篇Blog最重要的原因还是给网络部的小伙伴们备课吧。

一边备课一边水Blog，计划通hhhh。

2021.03亲测有效，环境是VMware+win10(ver. 20H2)，因为物理机上已经装过了，所以用虚拟机重新走一遍流程。

安利一下自己的hexo博客：r3ver5e⁴fuuuuun | c10udlnk_Log

顺便，如果有用hexo搭建博客的小伙伴想生成自己博客的年度报告，指路：c10udlnk/hexo-T1meM4chine: 为你的hexo博客生成年度数据报告！，目前还只是一个雏形，没灵感不太想往后搞（咕咕咕），等下次心血来潮的时候再把TO DO给填了吧。以及，测试样本太少估计会有一大堆bug（。

本文参考链接：

梦开始的地方：开始搭建你的第一个博客 · 语雀 / 搭建一个自己的博客 - 0xFFFF

踩坑路上结合参考的：使用 Hexo+GitHub 搭建个人免费博客教程（小白向） - 知乎

P.S. 本文算是整合型教程，某些内容会跟参考链接一模一样（不过图片是自截图）。

P.S.S 本文只讲步骤不讲原理，原理请看课程ppt。

前期准备

环境搭建

可以在powershell中先用以下命令检验是否安装相应环境

1
2
3

$ git --version
$ node --version
$ npm --version

git

打开Git官网 -> Downloads -> Windows，稍等片刻后会开始下载。

文件下载完成后，双击打开下载的Git-2.30.1-64-bit.exe。

然后一路next，到这一步的时候改一下选项，从vim改到notepad（记事本）：

然后一路Next下去就好，等待安装完成。

然后在powershell中输入git --version会看到：

1 2	$ git --version git version 2.30.1.windows.1

只要能看到版本号即为安装成功。

Node.js

打开Node.js官网->下载

同样是双击node-v14.16.0-x64.msi文件后一路next，到这里打个勾。

然后等待安装完成。

然后在powershell中输入node --version和npm --version会看到：

$ node --version
v14.16.0
$ npm --version
6.14.11

只要能看到版本号即为安装成功。

GitHub相关

注册GitHub

~~不会吧不会吧居然还有人没有GitHub账号吗（误~~

真的没有的话可以按照这个GitHub从注册到使用 - evilsnake - 博客园来注册，走到建库之前那步就好。

创建Github Pages仓库

这里因为@c10udlnk的账号下已经有这样的仓库了，故以下用小号@Glowstone-jojo进行演示。

~~（算法号已经沦落为小号了~~

点右上角的“+” -> New repository来新建仓库。

连接GitHub

在桌面右键 -> Git Bash Here

然后在小黑框里输入：

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

（这里的用户名和邮箱不一定是你注册Github的用户名和邮箱，随意起就好）。

输入以下语句查看设置是否成功：

1 2	$ git config user.name $ git config user.email

输入以下语句生成SSH key：

1	$ ssh-keygen -t rsa -C "邮箱"

然后连敲三次回车（全部设置默认）

会出现这样的文字：

打开蓝色框框起来的路径

用记事本打开id_rsa.pub，并复制里面的内容

在Github中转入Settings界面，SSH and GPG keys -> New SSH key

按如下填写

然后点Add SSH key，稍等片刻就能看到。

说明添加成功。

在Git Bash中输入以下语句来验证：

1	$ ssh -T git@github.com

并在交互时打上yes，会看到

即为连接成功。

安装hexo

创建一个文件夹以存放你的博客数据，名字随意，在这里用shift+右键，点击“在此处打开PowerShell”。

输入以下语句来在全局下安装hexo。

1	$ npm install -g hexo-cli

先输入

1	$ Set-ExecutionPolicy -Scope CurrentUser

在交互中分别输入remotesigned和y来更改执行策略，不然无法执行脚本文件。

然后输入以下语句对此文件夹进行hexo的初始化

1 2	$ hexo init $ npm install

然后依次使用以下语句进行测试

1 2	$ hexo g $ hexo s

在浏览器中打开http://localhost:4000即可看到：

部署到GitHub Pages

输入

1	$ npm install hexo-deployer-git --save

来安装hexo-deployer-git。

然后修改_config.yml末尾的Deployment部分

改为

deploy:
  type: git
  repository: git@github.com:GitHub用户名/GitHub用户名.github.io.git
  branch: main

例如我的改为：

P.S. 这里的main是我们的默认分支名。

然后在powershell中输入

$ hexo d

最后浏览器访问https://用户名.github.io即可看到博客页面。

安装一款markdown编辑器

这里我推荐Typora，点击Download，选择平台版本（一般是Windows 64位）即可下载。

~~别问，问就是这是我见过最好的md编辑器了~~

双击typora-setup-x64.exe开始安装，也是一路next就好。

开始使用

新建文章

输入以下语句新建文章

1	$ hexo new "文章url"

注意，这里双引号内是文章的url，建议用简洁直观+容易解析+一般url（如使用英文和-连字符）的字符串，不然如果里面用到了&之类的保留字(?)就会引起某些奇怪的bug（比如某度sitemap抓不到）。

e.g. 这篇文章的url在蓝色框处，红色框处为文章标题，将在下一part提到。

比如我输入hexo new "testBlog"，就会在这里看到testBlog.md。

双击打开即可编辑。

在编辑完成后，使用

1	hexo clean ; hexo g -d

来进行博客的全局更新。

注意：仅使用hexo g -d进行差分修改可以提高generate的效率，推荐日常使用。不过有时候部署到本地(hexo s)可以但远程(hexo d)不行的时候，试试hexo clean ; hexo g -d会有奇效。

yml front

打开testBlog.md可以看到：

其中蓝框处就是我这里所说的yml front（yaml格式）。

1
2
3

title: testBlog #上一part提到的文章标题
date: 2021-03-13 12:32:25 #日期
tags: #使用tag标记文章，用“ - tag”来标注

我们可以通过把title处的testBlog改成任意文章标题，就像上一part中的红框处。

需要注意的是，yaml中语法结构为key: value，冒号后面一定要加一个空格！不然该行yaml无效！

使用来手动分隔摘要和内容，例如：

那么最后生成的结果为：

Markdown和LaTeX

蓝色框下面的就是文章内容。

.md文件是通过Markdown语法来写文章的，用起来十分方便，网上有很多这样的教程，比如->Markdown 教程 | 菜鸟教程。

常用的大概是：

_斜体_

**加粗**

[url标题](www.xxxx.com)

![图片](图片地址)

`单行代码`

```python
多行代码
```

$公式，比如x_i^2+y_i=\frac{\partial X}{\partial u}$

各级标题：
# 一级标题
## 二级标题
### 三级标题
...

优雅地在博客中插入图片

1	![图片](图片地址)

尽管Markdown可以这么加入图片，但图片地址只能填图链地址，万一图床平台挂了又得补就十分麻烦。

联想到博客中的页面实际上也是存在一个仓库中，那么我们可以通过用本地的相对地址来添加图片的方法，这里感谢Hexo博客写作与图片处理的经验 - Cocowool - 博客园提供的思路，踩坑无数以后看到这篇真的完美解决问题TvT。

修改hexo配置文件_config.yml，让hexo在new的时候自动生成一个跟url相同的文件夹：

1	post_asset_folder: true

可以看到新new的文章就有了这个文件夹：

然后在Typora的偏好设置 -> 图像里调整，把插入图片时的选项设置为“复制到指定路径”，默认就是跟文件名同名的文件夹中，刚好适配asset folder。

并且保证这里前三个勾都打上了。

然后在powershell中用以下语句安装插件hexo-image-link

1	$ npm install hexo-image-link --save

配置完成，开始测试。

在测试文章中粘贴图片进行测试：

成果：

进阶设置

关于进阶设置，这里不再赘述，直接指路前人的教程。

网站设置：配置 | Hexo
更换主题（比如Melody）：使用 hexo+melody 主题搭建个人博客_王某人的博客-CSDN博客

P.S. 主题更推荐Butterfly，由Melody魔改，而且现在还在持续维护（不用开荒555）。
添加live2d：我的自定义多交互live2d折腾经历 | c10udlnk_Log
Melody主题添加代码雨特效：Melody主题的背景代码雨特效 | c10udlnk_Log
绑定域名：（2021.4亲测教程，绑定腾讯云域名）【从0到1】为github.io博客绑定（企鹅）域名 | M0D1 and Morty
SEO抓取优化：Hexo SEO 之完全指北 | 潮与雪 - Rapiz
Melody主题在Slides上的bug修复和魔改系列：
……

总之祝大家能愉快地使用自己搭建的博客来记录啦~ 0v0