Hexo + Github 搭建的个人博客： http://woyaodafu.com/
什么是 Hexo ？
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
什么是 GitHub ？
GitHub 是通过 Git 进行版本控制的软件源代码托管服务，由 GitHub 公司（曾称 Logical Awesome）的开发者 Chris Wanstrath、PJ Hyett 和 Tom Preston-Werner 使用 Ruby on Rails 编写而成。（维基百科）
准备工作
检查电脑是否安装了 Git ？在 Dos 窗口下，输入以下命令并执行 ：
git --version
检查电脑是否安装了 Node.js ？ 在 Dos 窗口下，输入以下命令并执行 ：
node -v
注 ：
1、Windows + R -> cmd -> 进入 Dos 窗口
2、已经安装过该软件，会显示对应的安装软件版本，没有安装会提示 "xx" 不是内部命令或外部命令。
安装 Node.js
安装 Git
Git 安装成功后，点击鼠标右键会发发现多了个两个选项，如图 ：
image
安装 Hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server
点击鼠标右键，点击 Git Bash Here，然后依次输入并执行上面的代码。第一步是安装 hexo 扩展插件。
第二步是创建一个为 blog 的文件夹，把 hexo 相应的代码下载到该文件中下。此时目录情况如下 ：
image
node_modules npm 文件缓存目录
scaffolds 文夹件下存放的是文章、页面模版
scource 文夹件下存放的是我们的资源文件
themes 文件下存放的是我们的主题文件
.gitignore git 忽略文件，设置提交文件时，哪些文件不提交
_config.yml 站点配置文件
package.json 站点版本，站点依赖文件
yarn.lock yarn.lock 文件由 Yarn 自动创建，并且完全通过 Yarn 进行操作。
第三步是进入 blog 文件夹，第四步是安装 hexo 相关的代码。
第五步是启动本地服务，启动完成后，如图 ：
image
在浏览器输入 http://localhost:4000/ 就可以访问刚刚创建的博客了。如下图 :
image
现在本地我们已经可以访问了，我要其他人也能访问我的博客怎么办呢 ？下面我们就要用到 GitHub 来解决这个问题，还不知道 GitHub 的同学，得抓紧了解一下。
注 ： 当我们需要关闭本地服务的时候，可以在通过在 Git Bash 窗口输入 Ctrl + C 关闭服务。
hexo 常用命令 ：
$ hexo generate (hexo g) 生成静态文件
$ hexo server (hexo s) 启动本地服务
$ hexo deploy (hexo d) 提交到远程仓库
$ hexo new page "xx"(hexo n page) 创建页面
$ hexo new "xx" (hexo n "") 创建文章
$ hexo d -g 生成静态并提交到远程仓库
$ hexo s -g 生成静态文件并启动本地预览
$ hexo clean 清除本地 public 文件
创建 GitHub 账号并添加一个远程仓库
GitHub 注册 ：
image
注册成功后，登录账号，点击右侧 "+" 号，然后点击 New repository 添加仓库，如图 ：
image
完成上述操作后，点击 Create repository 创建仓库。
仓库创建成功后，如图 ：
image
这里有两个地址，一个是 Https，一个是 SSH 。Https 每次提交都需要输入用户名和密码，SSH 只要添加了 SSH key 值，以后提交不需要输入用户名和密码。
注 ： 这里创建的仓库名称必须为 username.github.io，username 替换成你的 github 用户名，每个账户有且只有一个仓库用来存放网页静态文件，这里名称是固定的。当创建其他仓库的时候，仓库名称可以自定义。
GitHub 添加 SSH key
检查本地是否有 SSH key
$ cd ~/.ssh
$ ls
第一步是进入 .ssh 文件夹，第二步是显示 .ssh 文件下的文件夹及文件。如果 SSH key 存在，就会显示 id_rsa、id_rsa.pub、know_hosts 三个文件 。
image
没有也没关系，下面我们就来创建 SSH key
$ ssh-keygen -t rsa -C "你的邮箱"
把 "你的邮箱" 替换成你真实的邮箱，然后点击回车。接着会让你输入文件名，点击回车直接忽略，接着会让输入两次密码，点击两次回车，直接设置为空，不用输入密码 。
创建成功后，可以通过如下命令拷贝 SSH key 的内容 ：
$ clip < ~/.ssh/id_rsa.pub"
现在已拷贝了 SSH key 的内容，那么 GitHub 如何添加 SSH key 呢 ？点击右上角头像，然后点击Settings 。如图 ：
image
然后点击 New SSH key，如图 ：
image
把之前拷贝的内容粘贴到 key 里面，然后点击 Add SSH key，如图 ：
image
怎么去验证是否已经添加成功了呢 ？通过如下命令 ：
$ ssh -T git@github.com
验证成功，如图 ：
image
现在这样就成了 ？还差一步，现在我们需要去设置 hexo 配置文件 _config.yml。
修改主题及网站相关设置
修改站点配置文件(_config.yml)
注 ：
对应的目录 ：blog/_config.yml/，blog 为 hexo init 初始化文件夹的名称，替换成你自己初始化文件夹的名称。
修改 depoly ：
deploy:
type: git
repo: git@github.com:username.github.io.git
branch: master
image
注 ：如上图所示，找到 GitHub 上对应的远程仓库地址，点击右侧复制按钮，把 "git@github.com:username.github.io.git" 替换成刚刚复制的远程仓库地址。
修改 site 相关信息 ：
title: xx
subtitle:
description:
keywords:
author: xx
language: zh-Hans
timezone:
注 ：网站名称（title），作者 (author)，语言 (language)
不喜欢现在的主题，想要换一个主题 ？ 我怎么知道有哪些主题呢 ？下面我们就去寻找自己喜欢的主题。
修改网站主题
在 GitHub 首页搜索 hexo theme，通过右边的过滤条件来筛选搜索的结果。如图 ：
image
我是按照 star 数进行筛选的，就以 hexo-theme-next 为例，点击 hexo-theme-next，进入项目里面查看 README.md 文件。
image
通过 git 方式下载项目，命令如下 ：
$ cd themes
$ git clone https://github.com/iissnan/hexo-theme-next next
第一部步是进入到 themes 下面， 第二步是拷贝远程主题到该目录下。下载完成后，我的博客 themes 下就多了一个 next 文件夹。如图 ：
image
修改 theme ：
theme : next
注 ：把默认主题 landscape 切换成 next。
修改主题配置文件（_config.yml）
注 ：
对应的目录 ：blog/themes/next/_config.yml/，blog 为 hexo init 初始化文件夹的名称，替换成你自己初始化文件夹的名称。
修改 menu ：
menu:
home: / || home
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
默认 menu 菜单显示 home、archives，根据自己的需要去掉注释。
修改 Schemes ：
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
next 主题对应的有四个风格，Muse、Mist、Pisces、Gemini，默认为 Muse。
编辑主题配置文件，启用自动摘录 :
auto_excerpt:
enable: true
length: 150
注 ：修改 auto_excerpt 为 true，允许自动摘录，显示部分，点击阅读全文。
添加搜索功能
LocalSearch搜索
安装 hexo-generator-searchdb，命令如下 ：
$ npm install hexo-generator-searchdb --save
编辑主题配置文件，启用本地搜索功能 ：
# Local search
local_search:
enable: true
注 ：设置 local_search 为 true。
添加网站访问量统计功能
我使用的是 不蒜子 统计
image
在主题 footer.swig 底部添加如下内容 :
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<spanid="busuanzi_value_site_pv"></span>次</span>
统计显示风格也可以自定义，我的统计显示风格代码如下 ：
<div class="busuanzi-count">
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span class="site-uv">
<i class="fa fa-user"></i>
<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
</span>
<span class="site-pv">
<i class="fa fa-eye"></i>
<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
</span>
</div>
image
注 ： 在主题 footer.swig 底部添加上述代码。
到此，也快接近尾声了，再坚持一下，把这段路走完。
生成静态文件
$ hexo g
提交到远程仓库
$ hexo d
这下心想终于快弄完了，结果还给我搞个错。在提交的时候出现了如下错误 ：ERROR Deployer not fount: git
image
这里需要先安装一个扩展插件 ：
$ npm install hexo-deployer-git --save
安装完成后，执行 hexo d，执行完成后，就可以在 github 上看见我们提交的静态文件了，也可以通过 http://username.github.io 访问我们的博客了，username 改成你的github 用户名。
更多
参考链接
手把手教你使用Hexo + Github Pages搭建个人独立博客
想要搭建属于自己的博客，就 「立刻」、「马上」行动 。
网友评论