2015-11-02

史上最简洁明了的配置hexo+github打造属于自己github pages博客

既然是Hexo + github，那么首先得准备这两个平台。（此文章基于读者已懂github使用及熟悉基本git命令，所以就不赘述github的知识了。），直接上干货！

##1、安装Hexo##

Hexo是目前比较流行的博客框架，中文主页网址是：https://hexo.io/zh-cn/,默认英文主页网址是：https://hexo.io/
首先是安装hexo客户端，但是安装时，是使用node.js工具命令进行安装，所以没有安装node.js命令的话，是行不通的。在官方文档上都有说明，所以我就不累赘了，直接看官方文档吧。

下面我默认从安装node.js工具命令开始 —mac版：

第一步：进入此网站：https://hexo.io/docs/ 查看运行步骤。
- 1、运行命令：
```
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh 
```
- 若命令运行后下载不了nvm，这是因为这个地址以及失效了，尝试用命令：
```
$ curl -L https://raw.github.com/creationix/nvm/master/install.sh | sh
```
  其实这里只是加了个 -L 参数，表示自动跳转到最新地址，属于curl命令范畴。
- 2、运行命令：
```
    $ nvm install 0.12 

通过‘nvm’来安装‘npm’，这里可能会出现‘nvm not be found’，即nvm命令不可用问题。
```
  - 解决办法：第一步：
    Check your .bash_profile or .profile file. You most likely had a problem during the installation.
    You should have the following at the end of one of those files.

[[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh  # This loads NVM


- 意思就是要在mac 的 ~/.bash_profile 文件中配置一下nvm环境。其中，若配置未成功，请尝试：把‘. $HOME/.nvm/nvm.sh’ 改成：‘source ~/.nvm/nvm.sh’。

这里说一下‘.bash_profile和.profile的区别’，若想 ‘~/.bash_profile’修改后不用重启终端，请使用命令
```
source ~/.bash_profile
```
- 其实只需要在.bash_profile里添加就可以的。我两个文件都添加了，而且添加后就好了，若不行的话，nvm命令还是不能找到的话，就接着看，搞定了的话请跳过下面这一段：
  若nvm还是不能被发现，则：You can also check to see if you have a .nvm folder.

ls -a | grep .nvm

If you’re missing that folder then the installation failed to run the git command. This could be due to being behind a proxy. Try running the following instead.

$ git clone http://github.com/creationix/nvm.git .nvm

3、nvm安装好后，使用nvm命令安装node.js:，命令是：
```
$ nvm install 0.12
```
4、node.js安装好后，使用npm命令安装hexo client，命令是：
```
$ npm install hexo-cli -g
```
这样hexo就安装好了，接下来的，就是设置hexo了，可参考Hexo官方文档–设置

以上4个步骤，就完成了npm命令安装hexo client的工作。

##2、hexo的项目搭建及部署##
1、建站：
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

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

你会发现敲完上面的命令后，你的当前目录下会生成一个你指定的文件夹，即上述的folder 。
而npm install命令是会再这个folder下创建:node_modules文件，并且在这个文件中下载很多关于hexo的插件。
其中关键的有hexo和hexo server,从文件夹就可以看出，前者是hexo的主要部分插件，后者时hexo本地服务器插件，稍后本地查看时会用到。
2、配置：
打开初始化的指定文件，会看到根目录下有一个_config.yml配置文件，我们称它为“站点配置文件”,因为根目录下的themes文件下的主题文件目录下，也有一个_config.yml文件，我们称它为“主题配置文件“。
配置这个站点文件，可参考配置教程,
这里我要提点比如重要的地方：

#URL的配置部分
url: http://yoursite.com
root: /

我们是在github上创建blog，所以url设置为访问你的blog时的主页地址,即’你的用户名.github.io‘,别忘了加’http://'，比如我的：

#If your website is in a subdirectory (such as http://example.org/blog) set url to http://example.org/blog and set root to /blog/.我们的操作没有涉及到子目录
url: http://qingsong-xu.github.io
root: /

如果上面你乱在后面家了child目录，可能会导致主题应用失败。我就碰到了这个问题！！

另外要注意发布的配置部分，在通常在_config.yml文件内容最末尾：

deploy:
    type: git
    repo: git@github.com:qingsong-xu/qingsong-xu.github.io.git #库地址

type对应的值，我们设为git,代表将要发布到git服务器上，repo代表仓库地址，也就是我们在github上会创建一个’你的用户名.github.io’仓库，这里的值就是这个仓库地址，可以是https格式，也可以是ssh格式，使用ssh格式地址的话，就不会提示用户名密码验证，所以我用的是ssh格式的库地址。
这里我使用的是默认主题，所以没有更改。theme: landscape

3、生成并且部署提交到git：
涉及的命令：
（1）生成：

$ hexo generate #生成命令，将搭建的文件生成git服务器能展示的静态文件：js、css等。

（2）部署：执行下列命令之前，我们需要先安装部署到git服务器的插件，它也是在初始化文件的node_modules文件中，未安装时，你在这个文件中，只能看到hexo服务器及生成插件等文件目录。所以下面先执行命令安装 hexo-deployer-git：

$ npm install hexo-deployer-git --save

这时node_modules目录下会生成文件hexo-deployer-git,这些命令都是在你’初始化的文件根目录下‘执行。

至此，你已经完成了从建站到发布的整个流程。现在我们来看效果吧！
先进行本地测试看看效果：再强调一遍，是在初始化根目录下执行命令。
（1）、启动本地服务器：$hexo s –debug (意思是启动服务，并打开debug模式)
(2)访问：0.0.0.0：4000 进行访问看效果，4000是默认端口，可以修改，修改方式请看官方文档
成功了吗？！哈哈

##关于github仓库的建立##

1、在github新建仓库
- 关键：仓库名— ’你的用户名.github.io‘
  这里提一下，，我们新建好这个仓库后，不用在这个仓库中添加任何代码，当我们运行hexo生成及部署命令时，会发现，hexo 发布时，会把根目录下的public文件复制并提交到了你建的仓库master分支上。所以hexo搭建github博客时，只用在github上建一个空仓库即可。
- 另外：在github上，你可以为你的任何仓库添加一个网站，你只需要：
  把网站的页面push到这个仓库的gh_pages分支；（github有向导可以指引你自动创建这个分支）
  通过http://username.github.io/reponame 进行访问（即http://博客地址/仓库名称/）。我的github博客地址是：http://qingsong-xu.github.io/，而openProject是我一个开源项目的仓库名称，它的页面可以通过http://qingsong-xu.github.io/openProject 访问到

##拓展—-切换主题##

找到了想用的主题：在你初始化的目录下执行git clone命令，将clone下来的主题放到themes文件夹下，并修改“站点配置文件_config”的theme的值为这个主题的文件夹名。然后再生成部署到git，主题就切换成功了！有木有很简单啊！
如我执行的过程：
- （1）clone主题
```
$ git clone git@github.com:tommy351/hexo-theme-landscape.git themes/tommy
```
- （2）修改配置：
```
#theme: landscape  //注释掉默认主题

theme: tommy #这个名字要对应themes目录下要被应用的主题文件夹名
```
- （3）执行生成及部署命令：
```
$ hexo g --deploy
```

本文标题:史上最简洁明了的配置hexo+github打造属于自己github pages博客

文章作者:qingsong.xu

发布时间:2015年11月2日 - 19时11分

最后更新:2015年11月19日 - 10时11分

原始链接:http://qingsong-xu.github.io/2015/11/03/史上最简洁明了的配置hexo-github打造属于自己github-pages博客/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。