GitHub+Hexo+NexT 搭建博客

前言：本文基于GitHub搭建Hexo个人博客，使用的是NexT主题，由于我在博客搭建过程中踩了不少坑，用了快两天时间才搞定，所以我将整合现有的教程和我的经验教训尽量详细的分享博客搭建的过程。

---

1.环境配置

环境配置主要包括：创建GitHub仓库、安装git、安装node.js

创建GitHub仓库，建立GitHub Pages

关于Github:
GitHub是一个远程仓库，一个开源协作社区，更重要的是：它是免费的！

• 首先需要创建一个GitHub账户，我们假设你的账户名称为 david ,易于后面的演示。GitHub 邮箱也要通过验证才行。
• 然后再创建一个GitHub仓库：点击GitHub界面右上角的+，然后点击New repository 创建仓库，** 切记 **Repository name一定得是“GitHub账号.github.io ”的形式，在这里为david.github.io，因为GitHub规定这样命名形式才能作为网络站点的托管仓库。
• 到这里，博客网站就有自己温馨的港湾啦。

安装Git

关于Git:
Git是一个开源的分布式版本控制系统，可以有效、高速的处理各种类型的项目版本管理。它还支持离线工作，适合多人分布式开发。

• 至于如何下载、安装、使用Git，廖雪峰老师在他的Git教程里面已经讲述的很详细了，我也是在此学习的，另外也推荐Pro Git的电子版。
• 到这里，就已经默认你已经安装好配置好Git了~

安装Node.js

关于Node.js:
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。

• 去Node.js官网下载
• 安装保持默认并一路 next 即可

到这里，环境配置过程已经完成了。

---

2.安装Hexo，并部署网站

关于Hexo：

• A fast, simple & powerful blog framework, powered by Node.js
  • Blazing fast generating
  • Support for GitHub Flavored Markdown and most Octopress plugins
  • One-command deploy to GitHub Pages, Heroku, etc.
  • Powerful plugin system

Hexo博客框架初始化

• 安装Hexo
  得益于我们之前的准备工作，Git和Node.js均已经配置好，可以直接下载Hexo.
  在 Git Bash 中输入如下代码
  $ npm install -g hexo-cli
• 初始化
  选择一个盘(如 C:)建立你的博客本机存储文件夹（如 blog:），在此文件夹空白处右击选择 Git Bash Here（或者$ cd C:\blog）进入blog文件夹进行git操作，接下来：
  $ hexo init
  $ npm install
• 配置站点
  即建立本地文件与GitHub的Repository之间的联系，使用 Notepad++ 打开C:\blog\_config.yml文件，拉到文件最下方的deploy进行如下配置：
  deploy:
  type: git
  repository: https://github.com/david/david.github.io.git
  branch: master
  其中，需要注意两点：第一， repository:和branch:均须自行添加；第二，Hexo的所有配置文件中的:后面均需要添加一个空格才可以书写，否则会出现ERROR Deployer not found : git的错误！
• 写第一篇博文
  博文名称为《My First Blog》，代码：
  $ hexo new "My First Blog"
  此时会发现在C:\blog\source\_post里面出现了My First Blog.md文件，这个_post就是存储博文的文件夹。
• 这里写作博文建议使用Markdown ，写作工具可以用(强烈建议:支持在线预览模式)或者Sublime Text 2，Markdown是一种轻量级的标记语言，语法十分简单，可以参考Markdown——入门指南进行学习，只需五分钟奥~
• 生成静态页面
  $ hexo generate (或简写为 $ hexo g)
  此时My First Blog.md已经在C:\blog\source\public文件夹里生成了博客网站的静态文件。
• 启动本地服务器
  $ hexo server (或简写为 $ hexo s)
  用浏览器访问 http://localhost:4000/，此时，你将会看到一个主题是landscape的博客(简直不忍直视......)，下面我们将介绍另外一个优美简约的主题：NexT

部署本地网站到GitHub

  $ hexo deploy  (或简写为 $ hexo d)

此时会先后出现两个界面，输入注册GitHub账号和密码。

• 访问网站
  上面的所有流程完成后，博客就已经搭建并发布到GitHub上了，在浏览器输入david.github.io并访问，就可以看到你的博客了。

小结：

在环境配置好以后，我们每次发表博文的过程如下：

• 用编辑好Markdown博文放到C:\blog\source\_post文件夹
• $ hexo g 生成静态页面
• $ hexo s 启动本地服务器，在http://localhost:4000/预览
• $ hexo d 部署网站到Github
• 访问网站

---

3.更换NexT主题

关于NexT:
NexT是一个流行的Hexo主题，开发者赋予其主旨在于简洁优雅且易于使用，所以首先要尽量确保 NexT 的简洁易用性。

需要注意的是，配置文件_config.yml其实有两个，分别位于C:\blog和C:\blog\source\themes目录下，前者为站点配置文件，后者为主题配置文件。

• 下载NexT
  Hexo的默认主题是landscape.其实Hexo提供了丰富色彩的主题供我们下载使用。这里我使用的是NexT，下载稳定版本可以按照如下操作：
• 前往Hexo版本发布页面
• 选择你所需要的版本，下载 Download 区域下的 Source Code (zip) 到本地。例如，下载 v0.4.0 版本
• 然后copy并解压到C:\blog\source\themes中。建议将文件夹改为next，方便操作。
• 启用NexT
  打开站点配置文件，找到theme字段，将其值由默认的landscape改为next，注意“:”后的空格！
• 验证NexT
  $ hexo s
  然后在浏览器访问 http://localhost:4000
  ，检查站点是否正确运行。
• 个性化NexT
  对于主题的个性化设定是通过编辑主题配置文件完成的。
  至于具体的配置方法，在NexT官网已经介绍的非常详细，不再赘述。

---

OK~ 至此，我们的博客算是基本搭建完成啦，以后可以边用边学习，一些高级的个性化和第三方服务可以在这个过程中慢慢优化。