Hexo部署博客的过程记录
建立 Hexo 博客的相关知识整理成的笔记，不太全面。
缘起
这部分算是年终总结一样的东西吧。
在 2018 年 8 月底的时候，我还是对域名、服务器等名词没有了解的一个 web 小白，那时一个朋友在群里发了一个非常好看的个人博客，我一下子就被吸引了，羡慕但是又没有能力自己弄，感觉太难了。当时我只学过一点 HTML 和 CSS，javaScript 还未怎么学，而且已经很久没有练习过，已经忘得差不多。
那个朋友东给我发了一个《基于 CentOS 搭建 WordPress 个人博客》的页面，东说他想弄，已经租了个腾讯云服务器，问我有没有兴趣。我当时还是蛮犹豫的，对于我来说难度还是很大的，那个网页上并不是个教程，说的内容我大部分看不懂。不过我还是想整一个的，于是尝试去学。
我属于那种“如果不能基本上理解一个概念，那么就会完全拒绝相关的知识输入，即便已经记住了也不会长久”的学习类型，而且以前又比较自闭，不想问别人，只在网上查找已有的问题答案，所以学习起来特别困难。
买了域名，备了案，租了学生价服务器，照着教程《新手如何用腾讯云服务器搭建一个 wordPress 博客-简书》鼓捣了好久终于弄出来一个 wordPress 博客。但我当时仅仅是“知其然而不知其所以然”，并不认为自己学到了什么，弄好了主页就一直搁置在那里，感觉心疼租服务器的钱但是又没办法。开学了又有很多事情要忙，大学并不像高中的时候想象的那么悠闲。
直到一个学期结束我才考虑起开始重新弄个博客。经过了一个学期，我学会了更多的东西，把上个暑假的建博客的流程给理解了应该没什么问题。
我开始整理以前编程留下的笔记。以前使用的是 vnote，但是我觉得界面不太好看，而且功能大多用不上，遇到问题百度也搜不到，碰巧它这时又不知道出了什么毛病，于是换成了 Typora，把笔记重新筛选了一遍。分类尽可能少，渐渐地开始“一元化”笔记。
随后又想起了以前只学了一点的 git。没有一次性学完它，导致我没有去用它，顶多只是使用网页版 github 上传一下代码点亮小绿块让自己爽一下，也搁置了很久。说起来我真是喜欢半途而废。
不如把这整理好的笔记传到 github 上面备份吧，感觉比网盘备份 b 格高。刚好前几天学 Python 的时候找到了廖雪峰的 git 教程，这让我有些后悔没有听另一个朋友朱的推荐。
整 github 的时候又发现了 github page 的功能，想起来 github 也可以搭博客，所以今天（2019-2-6）就研究了一整天搭好了这个博客。挑了个和我以前羡慕的个人博客相同的主题，美滋滋，成就感爆棚。
好了，接下来我来分享一下我是如何搭建这样一个博客的。不保证零基础能看懂。
Hexo——一个博客框架
和 WordPress 差不多，都是用来搭建博客的一个框架。但是问题来了——
框架，又是啥？
自学计算机类的知识最大的问题就在于百度到的东西需要各种各样的前置知识，很难一下子理解那是什么意思，越听越迷糊。不管在看这篇博客的你知不知道框架的意思，反正上个暑假的我是不明白的。而且这是简称，光百度一个“框架”好像又搜不到明确的定义。
这个障碍一直妨碍着我对bootstrap、vue、MFC、QT等框架的准确理解，后来我才知道，软件框架到底是个啥
简而言之，在我的理解里面，框架，就是可以复用的代码，就是“不要重复造轮子”中的“轮子”，就是别人已经写好的封装了各种复杂 API 的库。框架可以帮你完成一些基础语法本身也可以完成的事情，让你不必在建房子的时候从烧砖开始，而是可以解放思维直接开始画楼房设计图。
Hexo，就是一个可以帮助你生成静态网页的一个工具，所有的核心功能比如打标签归档加时间，以及界面美化工作都帮你做好了，你可以专注于博客内容的创作，而不必学习如何“烧砖”（写前端代码）。网上搜索“hexo”，可以找到它的官网。hexo 的官网文档做得非常好，不仅提供准确的中文版文档，还附有视频，让我学得非常之愉快。
不过作为一个“楼房设计工程师”，你还是需要一些其他的帮手来帮助你“建房子”。
在 Hexo 官网的文档里面有详细的教程教你如何安装必须的东西，我在这里只讲一些理解性的东西，详细的指令不多讲。
安装 Hexo 的时候你需要俩工具：
- node.js
- git
node.js
Node.js 是一个让 JavaScript 运行在服务端的开发平台，实质是对 Chrome V8 引擎进行了封装。
引用自node.js 和 JavaScript 的关系-博客园
- JavaScript 是一门语言
- node.js 不是一门语言，也不是一种特殊的 JavaScript 方言 - 它仅仅就是用于运行普通 JavaScript 代码的东西
- 所有浏览器都有运行网页上 JavaScript 的 JavaScript 引擎。Firefox 有叫做 Spidermonkey 的引擎，Safari 有 JavaScriptCore，Chrome 有 V8
- node.js 就是带有能操作 I/O 和网络库的 V8 引擎，因此你能够在浏览器之外使用 JavaScript 创建 shell 脚本和后台服务或者运行在硬件上
个人理解：node.js 是 javaScript 的解释器
为啥要安装它呢？应该是为了使用 node.js 的 npm（Node Package Manager，是一个 node.jS 包管理和分发工具）,可以理解为一个安装程序，可以给你安装官方已经整合好的包。当然其他作用我也不知道。
如果已经有 git 和 node.js，直接使用下面指令进行安装：
1 | `$ npm install -g hexo-cli` |
虽然前面有个 linux 系统的 shell 的命令提示符，但是安装好 node.js 之后用 windows 系统的 cmd 里面也是可以用的。至于打开 cmd，win+R 打开运行窗口输入“cmd”，回车就出现了。记得输入时不要输入前面的$符号，那是命令提示符。
git——版本控制系统
git 的安装和使用就不多说了。用于将 Hexo 生成好的页面给推送到 github 这个远程库里。至少要知道 git 的一些基本概念。
Hexo 的使用
这 Hexo 安装好之后你可以在 cmd 使用它的指令。
初始化
初始化 Hexo 的指令（命令提示符不写了，下同）：
1 | hexo init 指定目录（省略则初始化当前目录） |
初始化 hexo 之后会在你指定的目录生成一大堆文件，这些文件和文件夹是从它的官方 github 库里面 clone 下来的，这也是一开始要下好 git 的原因。
比较重要的几个文件是：
| _config.yml | 配置文件，使用 YAML 来写的数据文件 |
|---|---|
| scaffolds | 模板文件夹，存放新文章的模板 |
| source | 文章，图片，草稿等资源都放在这里 |
| themes | 主题文件夹，Hexo 根据主题生成静态页面 |
新建文章
1 | hexo new [layout] <title> |
生成静态页面
1 | hexo generate |
或者简写成
1 | hexo g |
前文说过，Hexo 是用来帮助你生成静态网页的一个工具，就是用这个指令。这个指令将目前编写好的文章以及主题等东西给包装好，生成用于上传到你的网站上（这里我们用 github page）的网页。至于此命令的详细说明，请看 Hexo 文档。
部署网站
说实话我在看文档的时候没看懂“部署网站”是啥意思，后来知道了，这就是将hexo generate生成的静态页面推送到你的 github 库里面去的意思。
指令是：
1 | hexo deploy |
也可以简写成：
1 | hexo d |
deploy可以与generate共同简写成：
1 | hexo d -g |
或者
1 | hexo g -d |
一个意思，都是先生成静态页面，再部署网站。
本地测试
1 | `$ hexo server` |
在自己电脑上运行服务器来查看博客的效果，默认情况下，访问网址为： http://localhost:4000/
其余指令我目前还没用到，详情请见Hexo 文档
github page
在 github 仓库的 setting 里面，有一栏叫做 github page，在其中的 source 选项内选择作为数据源的分支，一般将博客部署在 master 分支，所以选择 master 作为数据源。
你可以选择两种方式来给你用来存放博客数据的仓库起名字，第一种就是你百度经常看到的：你的用户名.github.io的形式，这种形式会让你在选择好数据源之后提示：
1 | Your site is published at https://你的用户名.github.io/ |
然后你可以使用给出的链接来打开你的博客，点击链接，会默认打开你数据源分支内的 index.html 文件作为主页，如果没有这个文件就会404：找不到页面，当然，Hexo 会帮你生成好 index.html，只要你把生成好的页面给 push 上 github 就可以。如果你知道包含哪些文件的话，自己手动上传应该也 ok。
有了这种方式，其实你甚至可以不需要 Hexo，自己写 html 页面也能做一个博客，不过这样就像前文说的从“烧砖”开始建楼了。
第二种起名方式就是不按照第一种来，随便起，比如用户名是HaneChiri，创建的仓库名叫blog,那么选择完数据源分支之后呢，得到的提示可能是：
1 | Your site is published at https://hanechiri.github.io/blog/ |
这样需要写的网址就会长一些，要加上仓库名。试了一下这样是可以的。我的两个仓库就分别使用了以上两种方式。
markdown 的图片
这里的文章使用的是 markdown 语法，一个比较容易学习的标记语言，可以让你手不离键盘地完成排版，我现在就是在用 markdown 来写.md 文件，然后放进 source 文件夹的_post 子文件夹里面，之后再上传。
markdown 可以方便的插入图片和超链接。但是图片一般来说是利用相对路径放在.md 文件的附近的，生成静态页面的时候图片的路径又会被打乱，导致图片显示失败。
Hexo 文档里面提供了几种方式来插入图片，比如插件。但是那种方式无法实时预览，而且难弄。
所以干脆使用外部图片链接，在 github 上面再建立一个仓库用来存放图片，提供链接给博客使用。
要这样使用的前提是去开启 github page 这个设置。
比如用户名是HaneChiri，创建的仓库名叫blog_images，那么在这个仓库根目录下的图片avatar.jpg的链接就是
1 | https://hanechiri.github.io/blog_images/avatar.jpg |
而不是
1 | https://github.com/HaneChiri/blog_images/avatar.jpg |
后者是浏览编辑这个图片的链接，而不是图片本身。
上传之后无法访问这个链接也不要急，等几分钟就可以了。
参考教程
步骤总结
由于网上教程很多，我在这里只是简单把我部署博客的步骤总结一下：
- 开一个 github 空仓库（注册和新建仓库应该不用多说）
- 在一个本地空文件夹内初始化 hexo
- 此文件夹内，与远程库建立关联（其实这一步可以不必，不过以后可能用得到，先弄着吧）
- 给
_config.yml文件内deploy属性设置好type（: git，记得冒号后面有个空格）、url（github 仓库的链接）和branch（推送到的分支，一般用 master） - 修改其他配置比如
title、author、new_post_name、language、post_asset_folder - 安装一个 git 部署的东西
npm install --save hexo-deployer-git - 生成并在本地测试页面效果
- 生成并部署网站
hexo d -g - 新建，编辑文章然后重复上一步
Hexo部署博客的过程记录