Hexo部署个人博客到Github Page和Coding Page并绑定域名

前言

为什么要在Github上面写博客?具体原因我就不阐述了。以前是用的Wordpress,也自己弄过一个主题,可是总是感觉不怎么满意。后来看到了Hexo,这种简单自由的写作方式吸引了我,于是就把自己的博客搬到了这里。折腾完了也该写个总结,本文主要介绍使用HexoGithub PageCoding Page搭建自己的免费静态Blog并绑定自己的域名,主题是使用的为什么要同时用GithubCoding两个服务呢?因为Github主动屏蔽了百度的爬虫,如果你希望你写的网站数据能够被百度抓取到,就只能用这种折中的方法,国内流量的解析到Coding,国外的解析到Github(这里可以用DNSPod的免费服务)。

准备

本文主要针对Windows平台以及Hexo 3.x

关于Hexo

A fast, simple & powerful blog framework

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
官网地址:hexo.io

Node环境安装

Hexo是一个基于Node.js静态博客框架,所以我们还需要安装Node环境。
官网地址:Node

Git安装

为了把我们的静态文件部署到GithubCoding上面,我们还需要Git这个版本控制工具,本文不讨论Git的详细使用方法,先挖个坑Git简明使用方法
官网地址:Git

安装Hexo

在电脑里面给Hexo安个家,我是安在D:\Github\Hexo文件夹下的,然后打开Git Shell,切换到工作目录,使用npm命令安装(npm的全称是Node Package Manager,是一个NodeJS包管理和分发工具)。

1
2
3
4
5
npm install hexo-cli -g
npm install hexo --save
#如果命令无法运行,可以尝试更换[taobao的npm源](https://segmentfault.com/a/1190000000471219)
npm install -g cnpm --registry=https://registry.npm.taobao.org

本地配置

部署Hexo

Hexo目录下运行以下命令,程序会自动安装所有需要的文件。

1
hexo init

安装Hexo插件

一些必要的插件和部署到git所需的插件以及自动生成sitemap,rss的插件,建议安装。

1
2
3
4
5
6
7
8
9
10
11
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-renderer-ejs --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

启动本地服务

执行以下命令,成功后在浏览器打开localhost:4000可以查看效果

1
hexo server

All Done! 本地配置就这么简单。

部署静态网页到Github和Coding

注册设置GitHub

1.注册Github,自定义用户名如niices,则你的Github访问地址为github.com/niices
2.创建仓库,在主页右上角头像左边有个加号,点击创建New repository

3.初始化仓库,Repository name前面必须和用户名一致如niices.github.io(以github.io结尾的仓库每个账号只能创建一个)。然后就可以访问Github分配给你的域名niices.github.io

Description就是这个仓库的描述如Personal Blog,类型选择Public,这样别人才能访问你的网站,而且免费账户也不能创建私有仓库,这样才符合Github开源的思想。

注册设置Coding

1.注册Coding,自定义用户名如niices,则你的Coding访问地址为coding.net/u/niices
2.创建项目,项目名最好和用户名一致,这样才能通过niices.coding.me直接访问你的网站。

类型一定要选择公开,不然不能开启Pages服务,别人更不能访问。

3.新建Coding-Pages分支
codingpages服务需要新建一个名为coding-pages的特殊分支,并设为默认分支,如下图所示:

4.开启coding-page服务并绑定自定义域名,如下图:

修改_config.yml文件

Hexo根目录下找到_config.yml文件,进入编辑。找到deploy这项,修改为

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
repo: git@github.com:niices/niices.github.io.git
branch: master
- type: git
repo: git@git.coding.net:niices/niices.git
branch: coding-pages

发布到Github和Coding服务器上面

1.新建文章,执行new命令,生成指定名称的文章至hexo\source_posts\postName.md

1
hexo new [layout] "postName" #新建文章

其中layout是可选参数,默认值为post。也可以直接在hexo\source_posts新建markdown文件,但是要注意添加头部信息

1
2
3
4
5
6
7
8
9
10
11
---
title: 基于Hexo部署个人博客到Github Page和Coding Page并绑定自定义域名
date: 2016-3-27 20:22:33
tags:
- Hexo
- Github Page
- Coding Page
- 个人博客
- 自定义域名
categories: 个人博客
---

2.执行clean命令,清除databasepublic问价夹下面的文件(第一次可不清除)

1
$ hexo clean

3.执行generate命令,生成静态站点文件于public文件夹下

1
$ hexo generate

3.X版本下此命令可用hexo g命令代替

4.执行sever命令,开启本地服务器

1
$ hexo server

同样可以用hexo s命令代替

5.本地显示正常就可以执行deploy命令发布到服务器上面了

1
$ hexo deploy

可以用hexo d命令代替

如果一切正常,现在分别访问niices.github.ioniices.coding.me就可以访问到你的个人博客了。如果你还想绑定个人域名,请继续往下面看 ^_^

个人域名绑定

现在要实现国内走coding,海外走github,只要去修改dns解析记录,添加两条CNAME指向上面两个域名就可以了,如图:

注意后面有个点.
Coding由于在前面开启pages服务的时候就绑定了域名,现在就可以直接访问了。
Github还需要上传一个CNAME文件到静态网页的根目录才行,我们可以把这个文件放在Hexo\source文件夹下面,deploy的时候会自动帮你上传到网站根目录。CNAME文件里只需要放你想绑定的域名就可以了,如图:

注意:CNAME文件是没有后缀的

一点小技巧(不时补充)

用Hexo做网站时图片文件的放置

这个问题一开始让我头疼了一会儿,放在七牛吧,既麻烦又不好管理,听说微博图床不错,但我用着总感觉怪怪的。想过用自己的空间搭一个img.niices.com,总感觉写个文章引个图片还要传来传去就蛋疼。
后来看了下Hexo的官方文档。将_config.myl文件中的post_asset_folder选项设为true。然后在source文件夹下新建一个images文件夹,然后就可以直接用markdown语法直接引用图片文件了!
如图:

MarkDown使用相对路径引用图片文件的语法:

1
![](/images/2016/03/images.png)

推荐一个主题-NexT

使用文档