用Hexo部署到Github建立极简博客

Posted on | | Visitors:

通过HEXO迅速搭建属于自己的博客是一件很开心很有价值的事情。开心在于，自己可以按喜好定制界面风格，价值在于拥有了一个可以输出的地方。

搭建环境

Hexo是目前很流行的博客框架，我选择了它。对应的同类可能还有很多如Jekyll(ruby)，Pelican(python)，Hexo(javascript)。各有各的好，但缘分这东西谁说的准。
Nodejs是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它的npm是全球最大的开源库生态系统。第一次见，好厉害的样子。
Git是目前世界上最先进的分布式版本控制系统（没有之一），对应的是集中式版本控制系统 （CSV、SVN)。
上面三个东西就是需要我们安装到本地的基础三件套。

安装Git

Windows: Download & install git

安装Nodejs

先安装nvm，这是Nodejs版本管理器。也可参考RUNOOB.COM的安装。

$ brew install node
通过 node –version 和 npm –version 检查是否安装成功。

安装Hexo

上面的环境匹配好后，安装Hexo就是一句话的事~

$ npm install hexo-cli -g

操作Hexo完成博客创建

这里要用到一些基本的指令最常用的就有下面这些

1
2
3
4
5
6
$ hexo init [folder] #新建网站
$ hexo g #生成generate静态文件
$ hexo s #启动服务器。可以进行预览 http://localhost:4000/ 
$ hexo d #部署deploy网站
$ hexo clean #清除缓存文件和静态文件 可以理解为修改后刷新一下
$ hexo new [postname] #生成新的博客文件

1.新建myblog文件夹
正式开始，打开Gitbash窗口

1
2
3
4
5
$ hexo init myblog
$ cd myblog
$ npm install
$ npm g
$ npm s

Surprise，surprise，你已经成功的在本地创建了一个你的博客文件夹。同时会生成一个以landscap主题的静态文件页面，可以通过 http://localhost:4000/ 进行访问。
2.找中意的Hexo主题并使用它
这里最经典的是next主题，极简风。Hexo库里面有很多很赞的风格供选择。由于next选择的人多，所以对应的个性化配置教程也会更多些，前期作为熟悉基本操作也建议使用这个，后面对于很多地方理解透了再自由发挥。
找到中意的theme后，点击进入github找到对应的网址如：https://github.com/theme-next/hexo-theme-next 然后运行clone指令如下：

1
2
$ cd myblog
$ git clone https://github.comiissnan/hexo-theme-next themes/next #下载next主题到本地

3.创建github属于你的repository
注册一个属于你的github帐号，这里按正常流程走下来就ok。然后创建一个自己的仓库，可以参考官方的帮助文档[creating a new repository]（https://help.github.com/articles/creating-a-new-repository/） 。这里需要注意的是Repository name 要和Owner的名字一样并且以特定的格式来 如 username.github.io 。以我的为例就是 https://github.com/CarlosPython/CarlosPython.github.io。
4.简单修改站点配置文件
myblog文件夹中有两个_config.yaml文件，这里需要做一下区分，官方将根目录中的叫做站点配置文件，them主题目录下的叫做主题配置文件。到这里我们需要找到根目录下站点配置文件myblog/_config.yaml 修改一些东西。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
title: Minimalist
subtitle: 
description:
authour: CarlosChen
language: en #也可以用中文的zh-Hans
timezone: 
------
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next    #这里改为下载好的主题名
-----
deploy:   #最底部
   type: git
   repo: https://github.com/CarlosPython/CarlosPython.github.io.git #很重要不要弄错了
   branch: master

基本设置完成后，就可以用 $ hexo s在http://localhost:4000/预览一下改动后的效果了。针对主题的一些细节优化升级可以后面再处理。
5.布署博客到github

1
2
$ npm i -s hexo-deployer-git  #安装hexo-deploy-git
$ hexo d

期间第一次用，会需要验证登陆git，照常登陆就OK。此时刷新一下，就可以看到你的博客在git域名了，比如我的https：//CarlosPython.github.io
6.创建一个博客文章试试

1
$ hexo new postname #创建以postname为名的.md文件

用Markdown编辑器就可以写博客了，我用的是sublime 3。
最后上传到git

1
$ hexo g

可能会遇到的问题解决

1.$ hexo s预览时提示4000端口被占用。我是直接退出gitbash再开就ok了，网上说要改端口什么的觉得麻烦。
2.中文title 显示乱码。语言改为中文的对应格式
3.无法Ping通Github。Push的时候报错如下：

1
2
3
4
5
6
$ git push -u orgin master
ssh: Could not resolve hosname github.com:Temporary fail in name resolution
fatal: Could not read from remote repository.

Please make sure you have the correct access rights 
and the repository exists.

解决： ctrl+r输入cmd调出命令提示符，ping一下github.com。 会显示 Ping 请求找不到主机github.com。请检查该名称，然后重试。这个时候需要在host文件作个修改

hosts文件路径： C:\Windows\System32\drivers\etc
右键-属性-安全-编辑，选中当前电脑登录的用户，给自己最高权限，确认。用记事本打开后在最后一行加：

1
2
3
4
5
6
7
8
192.30.253.113    github.com
192.30.252.131 github.com
185.31.16.185 github.global.ssl.fastly.net
74.125.237.1 dl-ssl.google.com
173.194.127.200 groups.google.com
192.30.252.131 github.com
185.31.16.185 github.global.ssl.fastly.net
74.125.128.95 ajax.googleapis.com

保存，然后再ping,发现就有数据了。

3.其它的不知道什么鬼的。直接删除文件夹从来，有点粗暴但很管用，很多时候刚用修改或执行一些步骤理解不到位就会报错，试了几次没法就直接重来一次。

进阶方向

Ending

Happy posting!