GithubPages + Hexo 打造免费个人静态网页博客
这是我参与更文挑战的第5天，活动详情查看 更文挑战
前言：作为程序员为什么要写技术博客，一方面是为了养成做笔记做总结的习惯，一方面也能做些有用的知识分享，提高写作能力，其实有很多不错的博客平台都可以用，比如在掘金发布博客文章，但是如何在不需要域名空间和博客程序下，低成本的拥有属于自己的博客网站呢？
我后来发现很多大牛的个人博客都在用hexo，折腾了一下觉得简单又实用，markdown编写git发布，静态网页速度快，稳定性高，对于博客程序来说这一切足够了。听说还可以集成vue、angular等。
1. 准备工作
- 必要环境及工具的下载：
- Node.js 安装后也会安装好 npm 包管理工具。
- Git 用于提交代码的工具，mac下安装了xcode则忽略这步。
- 需要一个Github账号，使用它提供的 Pages 功能就可以拥有一个静态网站空间，而且是免费的。国内的 Coding 也能做到同样的事，这里我还是选择github作为例子，原理都一样按需选择。
- 申请个自己的域名(非必须)
2. 安装HEXO博客程序
-
mac下打开
终端，如果嫌cd命令找目录麻烦，可以打开finder，点击左上角苹果图标旁边的Finder->服务->服务偏好设置->勾选新建位于文件夹位置的终端窗口，以后便可以在目录文件夹右键选择服务->...位置的终端窗口。 -
windows在磁盘随便一个目录空白处右键选择
在此处打开GitBash(使用cmd也可以，不推荐) -
在终端执行以下命令安装hexo (以下所有命令在windows下都不需要加sudo)
sudo npm install -g hexo
3. 初始化博客
-
创建一个文件夹用于存放博客资源目录，在该目录下打开终端执行：
hexo init -
第一次初始化需要稍作等待，完成后再执行：
hexo g -
该命令作用是构建文章页面，就是生成静态网页，最后执行：
hexo s
此时自动启动本地测试服务器，浏览器访问 http://localhost:4000 即可查看初始化好的博客。
初始化博客可能报错：ERROR Plugin load failed: hexo-server 解决方法：执行
sudo npm install hexo-server
4. 部署博客
经过以上步骤，我们已经可以将博客程序跑起来了，非常简单。接下来就要将它与Pages关联。
登录github并创建一个repository，点击“New repository”创建存放博客的仓库，注意仓库名必须为xxx(自定义前缀).github.io，这个也是你博客默认的访问地址。
进入博客资源目录(即刚刚初始化的目录)，打开根目录的_config.yml文件，在末尾添加：
deploy:
type: git
repository: https://github.com/xxx/xxx.github.io.git
branch: master
仓库地址为前面创建的github仓库地址
-
接着在终端执行以下命令：
npm install hexo-deployer-git --save -
cd到博客目录执行：
hexo d
你会发现博客已经部署到giuhub仓库中，可以通过外网访问了。
5. 开始写博客
- 安装一个编写md文件的工具，例如我使用的是MacDown。
- cd到博客目录执行
hexo new "postName"创建文章。 - 博客目录下的
source/_posts找到你创建的文章，打开直接编写即可。 - hexo中文文档
6. 发布你的博客
每次编写博客的步骤：
- 本地写好博客
- 打开终端，cd到博客目录，执行
hexo clean清空缓存 - 执行
hexo g构建文章页面 - 执行
hexo s本地预览整个站点 - 执行
hexo d发布到Pages更新线上博客
7. 博客绑定自己的域名
域名解析CNAME记录到你仓库的默认域名，创建一个文本，写上你解析的域名，放在仓库根目录即可。
- 重新生成网页文件会把 CNAME 文件覆盖掉，需要直接把 CNAME 文件添加到 source 文件夹里，这样每次推的时候就不用担心仓库里的 CNAME 文件被覆盖掉了。
- 仓库设置中出现Domain's DNS record could not be retrieved.提示说明CNAME文件出错，检查该文件域名是否拼写错误，注意不要加协议前缀(如http)。
