Abstract: This is a tutorial. This tutorial tells how to establish a personal blog based on github.io static pages with Hexo. The article also involves some setting details which can make your website more intimate.
1 创建Github仓库
登录Github账号后，在右上角选择New repository进行仓库的创建。
创建过程中，仓库名字取为GithubID.github.io(GithubID是你Github主页昵称下面的字段)。
然后点击Create repository即可。
2 生成添加秘钥
在终端(Terminal)输入：1
ssh-keygen -t rsa -C "your_email@youremail.com"
注：your_email@youremail.com是你的Github注册邮箱。
直接点回车，系统会在默认文件id_rsa上生成ssh key。
然后系统要求输入密码，直接按回车表示不设密码。重复密码时也是直接回车，之后提示你ssh key已经生成成功。
然后我们进入提示的地址下查看ssh key文件。 我的电脑的地址是C:\Users\Champion\.ssh ，其中Champion是我的电脑的名称。
打开id_rsa.pub，复制里面的key。里面的key是一对看不懂的字符数字组合，不用管它，直接复制。
回到Github网站，进入Account Settings，左边选择SSH Keys，Add SSH Key。title随便填，可以给自己的电脑起个名字填上去，然后粘贴key。
为了验证是否成功，在git bash下输入：
1 | $ ssh -T git@github.com |
回车就会看到：You’ve successfully authenticated, but GitHub does not provide shell access 。这就表示已成功连上github。
接下来我们要做的就是把本地仓库传到github上去，在此之前还需要设置username和email，因为github每次commit都会记录他们:
1 | $ git config --global user.name "your name" |
3 安装node.js
点击进入node.js官网: https://nodejs.org/en/
目前node.js有两个推荐版本，分为通用版和最新版，点击可直接进行下载。下载好后，按照既定的套路安装即可。
4 安装git
点击进入git官网: https://git-scm.com/downloads
点击对应的操作系统对应版本可直接进行下载。下载好后，按照既定的套路安装即可。
5 安装配置hexo
为你的博客新建一个本地文件夹，打开在终端(Terminal)，并定位到此文件夹下。
5.1 下载安装hexo：
1 | $ npm install -g hexo-cli |
安装好hexo以后，在终端输入hexo命令，如果找到了此指令说明安装成功。
5.2 初始化博客
1 | $ hexo init <folder> |
注：<folder>是放置博客真正的地方，名字自己定。npm install是node.js的命令，安装需要的依赖包。
初始化博客以后，我们可以看到博客文件夹里的文件是这样的：
1 | . |
5.3 _config.yml
基于上一步，我们对博客修改相应的配置，即对以_config.yml命名的文件（下称站点配置文件）进行设置，文末将贴出本网站的配置信息。
5.3.1 修改网站相关信息
1 | title: CVision |
注：每一项的填写，其后面都要保留一个空格，下同。
5.3.2 配置部署
1 | deploy: |
其中repo项是之前Github上创建好的仓库的地址，branch是项目的分支，我们默认用主分支master。
5.4 source
资源文件夹是存放用户资源的地方。除 _posts文件夹之外，开头命名为 _ (下划线)的文件/文件夹和隐藏的文件将会被忽略。Markdown和HTML文件会被解析并放到public文件夹，而其他文件会被拷贝过去。
5.5 themes
主题文件夹。Hexo会根据主题来生成静态页面。
6 发表一篇文章
在在终端输入：
1 | hexo new "article's title" |
我们可以在本地博客文件夹source->_post文件夹下看到我们新建的markdown文件。
或者直接在source->_post新建一个markdown文件，编辑文字：
1 | --- |
保存后，我们进行本地发布：
1 | $ hexo server |
然后就可以在浏览器输入http://localhost:4000/查看了。
如果没什么问题，就可以用一下三个语句发布了
1 | $ hexo clean |
注：hexo clean不一定每次发布都需要，但是如果发现一些配置改变后网站并没有相应的改变，可以利用这个命令清除一下缓存。
7 更换主题
因为我的博客主题是NexT，所以以这个主题为例。NexT的Github地址为：https://github.com/iissnan/hexo-theme-next。
首先先把NexT的主题源文件下载到本地，使用Git克隆指令如下：
1 | git clone https://github.com/iissnan/hexo-theme-next themes/next |
然后把下载下来的目录改名为next，然后放到Hexo博客根目录/themes/文件夹下，然后配置站点配置文件中的theme属性，将其由landscape改为next。然后就可以编译部署了。
8 对主题进行完善
通过以上操作，博客的基本雏形已经全部搭建完毕，以下就是如何让自己的博客功能更加丰富了。
8.1 设置预览摘要
设置摘要有两种方法，一种是在next文件夹下的_config.yml文件（下文称主题配置文件）中找到auto_excerpt属性，将enable设置为true ，将length设置为想要预览到的字数。
一种是在文章中插入<!-- more -->即可，下面的文字将在主页被自动隐藏。
8.2 设置侧边栏显示效果
在主题配置文件中，找到sidebar的display属性，display属性有四种显示模式，分别为：post(只在看文章的时候自动显示)，always(一直显示)，hide(平时隐藏，点击才显示)，remove(彻底移除)，根据个人喜好设置即可。
8.3 添加菜单选项
默认情况下，菜单导航栏有首页、归档等选项，除此之外笔者还添加了分类、标签、关于以及分类下的两个细分类Tech和Life。在主题配置文件中，找到menu属性，并去掉categories、 tags、about的的注释，然后用添加页面指令：
1 | $ hexo new page "categories" |
然后在menu下添加
1 | tech: /categories/tech |
执行完上述指令后，在Hexo根目录/source/文件夹下会自动生成相应文件夹，命名分别为categories、tags、about等，在这些文件夹中分别会创建一个以index命名的Markdown文件，如果想修改，对这三个Markdown文件内容进行修改即可。
8.4 添加RSS
8.4.1 安装 hexo-generator-feed 插件
RSS需要有一个Feed链接，而这个链接需要靠hexo-generator-feed插件来生成，所以第一步需要添加插件，在Hexo根目录执行安装指令：
1 | npm install hexo-generator-feed --save |
8.4.2 配置feed信息
在站点配置文件中追加如下信息：
1 | feed: |
8.5 添加社交链接
在主题配置文件中找到social属性，在其下方添加社交链接，其格式为：
1 | social: |
在主题配置文件中找到social_icons属性,添加链接图标
1 | social_icons: |
读者们可根据自己喜好，启用显示链接的图标，链接的图标全部来自于Font Awesome。
8.8 设置网站的图标和侧边栏头像
将下载或者制作图标名称改为favicon.ico，然后把图标放在/source/里，并且修改主题配置文件：
1 | favicon: /favicon.ico |
编辑站点配置文件，新增字段 avatar， 值设置成头像的链接地址。
其中，头像的链接地址可以是：
- 完整的互联网URL，例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460
- 站点内的地址，例如：/upload/image/avatar.jpg 需要将你的头像图片放置在站点的 /source/uploads/image/。
1 | avatar: /upload/image/avatar.jpg |
8.7 在Hexo中渲染MathJax数学公式
在用markdown写技术文档时，免不了会碰到数学公式。常用的Markdown编辑器都会集成Mathjax，用来渲染文档中的类Latex格式书写的数学公式。基于Hexo搭建的个人博客，默认情况下渲染数学公式却会出现各种各样的问题。
8.7.1 原因
Hexo默认使用hexo-renderer-marked引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线_代表斜体，会被渲染引擎处理为<em>标签。
因为类Latex格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为<em>标签，那么MathJax引擎在渲染数学公式的时候就会出错。例如，在开始被渲染的时候，处理为，这样MathJax引擎就认为该公式有语法错误，因为不会渲染。
类似的语义冲突的符号还包括*', '{', '}', '\等。
8.7.2 解决方法
更换Hexo的markdown渲染引擎，hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug，两者比较接近，也比较轻量级。
1 | npm uninstall hexo-renderer-marked --save |
执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。
然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的escape变量的值做相应的修改：
1 | //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/, |
这一步是在原基础上取消了对\,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。
1 | //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, |
重新启动hexo（先clean再generate），问题完美解决。哦，如果还没解决的话，看看是不是还需要在使用的主题中配置mathjax开关。
8.7.3在主题中开启mathjax开关
主题配置文件，把mathjax默认的false修改为true，具体如下：
1 | # MathJax Support |
别着急，这样还不够，还需要在文章的Front-matter里打开mathjax开关，如下：
1 | --- |
不要嫌麻烦，之所以要在文章头里设置开关，是因为考虑只有在用到公式的页面才加载 Mathjax，这样不需要渲染数学公式的页面的访问速度就不会受到影响了。
8.8 设置插入图片居中与放缩
8.8.1 设置图片居中
Mist默认图片是不居中的。要居中修改themes/next//source/css/_schemes/Mist/_posts-expanded.styl30行为：
1 | .post-body img {margin: 0 auto;} |
8.8.2 设置图片大小
因为图片采用七牛云存储，所以可以直接运用七牛云的放缩命令，在图片链接后面加?imageMogr2/thumbnail/!75p，即为对图片放缩到0.75倍，取值范围1-999。更多操作参见链接。
9 在多设备间同步
因为Hexo的设置，实际上只有Hexo生成的网页文件夹.deploy_git被传到了Github上，而实际的源文件，即除去.deploy_git以外的其他文件并不会传上去，所以实际上整个hexo是无法通过Github进行同步的。
两种办法：
- 一种是将Github上的博客项目建立一个分支，然后把站点文件夹下的.gitignore文件进行修改，然后把所有文件传到Github上，然后在多设备间同步。
- 一种方法是把所有文件拷到移动存储设备例如优盘或者移动硬盘，但是这样就回到了原始的同步方法，多半情况下，如果改动比较频繁的话，只能保证一个设备是最新的。不过如果站点和主题配置文件在设置好不再改动的话，只更新博客内容，这种方法倒是也无妨。
其他事项：
hexo generate生成的时候，如果index.html为0kb空白，可能是node版本太高（例如18或者19等），将node版本降到10版本，删除public和.deploy_git文件夹，重新生成，就可以解决了。
10 我的配置文件
站点配置文件
1 | # Hexo Configuration |
主题配置文件
1 | # --------------------------------------------------------------- |
语言配置文件
1 | title: |