Hexo+GitHub搭建静态博客平台(一)-环境配置及建站

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，并在几秒内即可利用靓丽的主题生成静态网页。

一、安装Hexo

安装Hexo前需要提前安装：

Node.js
Git

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm即可完成 Hexo的安装。

$ npm install -g hexo-cli

注意：这是一个全局安装，可能你以为我说这句话是多余的，但是下面我们要安装的基本上是局部安装，因此当你重新Down下来源码后是需要再次安装的，在这里提前进行说明。

我们可以使用npm list -g --depth 0命令来查看你的全局安装文件：

C:\Users\Administrator>npm list -g --depth 0
C:\Users\Administrator\AppData\Roaming\npm
`-- hexo-cli@1.0.4

二、创建仓库及管理配置

搭建博客的前提：

拥有一个GitHub账号
Git正确配置

如果没有GitHub账号，需要先注册一个GitHub账号，然后在客户端上安装Git。

2.1 Git基本配置

git config --global user.name "fxb577328725" // 你的github用户名，而非昵称
git config --global user.email "[email protected]" // 填写你注册github的邮箱

说明：以上两个配置是Git针对全局的配置。

2.2 创建仓库

我们需要在GitHub创建一个名为 username.github.io 的仓库。

注意： 如果你的 github 用户名是 test ，那么你就新建 test.github.io 的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://test.github.io 了，是不是很方便！

2.3 配置SSH key

为什么要配置这个呢？ 因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，因此我们使用 ssh key 来解决本地和服务器的连接问题。

扫描二维码关注公众号，回复： 2806167 查看本文章

首先检查检查本机是否已包含ssh秘钥：

$ ssh -T [email protected]

注意：需要在Git Bash中执行，如果你正常安装了Git，那么鼠标右击即可看到Git Bash！

如果显示类似下面信息表示配置成功：

$ ssh -T [email protected]
Hi fxb577328725【这是我的GitHub名称】! You've successfully authenticated, but GitHub does not provide shell access.

提示：其实有一个比较简洁的方法就是进入到当前系统账户的根目录查看是否包含一个.ssh 文件夹

如果没有提示successfully也不存在.ssh 文件夹，那么就需要生成本地公钥私钥：

$ ssh-keygen -t rsa -C "GitHub注册邮箱"

然后连续3次回车，最终会在当前账户的根目录下生成一个.ssh 文件夹，找到 .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，然后会看到：

Hi 你的用户名! You’ve successfully authenticated, but GitHub does not provide shell access.

三、建站

Hexo搭建博客的特点是博客源文件与部署文件是分离的，我们可以将生成的静态文件部署到任何地方，我们只是利用了GitHub Page来托管并解析我们的静态文件罢了！
其实比较合理的方法是我们在master分支部署静态文件，然后在创建一个源文件分支来管理博客的源文件！但这需要一定的Git与GitHub的使用基础，对于还不太熟的朋友建议你们还是另外创建一个仓库来维护源文件比较稳妥，在这里我将采用两个仓库的方式实现，后期会对前面提及的方式进行说明！

另外在创建一个仓库然后克隆到本地，我的源码维护仓库是BlogSource，当然我们可以不创建此仓库，其只是为了维护博客的源代码而已！

安装好 Hexo并创建及配置好仓库后，执行下列命令，Hexo将会在指定文件夹中下载搭建博客所需文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

注意：如果没有指定文件夹，也就是仅执行 hexo init 命令，则会在当前目录下存储下载的文件；并且此命令要求对应目录下不能有文件，也就是说不能在你源代码维护仓库中执行，我们将生成的所有文档拷贝或剪切到你的源码维护仓库，此处我是拷贝到了BlogSource文件夹下！

新建完成后，文件夹的目录结构如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

3.1 _config.yml

网站的配置信息，您可以在此配置大部分的参数。

3.2 package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer【渲染器】已默认安装，您可以自由移除。

{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.5.0"
},
"dependencies": {
"hexo": "^3.2.0",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.0",
"hexo-renderer-stylus": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-server": "^0.2.0"
}
}

3.3 scaffolds

模版文件夹。当您新建文章时，Hexo会根据 scaffold来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

3.4 source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件或文件夹以及隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件也会被拷贝过去。

3.5 themes

themes 文件夹。Hexo会根据themes文件夹中的主题来生成静态页面。

结语：
至此博客整体框架搭建完成！接下来就是来美化自己的博客网站以及编写博客了！