本文总阅读量次
<% } %>
阅读本文应具备的知识：
了解 git 和 github
具备 markdown 语法基础知识
1.在 github 建立属于自己的 github.io
你要有一个 github 账号，并建立自己的 github.io 仓库，不懂可以查我这篇文章 《在 github 上实现页面托管预览功能》
了解 markdown 语法，简单入门可以查看我这篇文章《如何入门》
下载和安装git,教程请自行百度
安装了 node.js 并了解npm相关基础知识；
2.配置 github 的 SSH key
为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。
注意：本文是用 git bash 输入所有命令，用 cmd 可能会出错
$ cd ~/. ssh #检查本机已存在的ssh密钥
如果提示：No such file or directory 说明你是第一次使用git。
ssh-keygen -t rsa -C "邮件地址"
注意：这里的邮件地址指的是你注册 github 的邮箱
然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录即c:\Users\你的电脑用户名，找到.ssh文件夹下的id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：
这里写图片描述
将刚复制的内容粘贴到key那里，title随便填，保存。
ssh -T [email protected] # 注意邮箱地址不用改
如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：
You've successfully authenticated, but GitHub does not provide shell access.
注意，这里一定要输入YES，否则连接不成功
此时你还需要配置：
$ git config --global user.name "liuxianan"// 你的github用户名
$ git config --global user.email "[email protected]"// 填写你的github注册邮箱
3.使用hexo写博客
$ npm install -g hexo
安装，然后进入你想存放的文件夹，右键 git bash ，输入
$ hexo init
hexo会自动下载一些文件到这个目录，包括node_modules，目录结构如下图：
这里写图片描述
$ hexo g # 生成
$ hexo s # 启动服务
hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容
执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的：
这里写图片描述
第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章，默认的主题比较丑，打开时就是这个样子：
这里写图片描述
4.修改主题
既然默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。这是 官方主题。
个人比较喜欢的2个主题：hexo-theme-jekyll 和 hexo-theme-yilia。
首先下载这个主题：
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
下载的主题存放于theme文件夹中
修改_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成。
如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。
5.上传到github
首先，ssh key肯定要配置好。
其次，配置_config.yml中有关deploy的部分：
deploy:
type: git
repository: [email protected]:liuxianan/liuxianan.github.io.git
branch: master
安装插件
$ npm install hexo-deployer-git --save
提交，输入一下代码
$ hexo g
$ hexo d
注意：第一次上传之前检查一下根目录是否有.deploy_git文件夹，如果有将其删除，否则会出现将整个根目录的文件上传。我们要的只是public里面的文件
6.写博客
我写markdown用的是 sublime text 3 编辑器，当然你也可以用其他的。
$ hexo new '你的文章名字'
它会帮我们自动生成 markdown 文件，位于 source_posts 文件夹下，下面是生成的模板
---
title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---
以下是正文
小提示：生成的文章在主页中默认是全部显示的，你也可以在文章中的某处加入`` 使其高度缩小，可以点击阅读详情
7.增加分类
yilia主题默认的分类是主页和随笔，如果我想增加多几个分类，怎么实现呢？
在 theme/yilia 文件夹下找到_config.yml 文件，修改 menu
menu:
主页: /
随笔: /categories/随笔/
前端: /categories/前端/
后端: /categories/后端/
然后在scaffolds文件夹中修改post.md文件
---
title: {{ title }}
date: {{ date }}
tags:
---
categories:
随笔
前端
后端
---
注意：你的文章必须有该分类，点击分类名才有效果，如下面例子的categories
---
title: 简单入门小程序 01
date: 2017-09-27 20:23:13
tags: 小程序
categories: 前端
---
**文 | 小皮咖**
8.增加博客访问人数和访问量
- 在theme/yilia/layout/_partial 下的footer.ejs , 在代码最后加入
增加文章访问量
找到 article.ejs ，修改代码，增加如下代码。位置可以自选，但不能放于文首，这样会出现主页出现一片文章有访问量，其他文章不出现访问量的情况。
本文总阅读量次
你也可以参考我存放的位置，代码如下：
<% if (post.link || post.title){ %>
<%- partial('post/title', {class_name: 'article-title'}) %>
<% if (!post.noDate){ %>
<%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
<% } %>
<% } %>
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link) { %>
<%= theme.excerpt_link %> >>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
<%if(post.top){%>
<% } %>
<%- partial('post/tag') %>
<%- partial('post/category') %>
<% if (index && theme.show_all_link){ %>
<% } %>
<% if (!index && theme.share_jia){ %>
<%- partial('post/share') %>
<% } %>
<% if (!index){ %>
<%- partial('post/nav') %>
<% } %>
<%- partial('_partial/aside') %>
<% if (!index && post.comments){ %>
<% if (theme.duoshuo){ %>
<%- partial('post/duoshuo', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
<% if (theme.wangyiyun){ %>
<%- partial('post/wangyiyun', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
<% if (theme.changyan_appid && theme.changyan_conf){ %>
<%- partial('post/changyan', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
<% if (theme.disqus || config.disqus_shortname){ %>
<% } %>
<% if (theme.gitment_owner && theme.gitment_repo &&theme.gitment_oauth && theme.gitment_oauth.client_id && theme.gitment_oauth.client_secret){ %>
<%- partial('post/gitment', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
<% } %>
增加访问人数和访问量
找到 left-col.ejs，增加代码，位置自选
访问量
你是第个来到我博客的小伙伴,欢迎你！！٩(๑❛ᴗ❛๑)۶
当然你可以修改上述代码，只要id不要修改即可，也可以参考我代码位置
<% var defaultBg = '#4d4d4d'; %>
<%=theme.author%>
<% if (theme.subtitle){ %>
<%=theme.subtitle%>
<%}%>
以上就是 hexo 与 github pages 搭建个人博客的全部教程！希望对你有用~
了解更多 hexo 配置，请移步 《hexo中文文档》
感谢小茗同学的《使用hexo+github搭建免费个人博客详细教程》，本文大部分内容基于他的分享
感谢 ‘不蒜子’的 js 脚本，实现了静态文件访问量