利用coding-pages和hexo搭建个人博客

2016-11-06

其它

hexo

利用pages服务作为个人技术博客的搭建平台变得越来越流行，Jekyll和Hexo的出现，使得搭建一个人技术博客的门槛变得更低。以下将介绍利用Coding的pages服务和Hexo博客框架来搭建一个个人技术博客，并且绑定到自己的自定义域名上，由于Github在大陆的访问速度并不让人乐观，所以就不再介绍，网上也有很多例子，步骤大同小异。

Hexo是基于Nodejs一个的轻量级、快速和高效的博客框架，其支持Markdown书写、一键部署和丰富的插件支持，受到大量开发者的喜爱。

由于Hexo是基于Nodejs平台，所以前期的工作是需要nodejs环境才能工作。

安装Nodejs环境的具体步骤，可以参照这篇文章Nodejs基本环境搭建，在这里就不做过多介绍了。

安装Hexo

我们可以通过安装hexo-cli来生成基本的hexo项目。

需要注意的是尽量使用git bash客户端执行命令，使用cmd或者powshell可能会出现git命令找不到或者未知符号等错误。

1	> npm install hexo-cli -g

全局安装hexo-cli以便可以在任何地方可以使用，现在开始初始化一个hexo项目，在当前文件夹下初始化一个blog目录作为项目目录

1	> hexo init blog

hexo init

生成项目之后，我们用Visual Sutdio Code 打开项目目录

项目目录

我们可以在本次测试一下，运行起来。

1 2	> hexo g > hexo server

以此运行这两个命令，hexo g生成静态文件，hexo server在本地服务器运行站点。启动服务器之后，默认浏览地址为http:localhost:4000端口

创建Coding项目

新建一个用于托管博客的站点的仓库，这里命名为blog

新建仓库

GIT配置

Coding的博客仓库新建完成，复制项目的HTTPS地址，配置到hexo项目中的_config.yaml文件中。在配置文件底部找到deploy配置项

type为部署的类型，git即代表为推送到git仓库
repo为git仓库的HTTPS或者SSH链接，这里我们以HTTPS连接为例
branch为当前推送仓库的分支

_config.yaml为yaml格式文件，注意配置项与值之间的空格，

deploy:
  type: git
  repo: https://git.coding.net/itpie/blog.git
  branch: master

生成静态文件和推送

配置好部署参数，我们需要利用hexo生成静态文件，然后推送到git仓库上。在项目目录下执行一下命令

> hexo g

生成静态文件

即生成静态文件，执行成功之后，静态文件会生成到public文件夹中。接下来就可以推送到仓库上了。

> hexo d

执行后，你回发现竟然报错了…

1	ERROR Deployer not found: git

这个意思是说没有找到git部署插件，我们需要安装hexo-deployer-git，在项目目录下执行

1	> cnpm install hexo-deployer-git --save

安装完成，再次执行hexo d命名部署，会弹出一个对话框要求输入Coding的用户名和密码，确认之后开始push。

git push

Push完成之后，可以到Coding上查看项目的代码文件是否更新了。

项目更新

启动Pages服务

在项目的首页可以看到Pages选项。

Pages服务

我们进如Pages启动Pages服务，需要填写的信息是当前项目要启动Pages服务的分支，刚才建立的分值是master，所以填写master分值，确定之后，可以浏览效果，有时立即浏览可能并不会生效，需要等待一段时间。

配置Pages服务

当我们浏览出现的时候，发现博客是有了，但是样式和脚本怎么都没有加载呢？

原因是我们还没有为项目配置站点信息，在_config.yaml配置一下站点信息

1 2	url: http://itpie.coding.me/blog root: /blog/

把这两个配置项填入，url代表站点地址，root代表博客所在目录，由于Coding分配给我们的个人域名是用户名.coding.me，而具体到一个项目的Pages服务分配的地址是用户名.coding.me/项目地址，所以刚才浏览的时候没有加载样式，是因为站点请求的资源为错误的路径，需要为root配置项指明是那个子目录。

之后重新部署hexo d，再次浏览可以看到，样式出来了，很漂亮。