前言
作为程序猿，相信大家都有过这样一个想法，搭建属于自己的博客网站，在上面写写技术文章，记录生活点滴，坚持下去会发现这是一件很有成就感的事情。最近刚好在学习这部分内容，深入进去后发现里面坑很多，为了节省大家的时间，少走一点弯路，我整理出了这篇文章供大家参考。
为什么选择Hexo
之前在网上搜了一下目前比较流行的静态博客框架，最后目标锁定在Jekyll和Hexo上，两者都支持Markdown语法，这点我很喜欢，Jekyll基于Ruby实现，安装Jekyll需要搭建Ruby环境，而Hexo基于NodeJs实现，在Windows上安装NodeJs开发环境比Ruby简单，另外Hexo的主题相对来说更符合我的审美，所以最终选择了Hexo。
什么是Hexo？官网对它的介绍是：
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
准备工作
安装Node.js
下载地址：https://nodejs.org/en/download/
推荐下载LTS版本的msi文件，默认64-bit，也可根据自己的Windows版本选择32-bit。
保持默认设置即可，一路Next。安装完成后打开命令行窗口，输入命令：
$ node -v
$ npm -v
结果如下图所示，则说明安装正确，可以进行下一步，如果不正确，请回头检查自己的安装过程。
安装git
下载地址：https://git-scm.com/downloads
保持默认设置即可，一路Next。安装完成后打开命令行窗口，输入：
$ git --version
结果如下图所示，则说明安装正确，可以进行下一步，如果不正确，请回头检查自己的安装过程。
github配置
第一步，注册一个github账号，记得点击邮箱中的验证链接，注册地址：https://github.com
第二步，生成SSH keys
什么是ssh：ssh是Secure Shell（安全外壳协议）的缩写，建立在应用层和传输层基础上的安全协议。为了便于访问github，要生成ssh公钥，这样就不用每一次访问github都要输入用户名和密码。
1.本地成功安装git后，单击鼠标右键，选择Git Bash Here，打开git bash。
2.输入命令：
$ ssh-keygen -t rsa -C "xxx@xxx.com"
引号中的内容是你在github上的注册邮箱，之后一路回车，结果如图所示：
3.上一步已经成功的生成了ssh key，接下来输入：
$ eval "ssh-agent -s"
然后输入：
$ ssh-add ~/.ssh/id_rsa
这一步可能会报错：Could not open a connection to your authentication agent ，这时直接输入：
$ ssh-agent bash
再次输入：
$ ssh-add ~/.ssh/id_rsa
结果如图所示：
4.用cat命令查看key的内容：
$ cat ~/.ssh/id_rsa.pub
选中内容，右键复制备用，如图：
第三步，配置SSH keys
打开github页面，找到setting中的ssh keys，点击新增按钮，输入任意的title，将刚才复制的key粘贴进去保存即可。
第四步，测试
输入命令：
$ ssh -T git@github.com
结果如图：
到这里为止，准备工作就全部完成了。
Hexo的安装与配置
第一步，安装Hexo
打开命令行窗口，输入命令：
$ npm install -g hexo-cli
安装完成后输入：
$ hexo version
结果如下图所示，则说明安装正确。
如果报错：'hexo'不是内部或外部命令，也不是可运行的程序或批处理文件 ，则需要检查环境变量配置是否正确，如下图所示，编辑Path变量值，在结尾处加上：C:\Program Files\nodejs\node_global;（文件hexo.cmd所在目录）
第二步，初始化Hexo
进入任意目录，比如F盘，然后指定一个文件夹名，这里以blog为例，命令如下：
$ hexo init blog
结果如下图所示，F盘下会多出一个blog文件夹：
接下来进入blog目录：
$ cd blog
第三步，安装必要的依赖
$ npm install
第四步，生成静态文件
$ hexo generate
该命令的简写形式为：
$ hexo g
执行完毕后会在blog目录下生成一个public文件夹，里面包含了博客网站的所有静态资源。
第五步，启动服务器
$ hexo server
该命令的简写形式为：
$ hexo s
默认情况下，访问地址为：http://localhost:4000/
另外也可以指定端口（比如8000）：
$ hexo s -p 8000
第六步，验证
在浏览器中打开上面的地址，你将会看到：
到这里为止，Hexo的安装与相关配置就全部完成了。
将Hexo与Github Pages联系起来
第一步，创建代码库
1.登录github，点击页面右上角的加号，选择New repository
2.在Repository name中填写 yourname.github.io ，注意这里的yourname指的是你的github用户名，如果你的名字是kirito，那就填 kirito.github.io ，Description中可以填一些简单的描述，不写也没关系，然后点击Create repository
3.正确创建之后，你会看到如下界面：
第二步，编辑站点配置文件
打开blog目录下的_config.yml文件，编辑deploy模块，内容如下：
deploy:
type: git
repo: git@github.com:lizhiming1995/yourname.github.io.git
branch: master
注意这里的repo地址应该换成你第一步创建的代码库的地址。
第三步，安装一个扩展
进入blog目录，打开命令行窗口，输入命令：
$ npm install hexo-deployer-git --save
安装完成后，就可以一键部署到github上了。
第四步，部署
$ hexo deploy
该命令的简写形式为：
$ hexo d
执行结果如图所示：
这样你public目录下的静态文件就上传到你的代码库中了。
第五步，激活GitHub Pages
打开代码库的Settings页面，找到GitHub Pages，选择master branch，然后点击Save按钮，如图：
最后会提示你：Your site is ready to be published at http://yourname.github.io/
这就是你的博客地址了，任何人都可以访问哦。
绑定自己的域名
第一步，在万网、腾讯云、阿里云等提供域名注册的域名服务商处购买一个域名，这里以阿里云为例，购买地址：https://wanwang.aliyun.com/
第二步，打开控制台，给域名添加DNS解析
添加两条解析记录，记录类型为CNAME，主机记录分别填@和www，记录值填之前GitHub Pages提供的域名，注意没有http的前缀，如下图：
添加完后别人用www和不用www都能访问你的网站。
第三步，在blog目录的source文件夹下创建一个CNAME文件，记住不要有文件后缀名，编辑CNAME文件，里面写你购买的域名，例如 yourname.com ，记住不要有www，创建完成后每一次执行 hexo g 都会在public文件夹下生成CNAME文件，方便后面的部署
第四步，在blog目录下打开命令行窗口，运行 hexo g ，再运行 hexo d
第五步，在浏览器输入你购买的域名，你会发现该域名已经指向了你在github上的博客地址
注意：设置域名解析需要几分钟的时间，若完成以上步骤依然无法访问，请过几分钟再尝试
Hexo入门
我们先来看一下blog的目录结构：
+ blog
+ public //静态资源文件夹，内容会推送到代码库
+ scaffolds //模板文件夹，新建文章时，Hexo会根据模板来建立文件
+ source //资源文件夹，Markdown和HTML文件会被解析并放到public文件夹，而其他文件会被拷贝过去
+ themes //主题文件夹，Hexo会根据主题来生成静态页面
- _config.yml //网站的配置信息，可以在此配置大部分的参数
- package.json //应用程序的信息和依赖关系
方便起见，我们把网站的语言设置为中文，编辑blog目录下的_config.yml文件，将language这一项设置为 language: zh-CN（参考blog/themes/landscape/languages目录），将url这一项设置为 url: http://yourname.com（你购买的域名，若未购买可以用 http://yourname.github.io 代替），其他配置项请根据自己的需要进行设置。
接下来新建一篇文章：
$ hexo new [layout] <title>
layout可选值有：draft（草稿）、page（页面）、post（文章），对应模板文件夹中的3个文件，如果没有设置layout的话，默认使用_config.yml中的default_layout参数（默认值post）代替。若标题包含空格，请使用引号括起来。
现在，我们来新建一篇名为test的文章，输入以下命令：
$ hexo new test
结果在source/_posts目录下生成了test.md文件，内容如下：
---
title: test
date: 2018-06-23 19:14:56
tags:
---
这里给出Front-matter的概念，Front-matter是文件最上方以 --- 分隔的区域，用于指定文件的变量。
常见参数：title（标题）、date（创建日期）、tags（标签）、categories（分类），只有文章（post）支持标签和分类参数，建议文章分类只写一个，标签可以有多个，写法为 tags: [tag1,tag2,tag3] ，注意每个参数的冒号后面都应该有一个空格，这一点同样体现在_config.yml文件中
编辑test.md文件，内容如下：
---
title: test
date: 2018-06-23 19:14:56
tags: [tag1,tag2,tag3]
categories: java
---
文章正文
保存后刷新页面，通常情况下页面会自动更新，若修改没有生效，则需要重新执行以下命令：
$ hexo g
$ hexo s
这里再介绍一个命令：
$ hexo clean
它的作用是清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况下（尤其是更换主题后），如果你发现对站点的更改无论如何也不生效，你可能需要运行该命令。
打开网站首页，你会看到刚才设置的标签和分类生效了：
发现Hello World这篇文章的内容被折叠起来了吗，很简单，只需要在文章正文合适的地方加上下面这行代码就搞定了。
<!--more-->
菜单栏只有Home和Archives？没关系，我们可以加个页面（page），这里以about为例，在blog目录下打开命令行窗口，输入命令：
$ hexo new page about
结果会在source目录下生成about文件夹，里面包含一个index.md文件，文件内容就是about页面的内容。
还没有结束，编辑blog/themes/landscape目录下的_config.yml文件，修改menu的配置为：
menu:
首页: /
归档: /archives
关于: /about
保存刷新页面，你会看到导航栏里多了“关于”，点进去就是about页面啦，目前只有一个标题，内容待编辑，注意页面是不支持设置标签和分类的，只有文章才支持。
最后，我们来总结一下发布文章的流程：
第一步，hexo new <title> 生成一篇文章，这里的title指文件名，不建议使用中文
第二步，编辑文章，修改title、tags等参数，这里的title指文章标题，可以使用中文
第三步，hexo s 本地预览效果，不满意继续修改
第四步，hexo g 生成静态文件
第五步，hexo d 将静态文件推送至代码库
第四步和第五步可以合并成一条命令，hexo d -g ，表示部署之前预先生成静态文件。修改配置与发布文章的流程相似，最后都需要执行第三四五步。
Hexo进阶
添加RSS订阅功能
RSS是在线共享内容的一种简易方式，也叫简易信息聚合，全称Really Simple Syndication。当网站内容更新时，可以通过订阅RSS源在RSS阅读器上获取更新的信息，大多数的内容提供网站都会提供RSS订阅功能，方便用户去获取最新的内容。
1.安装feed插件
Hexo有一个专门生成RSS文件的插件 hexo-generator-feed ，进入blog目录，打开命令行窗口，输入命令：
$ npm install hexo-generator-feed --save
2.启用插件
编辑blog目录下的_config.yml文件，添加如下内容：
# Extensions
Plugins:
- hexo-generator-feed
# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
3.生成RSS
$ hexo g
如果生成了atom.xml就表示成功了：
在浏览器中打开 http://localhost:4000/atom.xml ，你会看到订阅功能已开启：
4.部署
$ hexo d
5.使用RSS订阅功能
这里以Office的Outlook邮箱为例，订阅地址假设为 http://spring2go.com/atom.xml，如图：
添加站点地图
站点地图是一种文件，你可以通过该文件列出你网站上的网页，从而将你网站内容的组织架构告知Google和其他搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取你的网站。
1.安装sitemap插件
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save
2.编辑blog目录下的_config.yml文件，添加如下内容：
Plugins:
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
3.生成站点地图文件
$ hexo g
如果生成了sitemap.xml和baidusitemap.xml就表示成功了：
4.部署
$ hexo d
5.确认博客是否被收录
在百度或者谷歌输入下面格式的内容，如果能搜索到就说明被收录，否则未收录，可能需要等上一段时间。
site:xxx.com
使用模板功能
现在我们生成的每一篇新文章都只有title、date、tags三个参数，通常情况下我们还会有categories参数和一些自定义的参数（如何使用自定义参数我们后面讲），每次都要手动加上这些参数会浪费很多时间，这时候模板的作用就出来了。
打开scaffolds文件夹，你会看到里面有draft、page、post三个模板，对应草稿、页面、文章，我们日常使用最多的就是文章，所以这里以文章为例，其他两个模板请根据自己的需要进行修改。
模板的参数是可以设置默认值的，我们假设categories参数的默认值为 随笔 ，然后自定义一个参数 author ，默认值为 kirito ，因为每篇文章的标签是不确定的，所以这里不进行设置，编辑post.md文件，内容如下：
---
title: {{ title }}
date: {{ date }}
tags:
categories: 随笔
author: kirito
---
让我们用模板生成一篇新文章：
$ hexo new test2
打开blog/source/_posts目录下的test2.md文件，可以看到以下内容：
---
title: test2
categories: 随笔
author: kirito
date: 2018-06-27 22:02:33
tags:
---
接下来我们只需要写好文章，设置一下tags就可以发布了。
使用自定义参数
文章参数里的title、date、categories和tags都在页面上有所展示，那我们自定义的参数该如何使用和展示呢？
通过控制台我们可以看到，每篇文章都是一个 class="article article-type-post" 的 article 标签，结构如下：
<article id="post-test" class="article article-type-post" itemscope="" itemprop="blogPost">
<div class="article-meta">
<a href="/2018/06/23/test/" class="article-date">...</a>
<div class="article-category">...</div>
</div>
<div class="article-inner">
<header class="article-header">...</header>
<div class="article-entry" itemprop="articleBody">...</div>
<footer class="article-footer">...</footer>
</div>
</article>
title、date、categories和tags的值分别显示于article-header、article-date、article-category和article-footer，要使用自定义参数，我们需要修改主题的源文件，打开 blog/themes/landscape/layout/_partial 目录下的article.ejs文件，可以看到代码中的标签与class名都与上面一致，接下来我们让作者的名字显示在分类右边，编辑article-meta模块的代码：
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<%- partial('post/category') %>
<div style="letter-spacing:2px;color:#999;line-height:1em;">
<%- post.author %>
</div>
</div>
这里为了方便直接将样式写在了div标签里，更好的做法是为div添加一个class，将样式写进 landscape/source/css/_partial
目录下的article.styl文件。当然，自定义标签可以用在其他地方，样式也可以根据你的喜好来定制。
让我们打开浏览器来看下效果，你会发现文章的自定义标签生效了：
值得注意的是，我们刚才修改的文件是article.ejs，这是跟主题有关的，换一个主题，也许文件的路径和名字都变了，甚至格式也不再是ejs而是swig，不过修改文件的思路都是一样的，明确自己要修改哪一个模块，然后到主题的相关目录下，模仿源代码的语法进行修改，最后记住，源文件里使用Tab键会导致修改的代码无效或者报错，请使用空格。
Hexo主题入门
首先，你需要挑选一个自己喜欢的主题，地址：https://hexo.io/themes/
打开主题示例网站后，你可以在页面底部或其他地方找到主题的git仓库地址。
然后将代码克隆到主题文件夹（themes）下，这里以NexT主题为例：
$ cd blog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
这里的blog应该替换成你的站点根目录。克隆完成后会在themes文件夹下生成一个next文件夹，里面就是主题的源代码了。
接下来启用next主题，编辑站点配置文件（themes\next目录下的_config.yml），修改theme字段如下：
theme: next
在切换主题之后、验证之前，我们最好使用命令来清除Hexo的缓存：
$ hexo clean
然后启动Hexo本地站点：
$ hexo s
启动完成后打开浏览器，可以看到主题配置已生效。
那么教程到这里就结束了，快来试试搭建自己的博客吧，有什么问题可以在评论区留言~
