搭建Hexo个人博客部署到github

一直都有听说程序员写个人博客对自己的提升有帮助，于是终于下定决心要尝试着搭建一个个人博客。看到一个帖子上说hexo现在比较流行，基于Node的框架，速度更快，于是我就想那就用hexo搭建吧，万万没想到由此我开始一段相当折磨的经历。。。

花了两天的时间，终于把Hexo搭建好了，虽然这个过程非常的DT，但是还是学到了很多的东西。这是我的第一篇博客，我把遇到的问题分享给大家，希望能帮助到大家。

hexo

既然决定好了，那就立马去做，于是我就在网上搜了教程，迫不及待的就开始了。在桌面打开Git Bash，然后输入命令:
npm install -g hexo
输入好了，觉得下面肯定就会嗖嗖的安装起来了，结果。。。这就出现了我的第一个问题。
hexo1
如果你也像我这样遇到了这样的情况，那我要告诉你一句话：心急吃不了热豆腐！都还没有安装npm，是不能去用它的，好囧，下面开始正式的安装过程（本文是在windows环境下安装的）。

Node.js安装与环境配置

  • 下载安装文件

    下载Node.js，官网http://nodejs.cn/download/我下载的是node-v5.6.0-x86.msi
    hexo2

  • 安装Node.js

    下载完成之后，双击“node-v5.6.0-x86.msi”，开始安装Node.js。自定义安装在“F:\nodejs”里。

在cmd控制台输入：node -v,控制台将打印出v0.10.40，如果出现版本提示表示安装成功。
由于新版的Node.js已经集成了npm，所以同样可以使用cmd指令命令行输入npm -v来测试是否安装成功。出现版本提示则安装成功。
hexo3

  • 安装相关环境

    npm install express -g
    npm install jade -g
    npm install mysql -g
    默认情况下组件都是安装在“F:\nodejs\node_modules”文件夹中，这也是Node.js组件的自动查找路径。

  • 安装CoffeeScript

    npm install coffee-script -g
    确认安装输入coffee -v，出现版本号表示安装成功。

CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. CoffeeScript 尝试用简洁的方式展示 JavaScript 优秀的部分.

CoffeeScript 的指导原则是: “她仅仅是 JavaScript”. 代码一一对应地编译到 JS, 不会在编译过程中进行解释. 已有的 JavaScript 类库可以无缝地和 CoffeeScript 搭配使用, 反之亦然. 编译后的代码是可读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.

  • CoffeeScript测试

    新建cs.js文件，输入：
    console.log "hello #{i}" for i in [0...5]
    在该目录下运行“coffee cs.js”
    hexo4
    Node.js的环境基本配置完成了。

所有命令用-g进行全局安装，安装在当前用户下，在磁盘的所有地方都能访问到，否则只能在当前目录下使用。

此外，若出现下面问题“express不是内部或外部指令”是版本的问题，将版本改成3.5.0即可运行。
$ npm install -g express@3.5.0
hexo5
更改完之后输入“express -V”切记，V需要是大写。
hexo6

