使用Hexo在github上搭建个人博客

最近正好在学习前端开发，想着搭建一个属于自己的个人博客，把自己的技能树整理整理，温故而知新。

如果你有前端开发经验，那么搭建这样的博客就很简单了。

一 什么是Hexo

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

    就是说，你不需要自己从头到尾写一个个人博客的网站出来，该框架已经帮你写好了，你只需要配置一下风格，填充内容，再部署到服务器让别人能访问就行了。

二 为什么部署到github

    GIthub Pages则是github上的一项功能，可以放置网页文件到指定文件夹，然后给你一个专属域名用于展示一些项目，但现在大多用来开发制作个人博客网站。

 

环境配置

Hexo官网上本就有对Hexo安装及使用的详细介绍，墙裂推荐。这里来讲述自己安装的亲身步骤，或有区别。

1.Node.js

用来生成静态页面。移步Node.js官网，下载v5.5.0 Stable 一路安装即可。

2.Git

用来将本地Hexo内容提交到Github上。Xcode自带Git，这里不再赘述。如果没有Xcode可以参考Hexo官网上的安装方法。

安装Hexo

当Node.js和Git都安装好后就可以正式安装Hexo了，终端执行如下命令：

sudo npm install -g hexo

输入管理员密码（Mac登录密码）即开始安装(sudo:linux系统管理指令 -g:全局安装)

注意坑一：Hexo官网上的安装命令是$ npm install -g hexo-cli，安装时不要忘记前面加上sudo，否则会因为权限问题报错。

初始化

终端cd到一个你选定的目录，执行hexo init命令：

hexo init blog

blog是你建立的文件夹名称。cd到blog文件夹下，执行如下命令，安装npm：

npm install

执行如下命令，开启hexo服务器：

hexo s

此时，浏览器中打开网址http://localhost:4000，能看到效果。

本地设置好后，接下来开始关联Github。

关联Github：

创建仓库

登录你的Github帐号，新建仓库，名为用户名.github.io固定写法，如wangdachui.github.io即下图中1所示：

本地的blog文件夹下内容为：

_config.yml    
  db.json 
  node_modules 
  package.json
  scaffolds
  source
  themes

打开_config.yml,打开后往下滑到最后，修改成下边的样子：

deploy:

    type: git

    repository: https://github.com/gonghonglou/wangdachui.github.io.git

    branch: master

你需要将repository后wangdachui换成你自己的用户名。hexo 3.1.1版本后type:值为git。

注意坑二：在配置所有的_config.yml文件时（包括theme中的），在所有的冒号:后边都要加一个空格，否则执行hexo命令会报错，切记 切记

在blog文件夹目录下执行生成静态页面命令：

 hexo generate        或者：hexo g

此时若出现如下报错：

ERROR Local hexo not found in ~/blog

ERROR Try runing: 'npm install hexo --save'

则执行命令：

npm install hexo --save

若无报错，自行忽略此步骤。

再执行配置命令：

 hexo deploy                  或者：hexo d

注意坑三：若执行命令hexo deploy仍然报错：无法连接git或找不到git，则执行如下命令来安装hexo-deployer-git：

$ npm install hexo-deployer-git --save      

再次执行hexo generate和hexo deploy命令。

若你未关联Github，则执行hexo deploy命令时终端会提示你输入Github的用户名和密码，即

Username for 'https://github.com':

Password for 'https://github.com':

hexo deploy命令执行成功后，浏览器中打开网址http://wangdachui.github.io（将wangdachui换成你的用户名）能看到和打开http://localhost:4000时一样的页面。

为避免每次输入Github用户名和密码的麻烦，可添加SSH Key到Github

发布文章

终端cd到blog文件夹下，执行如下命令新建文章：

$ hexo new "postName"

名为postName.md的文件会建在目录/blog/source/_posts下，postName是文件名，为方便链接不建议掺杂汉字。你当然可以用vim来编辑文章。我在用Mou编辑器，支持预览，虽然其预览主题并非我喜欢，如果你有好用的markdown编辑器请推荐给我，感激不尽！

文章编辑完成后，终端cd到blog文件夹下，执行如下命令来发布：

hexo generate                  //生成静态页面
hexo deploy                    //将文章部署到Github

安装theme

你可以到Hexo官网主题页去搜寻自己喜欢的theme。这里以hexo-theme-next为例

终端cd到 blog目录下执行如下命令：

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

将blog目录下_config.yml里theme的名称landscape修改为next

终端cd到blog目录下执行如下命令(每次部署文章的步骤)：

$ hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)

$ hexo g               //生成缓存和静态文件

至于更改theme内容比如名称、描述、头像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中对应的属性名称即可， 不要忘记冒号:后加空格。 NexT 使用文档里有极详细的介绍。

主题下会有更详细的自定义教程，这里就不展开了。欢迎关注我的技术博客：https://wangdachui.github.io