利用coding-pages和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.yamlyaml格式文件,注意配置项与值之间的空格,

1
2
3
4
deploy:
type: git
repo: https://git.coding.net/itpie/blog.git
branch: master

生成静态文件和推送

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

1
> hexo g

生成静态文件

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

1
> 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,再次浏览可以看到,样式出来了,很漂亮。

站点

自定义域名

还是在Pages面板里配置,输入自定义域名,确认之后提示需要在域名服务商的域名解析中配置CNAME指向pages.coding.me

自定义域名

这里我已阿里云的万网为例,为自定义域名配置CNAME

配置CNAME

我为@配置,@代表着没有前缀,即itpie.cc,也可以指定一个前缀,如blog,那么你的自定义域名访问就应该是blog.itpie.cc

接下来看一下自定义域名的浏览效果,额…发现怎么样式也没有呢?奇怪?

错误页面

打开浏览器的开发者面板,发现css和js请求路径都是错误的,中间多了一个blog,原因是刚才我们配置了root参数为/blog/,但是不配置这个,Coding分配的域名有访问不了。

开发者工具查看

由于我也找不到合适的解决方案,所以这里我想应该取舍,假设我们要让自定义域名访问正常,就需要把root改为/,修改一下配置文件:

1
2
url: http://itpie.cc/
root: /

重新执行hexo clean清空目录,hexo g重新生成,并执行hexo d部署。再次浏览自定义域名,OK,访问正常!