hexo+github快速搭建博客

自建博客最佳实践

本篇是自己实践记录。

工具：hexo 3.6.0 + github pages + git + NexT 5.1.4
环境：mac(10.13.2)、node.js(9.4.0)、npm(5.6.0)

前言

开始之前，先回答三个哲学问题，它是谁？它从哪里来？它要到哪里去？

hexo

A fast, simple & powerful blog framework, powered by Node.js.

一个github的开源项目。hexojs/hexo

说白了，就是本来想要搭建一个博客（比较麻烦的是页面样式等），而别人已经给你搞了个框架，你只管创作，其他的都不要你操心（给你一个漂亮的页面），交给它就可以了，给你生成一个静态的页面，放哪都能访问。
GitHub Pages

Github Pages 本身就是 Github 为用户提供的一个介绍项目、发表技术文章的网站。当你创建了它，这时可以认为你已经拥有了一个网站，只不过这个网站没有内容。Github Pages 的网站内容和样式全部可以由用户自己定制，网站空间无限，流量免费，Github为你维护，安全又稳定，而且你可以很轻松的更新它。
Github Pages 实际上是一个 Github 仓库，这也就解释了为什么其很容易更新，因为网站的样式和内容都存储在该仓库中，当你更新仓库时，网站也自动更新了。

说白了，就是一个免费的服务器，把hexo生成的静态页面往上一放，哪哪都能访问了。

准备环境

安装node.js

方式一

##查看node版本，建议安装最新版本9.4.0
$ node -v
v4.4.0
##清除node.js的cache
$ sudo npm cache clean -f
  注：这里可能会报错，如果报错，放弃使用这种方式，使用方式二
  npm WARN using --force I sure hope you know what you are doing.
  npm ERR! code MODULE_NOT_FOUND
  npm ERR! Cannot find module 'internal/util/types'

  npm ERR! A complete log of this run can be found in:
  npm ERR! /var/root/.npm/_logs/2017-11-20T02_16_00_192Z-debug.log
##安装 n 工具，这个工具是专门用来管理node.js版本的
$ sudo npm install -g n
##安装指定版本的node.js（稳定版|最新版|9.4.0版本），也可以删除sudo n rm 9.0.0
$ sudo n stable|latest|9.4.0
注：安装过程可能会失败，再次安装会报dyld: bad external relocation length的错误，这是由于残留未下载完的文件，删除即可。路径：/usr/local/n/versions/node
##再次检查版本
$ node -v
v9.4.0
$ sudo npm install npm@latest -g

方式二（推荐使用）

1	$ brew install node

安装git

1	$ brew install git

git的相关配置就不再累述，google一把把

安装hexo

## 一行搞定
$ npm install hexo-cli -g

  ##当出现这种错误时， Cannot find module '../lib/utils/unsupported.js'
  采用下面方式，重新安装node
  $ rm -rf /usr/local/lib/node_modules
  # remove previously installed node
  $ brew uninstall node
  $ brew prune    # clean all broken symlinks
  $ brew update   # always good to have the latest
  # and install normal one
  $ brew install node
  
$ hexo -v

配置GitHub Pages

新建博客仓库

这里就建一个名为blog的仓库，初始化README勾选上。

22DE15A7-4A94-4E2F-96EF-388A2F578A52

开启gh-pages功能

点击Settings

C0CE678E-96DC-42EC-B400-40564E5CDE04

找到GitHub Pages，选择使用master分支。

F026F8CB-7AAD-4D2C-9243-8A1216B923C6

保存后，就算发布成功了，访问链接地址试试吧。

0DCBF15E-1C17-44C3-A08F-D547121A48DC

配置hexo并部署

启动hexo

## 新建一个文件夹用于存放框架，如blog
$ mkdir -p /usr/xxxx/Documents/blog
$ cd /usr/xxxx/Documents/blog
$ hexo init 
$ npm install
## 启动
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
##本地就能查看效果

将博客与Github关联

1.编辑主站_config.yml(即/usr/xxxx/Documents/blog目录下)

## 配置访问地址和访问根路径
url: http://**.github.io/blog/ 这地址在开启github pages时生成
root: /blog
注：如果我的创建的仓库为testblog，则url和root相应的修改为http://**.github.io/testblog/和/testblog

## 配置部署路径
deploy:
  type: git
  repository: git@github.com:***/blog
  branch: master

部署到GitHub

## 安装部署插件
$ npm install hexo-deployer-git --save
## 清除缓存
$ hexo clean
## 本地生成静态文件
$ hexo g
## 部署
$ hexo d
## 访问
https://***.github.io/blog/

到此，大功告成！

这里还有点小瑕疵，默认主题我不是很喜欢，这里使用next

使用NexT主题

## 到hexo root目录下
$ cd hexo
$ ls
_config.yml  node_modules  package.json  public  scaffolds  source  themes
$ mkdir themes/next
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
$ cd themes/next
$ git tag -l
…
v5.1.0
v5.1.1
v5.1.2
v5.1.3
v5.1.4
$ git checkout tags/v5.1.0
Note: checking out 'tags/v5.1.0'.
…
HEAD now on 1f72f68... CSS: Remove global list-style setting of ul

## 配置主站_config.yml（不是theme/next下的_config.yml）
language: zh-Hans
theme: next
## 重新发布即可
$ hexo clean
$ hexo g
$ hexo d