hexo+github pages+域名绑定折腾记

通过github pages来搭建专属于自己的技术博客是当前比较流行和方便的途径，结合轻量级静态博客框架hexo，便可以很快搭建一款属于自己的技术博客，再通过github托管自己的静态网站代码，安全、稳定、免费，同时github pages支持域名绑定，完成相关绑定后，即可通过域名来访问自己的博客空间。其实，搭建专属于自己的博客平台，好处还是蛮多的，一来可以从头到属实践建站流程，二来可以方便、自由地针对自己的喜好来完成各种定制化功能版块，满足技术流专有的瞎折腾欲望。这篇文章主要是记录博主整合hexo+github pages+域名绑定的全过程，也给后来人多一个参考、学习、交流的机会。

hexo安装记

hexo是一个简单、轻量、基于Node.js的静态博客框架，既然它是基于Node.js自然也就需要依赖Node.js平台，所以在本地安装好Node.js是前提。安装很简单，无论是windows系统还是linux系统，通过其官网下载对应的版本安装即可（ps:由于墙的存在，下载速度比较慢，建议大家去其他资源网站下载对应版本），考虑到平时自己平时写博客主要是在windows环境下完成，自然就决定在windows环境下搭建好各种所需要软件信息呢，下文的所有安装、配置操作说明都是基于win7且已提前完成Node.js安装，至于linux系统环境的搭建基本类似，在此就不在赘述，请自行谷歌、百度。

github pages respos创建

创建github pages respos时，和创建普通的respos过程没有区别，唯一需要注意的是respos名字是固定的：yourname.github.io，名字是注册时填写的用户名，过程很简单，在github右上方选择respository -> 输入respos名称yourname.github.io -> 点击完成即可。完成respos创建是为了将博客代码托管到当前respos中，通过下文介绍的hexo deploy命令方便快捷地完成博文的上传更新操作。

hexo 环境安装

hexo 框架安装

完成Node.js安装前提下，hexo的安装很简单，打开Node.js命令窗口，输入下面几行命令即可搞定：

npm install -g hexo-cli
npm install hexo -g

hexo 插件安装（建议安装，后面定制化各种插件功能需要使用）

hexo 插件安装非常简单，常用的插件也就十来种，建议全部安装，后面基于Next主题配制其他第三方插件也需要部分插件才能工作，下面是主要插件的安装命令，直接拷贝运行即可：

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-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --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

hexo 简易使用说明

在安装好hexo及相关插件后，接下来我们就可能通过hexo命令来完成博客目录的初始化

// 建立一个博客目录，并初始化博客，hexo为文件夹的名称，本地创建了一名称为hexo目录
hexo init hexo

初始化完成后，进入hexo目录后，能看到如下如下目录结构

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

上面每个目录和文件的具体说明请大家参考hexo-建站，这里就不再啰嗦呢。初始化后的博客默认会下载并使用landscape 主题（theme),在themes目录下有landscape 主题目录，到这里，大家就可以启动hexo，查看博客效果呢，在Node.js命令行工具下，进入hexo目录下，输入如下几行命令：

hexo clean //删除工具，主要是完成对上次构建产生的静态资源（html等相关文件）的清楚
hexo generate //基于最新的资源构建博客的各种静态资源（html等相关文件），命令可以简化为:hexo g
hexo serve //启动服务，以便在本地通过：http://localhost:4000/来查看博客界面效果

启动成功后，通过在浏览器的地址栏中输入http://localhost:4000/即可查看到博客界面效果呢。__

hexo 主题安装

hexo一个便捷之处在于可以通过配置使用不用的主题，网上有很多开源的hexo主题，大家可以自动搜索浏览。hexo换主题很简单，把下载好的主题目录放置站点目录下的themes目录下并修改站点配置文件hexo/_config.yml里的theme配置项值为主题目录的名称即可。 由于hexo默认使用的主题样式不符合我的审美观，所以决定使用流行的Next主题，大家可以直接到其github官网下载最新版本，无论是clone还是download方式都可，下载到本地解压后将目录名称修改成next，然后再将此目录放置到hexo/themes目录下，同时修改hexo/_config.yml文件里的如下配置项信息：

theme: next //把主题从landscape修改成为next

