利用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 |
生成项目之后,我们用Visual Sutdio Code 打开项目目录
我们可以在本次测试一下,运行起来。
1 | > hexo g |
以此运行这两个命令,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
格式文件,注意配置项与值之间的空格,
1 | deploy: |
生成静态文件和推送
配置好部署参数,我们需要利用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。
Push完成之后,可以到Coding上查看项目的代码文件是否更新了。
启动Pages服务
在项目的首页可以看到Pages
选项。
我们进如Pages启动Pages服务,需要填写的信息是当前项目要启动Pages服务的分支,刚才建立的分值是master,所以填写master分值,确定之后,可以浏览效果,有时立即浏览可能并不会生效,需要等待一段时间。
当我们浏览出现的时候,发现博客是有了,但是样式和脚本怎么都没有加载呢?
原因是我们还没有为项目配置站点信息,在_config.yaml
配置一下站点信息
1 | url: http://itpie.coding.me/blog |
把这两个配置项填入,url代表站点地址,root代表博客所在目录,由于Coding分配给我们的个人域名是用户名.coding.me
,而具体到一个项目的Pages服务分配的地址是用户名.coding.me/项目地址
,所以刚才浏览的时候没有加载样式,是因为站点请求的资源为错误的路径,需要为root
配置项指明是那个子目录。
之后重新部署hexo d
,再次浏览可以看到,样式出来了,很漂亮。
自定义域名
还是在Pages面板里配置,输入自定义域名,确认之后提示需要在域名服务商的域名解析中配置CNAME指向pages.coding.me
这里我已阿里云的万网为例,为自定义域名配置CNAME
我为@配置,@代表着没有前缀,即itpie.cc
,也可以指定一个前缀,如blog
,那么你的自定义域名访问就应该是blog.itpie.cc
。
接下来看一下自定义域名的浏览效果,额…发现怎么样式也没有呢?奇怪?
打开浏览器的开发者面板,发现css和js请求路径都是错误的,中间多了一个blog
,原因是刚才我们配置了root
参数为/blog/
,但是不配置这个,Coding分配的域名有访问不了。
由于我也找不到合适的解决方案,所以这里我想应该取舍,假设我们要让自定义域名访问正常,就需要把root
改为/
,修改一下配置文件:
1 | url: http://itpie.cc/ |
重新执行hexo clean
清空目录,hexo g
重新生成,并执行hexo d
部署。再次浏览自定义域名,OK,访问正常!