本文永久链接：http://zhengtuqiang.pw/2018/07/31/Hexo+github搭建博客总结/
<!-- toc -->
# 1. 前言
本来今年年初的时候就已经搭建了博客，当时看的是**掘金**里面的一篇教程。但是其实那篇教程说的不是很好，遇到很多问题。直至最近又有了建设个人品牌的想法，遂继续折腾个人博客。在网上找了各种资料，后来发现[Grok抱残守缺](http://lowrank.science)的这篇[教程](http://lowrank.science/Hexo-Github/)。[Grok抱残守缺](http://lowrank.science)的博客不但令人知其然，也令人知其所然。跟着[教程](http://lowrank.science/Hexo-Github/)一次就成功了。我的这个总结总体是站在[Grok抱残守缺](http://lowrank.science)基础上去写的，作为补充。
<!-- more -->
# 2. 过程概览
这个步骤就不重复造轮子了，跟着[Grok抱残守缺](http://lowrank.science)的这篇[教程](http://lowrank.science/Hexo-Github/)来即可。
1. 安装 Node js，Git。这两个都是下载完之后直接安装就可以了。
2. Git 配置以及 Github 配置 SSH。
3. 安装 Hexo。
4. Hexo 本地建站。
5. 主题配置。本文以 [Material-Flow](https://github.com/viosey/hexo-theme-material) 为例说明。
6. 绑定独立域名。
# 3. Material-Flow 主题配置
这是一个遵循安卓 Material Design 风格的主题，支持响应式，也就是说会根据当前是浏览器屏幕去自适应显示，在手机端的显示效果也不错。我主要做了以下的修改：`汉化`，`关于页面`，`百度统计`，`不蒜子阅读量统计`和一个[彩蛋功能](http://zhengtuqiang.pw/index2.html)。这是[我的定制版本](https://github.com/zhengtuqiang/My-Hexo-Theme-MaterialFlow/)。
## 3.1 Material-Flow 主题概述
主题的文件结构如下：
```
├─material-flow
│ ├─layout #ejs模板
│ │ ├─_partial
│ │ └─_widget #侧栏相关
│ ├─snapshots
│ └─source #字体、图片、js资源
│ ├─fonts
│ ├─images
│ ├─js
│ └─less
```
我们先来看一下 layout/layout.ejs，默认通过 `hexo new <title>` 会把 layout.ejs 作为模板生成 html 网页。
``` html layout.ejs
<%- partial('_partial/head') %> <!-- header -->
<body>
<%- partial('_partial/loading') %>
<script>setLoadingBarProgress(20)</script>
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<script>setLoadingBarProgress(40);</script>
<div class="l_body">
<div class='container clearfix'>
<div class='l_main'>
<%- body %> <!-- 主体 -->
</div>
<aside class='l_side'>
<%- partial('_partial/side') %> <!-- 侧栏 -->
</aside>
<script>setLoadingBarProgress(60);</script>
</div>
</div>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %> <!-- footer -->
<script>setLoadingBarProgress(80);</script>
<%- partial('_partial/scripts') %>
<script>setLoadingBarProgress(100);</script>
</body>
</html>