安装Hexo并配置

  • 安装

    鼠标在任意地方点击右键，选择Git Bash，使用以下命令安装Hexo。
    npm install -g hexo
    如果出现错误，修改“C:\Users\Administrator”下的.npmrc文件。
    hexo7
    我的做法是直接删除设置代理，并添加了“registry = http://registry.cnpmjs.org” 就可以安装了。（其实我也不太明白真正的原因，只是试了很久，这样就成功了。）

  • 创建Hexo文件夹

    安装完成之后，在你喜爱的文件夹，比如我选择“D:\Hexo”创建Hexo文件夹，最好不要选择中文路径，在空白地方点击鼠标右键，选择Git Bash，输入下面命令，Hexo会自动在该文件夹下创建博客所需要的所有文件。
    hexo init

  • 安装依赖包

    npm install
    在“D:\Hexo”内执行一下命令
    hexo generate
    hexo server
    用浏览器访问“http://localhost:4000” 此时你就可以看到网页上显示一个博客了，Hexo默认的主题是landscape，当然了这个网页是本地的。是不是很开心啊，很激动啊，那么我们继续。
    hexo8

  • 注册Github帐号

    已经有了就不需要了，进入Github主页进行注册，记住用户名，密码和邮箱。

  • 创建repository

    repository是仓库的意思，用来存放你得代码。进入Github主页登录之后，点击New repository绿色按钮进行创建，创建的时候需要注意repository的名字，比如我的Github的帐号是echoVic，那么创建的repository的名字是echoVic.github.io。
    hexo9

  • 部署本地文件到Github

    打开你刚刚创建的echoVic.github.io,找到
    hexo10
    复制“https://github.com/echoVic/echoVic.github.io.git”， 打开“D:\Hexo”的_config.yml 文件进行配置。在_config.yml 最下方，添加如下的配置，切记一点：Hexo的配置文件中，任何“：”后面必须都要带一个空格。
    hexo11
    如果配置中出现“ERROR Deployer not found : github”的错误，则输入
    npm install hexo-deployer-git --save。

  • 设置SSH keys

    首先要检查是否已经存在SSH keys，在Git Bash输入以下指令：
    ls -al ~/.ssh
    如果不存在就接着往下配置，如果存在的话删除C:\Users\Administrator\.ssh文件中的所有内容。

输入以下指令然后回车，邮箱是你注册Github时候的邮箱。（C是大写）
ssh-keygen -t rsa -C "137844255@qq.com"
hexo12
在这个过程中会提示你输入passphrase，类似于密码，如果你输入了就记住了，会用到。
接下来输入下面的指令，复制SSH key
clip < ~/.ssh/id_rsa.pub
也可以打开C:\Users\Administrator\.ssh文件中的id_rsa.pub文件，复制里面的key。

进入Github，点击右上角的setting，
hexo13

页面的左边，点击SSH keys：
hexo14

点击Add SSH key,输入Title（随便填）然后粘帖刚刚拷贝的Key。然后点击绿色的按键Add Key。
hexo15
输入你得Github密码即可完成添加。最后测试一下，输入指令：
ssh -T git@github.com
hexo16
你可能会看到警告，输入yes就行了。

  • 完成部署

    输入指令：
    hexo generate
    hexo deploy
    到这一步，当我试图打开echoVic.github.io时出现了问题：
    hexo17
    原因是没有设置username和email，因为Github每次commit都会记录他们。输入以下指令设置：
    git config --global user.name "your name"
    git config --global user.email "your_email@youremail.com"
    好了，重新输入
    hexo g
    hexo d
    在浏览器输入http://echoVic.github.io, （你要输入你的名字） 你就可以看到你得个人静态博客啦。
    hexo18

Hexo常用指令
hexo g #完整命令为hexo generate,用于生成静态文件
hexo s #完整命令为hexo server,用于启动服务器，主要用来本地预览
hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
hexo n #完整命令为hexo new,用于新建一篇文章

  • Hexo配置

    今天只说一些可以改动的部分，其他的目前我也不是很明白。打开D:\Hexo 下面的_config.yml 文件，可以修改博客名、作者等等。
    hexo19
    修改完之后，执行 hexo g 和 hexo s，打开localhost:4000，看看本地效果。

  • 发布一篇文章

    在Git Bash上执行命令：
    hexo new "my new post"
    在D:\Hexo\source_posts 中打开my-new-post.md,打开方式记事本或者Notepad++（我用的是atom）。hexo中文章是用Markdown写的，如果没有接触过可以看下Markdown语法说明（中文版）。
    写完文章之后，使用“hexo g”生成静态文件，“hexo s”本地预览效果，“hexo d”同步到github。

    总结

    到此为止，终于算是搭建成功了Hexo，并发布了文章。我是用了将近两天的时间来搭建，一个早上的时间写了这篇文章，期间遇到了很多的问题，通过到网上去搜索和求助来寻找解决问题的办法，在这里感谢OsChina.NET中各位网友的回答，同时感谢 287306637（Hexo群）中各位小伙伴们的鼎立相助。
    由于博主是个初学者，本文难免会有错误，欢迎大家指正。后续我会继续添加一些实用的功能，并把经验分享给大家，如果您也有一些问题和经验，或者觉得博主码字辛苦想要给予鼓励，欢迎在下面一起探讨。