完成后重启即可看到引用新主题的博客样式效果呢。Next主题很强大，配置灵活，可以集成多种第三方插件，比如搜索、统计、评论、分享等插件，具体配置请参考其官网，这里就不再啰嗦呢。

git安装

安装git的目的是为了后期可以方便地将最新编辑完成的博文上传到github中，前提是安装了我们上面建议安装的hexo git 插件，修改站点配置文件hexo/_config.yml的deploy配置项：

deploy:
  type: git
  repository: git@github.com:jackybing/jackybing.github.io.git //jackybing是github帐号名
  branch: master

然后直接通过如下命令就可以完成代码的提交工作，方便、快捷：

hexo deploy //将代码提交到github 仓库，可以简写为：hexo d

安装git的操作就自行百度之，这里就不再重复了，过程很简单，下载安装包（windows版本）->安装->生成ssh key->把公钥拷贝到github帐号下ssh keys集合即可。

域名绑定

如果不想直接通过yourname.github.io来访问托管在github上的博客的话，需要自己单独购买注册域名，然后把解析设置好，同时在站点根目录下的source目录下新建名为CNAME文件，里面就是我们购买注册好的域名，注意：域名不要带http,直接填写域名，如:www.zhujianbing.com,同时将站点配置文件的url项值设置为带http开头的域名，如：http://www.zhujianbing.com即可。

域名购买和解析

域名购买可以通过DNSPod或者万网进行购买，由于博主在购买时万网有优惠活动，所以就果断在万网注册购买了自己的专属域名：zhujianbing.com,在万网购买域名后，修改DNS*服务器：**f1g1ns1.dnspod.net和f1g1ns2.dnspod.net，然后去DNSPod注册个帐号，添加域名和记录。通过cmd命令行窗口，ping yourname.github.com,即可获取到github pages的专属ip（gp IP),然后添加A记录类型和CNAME类型即可：

主机记录	记录类型	线路	记录值
@	A	默认	gh IP
www	CNAME	默认	yourname.github.ip

具体可参考【Hexo+Github】域名和github绑定的问题此文章内容，比较简单，就不再赘述。

域名配置

完成域名购买和解析后，需要在站点目录的source目录下新建名为CNAME文件，内容就是我们购买注册好的域名，注意：域名不要带http,直接填写域名，如:www.zhujianbing.com,同时将站点配置文件的url项值设置为带http开关的域名，如：http://www.zhujianbing.com即可。最后重新clean ->generate ->deploy操作后，正常情况下，在半小时内域名解析即可完成，然后就可通过输入自己专属域名来访问个人博客呢。

到这一步，我们的hexo+github pages+域名绑定流程也算是正式完成呢，之间会遇到各种配置的小问题，尤其是Next相关的，通过查看其其github官网，再结合hexo 官网，应该不会什么解决不了的大BUG问题呢！如果需要帮助，请在评论区留言，博主会在第一时间给予解答。

Next 主题配置”坑”

• 配置404.html界面：使用腾讯的404界面，其中homePageUrl项必须以http开头，不然无法返回主页

  homePageUrl=”http://www.zhujianbing.com” //必须以http开头，不然无法解析成正确的主页地址

• 修改Next默认字体和字号

  修改主题目录下的themes\next\source\css\_variables\custome.styl文件，添加下面代码，主要是设置自己想要的字体：

// 标题，修改成你期望的字体族
$font-family-headings = Georgia, sans

// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// 正文字体的大小
$font-size-base = 16px

// 代码字体的大小
$code-font-size = 13px

• 待续…

总结

其实，hexo+github pages+域名绑定配置过程并不复杂，只有稍微具备些技术功能+搜索能力基本上都可以搞定，而Next主题的应用配置根据其官网说明，也都是依样画葫芦，没什么难度。对于有DIY欲的同学来说，如果想手工修改主题模式，那就必须具备些网页开发的基础呢！其实个人博客样式并不重要，重要的是里面的内容质量，唯有产生高价值的内容才会有较高的访问率，也才能达到我们写博客的目的：既方便自己加深知识的理解又给别人更多的参考交流机会。

转载本站文章请注明作者和出处 Jacky-朱建兵 – zhujianbing.com ，请勿用于任何商业用途