hexo利用coding自动化持续集成云端部署多平台

hexo利用coding自动化持续集成云端部署多平台

话谈博客网站维护的感慨

事实上大概小半年前因github难受的访问速度,我开始着手部署coding和github双平台的时候我就在coding那边看到这个功能了。coding上面更新还是蛮快的,不过有些好功能在消失,比如免费的静态页面部署(跑去腾讯云那边商业化收费去了),也有些复杂的功能在上线,不再仅仅是一个代码托管的地方,还可以完成项目协同、直接部署等功能。

前阵子我和一个朋友讨论博客网站的时候也谈到了网站维护的问题。他使用wrodpress搭建的博客不知道怎么蹦了。嘛,我曾经大一的使用使用wrodpress、Zblog等搭建的博客也是,其实主要是我们这类总是想折腾,时不时就去改动,而这类包含后端的博客程序总是给人一种不太经得起折腾的感觉(或者我们折腾的方式不太对?),各种魔改功能、自定义页面,最后博客越玩越卡,问题越来越多,维护起来就很烦心了。最后转用简书、新浪博客等一阵子,又被各种审核、封文搞得心情爆炸。所以后面我这边改用hexo这种无后端,纯静态的博客之后觉得很省心,时不时想折腾几下也很简单,备份几下主要的配置文件历史就可以了,就算被搞爆了,没事,文章就算md文件,拉一下配置文件马上满血复活,很耐折腾!

不过和朋友的讨论其实让我发觉但凡涉及后端的东西,就真是麻烦,因为一旦自己要改自定义的内容,就需要从后端代码中去改,一旦改出问题,整个网站里面出大问题。即使轻后端的hexo,在我部署在surface上后,也需要配置node.js环境、git工具等,自己改动的各种小功能live2D、中文标题链接优化、标题表情、评论区等等这些都是从后端代码中去改动的,一旦某个工具失效或者电脑出问题了,文章虽然没事,博客样式什么的很快恢复,但这些后端代码中的改动就很麻烦了。最主要的是单端使用这点的确也很限制使用感受,所以让我前阵子一直很期待印象笔记的markdown写作功能,毕竟就可以使用印象笔记在笔记本、电脑、手机上多端写作markdown文章之后,有空在使用安装hexo的电脑上传博客就行了。
然而事不随人愿,印象笔记那个markdown写作就是个垃圾!不支持多端使用,卡得一批,有时候还会出现无法复制的bug。最重要的是印象笔记markdown内容是非文件格式,导入导出非常麻烦,有时候想对多个文件中的的相同内容如对象存储访问链接进行修改,根本没法修改。这要是文件,一个脚本就多个文件内字符编辑了。

所以基于对本地部署的hexo环境的担忧和对多端写作的不便,如何让hexo上云,就成为了一个重要的需求。

初识自动化云端集成部署

在前阵子,我查找hexo多端编辑的时候就看到了在云端架设hexo的方法,比如弄个服务器,安装hexo环境和工具,不过这成本有点高,稳定性难说。有些玩出花的方法,代码备份云端,拉取下拉编译又上传源码什么的操作。最后我还是觉得利用CI自动化部署的方案很不错。网上主流的方案是使用Travis CI+Github实现。

要描述这个实现的过程的话,其实就是把你的未编译的源码放到coding、github之类的云端仓库去,设置一个触发CI的条件,比如仓库文件更新之类的,当触发CI之后就会在云端根据你配置Jenkinsfile文件这种脚本,自动化的创建一个虚拟环境并执行你预设的命令对你的仓库代码进行编译运行。用在hexo+coding+CI上,可以这样理解。

把必须的hexo源码上传coding云端仓库中,触发CI运行一台虚拟机,加载node.js环境以及我们的hexo的依赖文件等,并在虚拟机中执行hexo deploy进行部署到你的静态页面托管去。

当然具体实现起来因为大家情况不一,其实方法很多样(又能玩出来花)。比如有的人是使用CI执行hexo g渲染出来静态页面文件后,根据Jenkinsfile文件中配置的Git上传到指定的仓库托管(如github支持的静态托管页面仓库,coding这边目前已逐渐不支持)。使用hexo中的hexo deploy生成的话,git这个过程相当于是在hexo的配置文件中配置的,由于hexo支持还是挺广泛的,所以可以在hexo生成之后通过hexo的依赖支持上传静态页面到腾讯云对象存储等其他支持静态页面托管的产品上面去。要说的话,我就挺喜欢用对象存储,速度挺快的。因为github受墙的影响,真心快不起来,而coding的静态页面业务受监管或者产品策略问题,目前也是放在镜外的,前阵子可能是因为腾讯云的轻量应用服务器上线,很多人使用腾讯云境外轻量服务器搭建梯子,导致腾讯云一些境外服务器IP被墙了,连我部署在coding上的静态网站也备受影响。目前我就直接搭建了coding、github和腾讯云对象存储三端静态页面托管,每次我这边执行hexo部署,就会将渲染的静态页面部署到这三端上面去,后面考虑还准备利用腾讯云的对象存储对接CDN,让网站访问速度更加。

部署方法

上面长篇大论讨论了些需求背景和原理,这里我们来讨论一下26日弄了半天遇到的各种坑。

由于我们这边是部署在coding上面,所以就以这边的设置作为参考,想使用Travis CI+Github方案的话,可以参考文后的以下其他技术讨论参考方法。

熟悉git

首先在这样部署前最好先熟悉git工具,我上午就折腾在这上面了,上传hexo源码到仓库,最后渲染的文件总是少了些部分。排查了好一会,才发现hexo和其主题NEXT也是其他使用者在仓库中写的,其中有他们配置的.gitignore文件,这个文件在执行git的过程中会让git工具忽视文件中备注的一些文件夹。

git工具使用过程很简单,网上下一个git软件安装。
新建个本地仓库文件夹,进入文件夹右键选择git上传工具,执行git init初始化命令就可以(这时候文件夹其实被创建了一个隐形的.git文件夹)。

本地仓库建好了,如果是需要本地仓库放进来代码并上传云端建好的项目仓库,那就:

1
2
git remote add origin https://云端项目仓链接.git  //关联仓库
git push -u origin master //推送本地上去主仓库

如是私人仓库,会要求输入密码,也可直接链接中附带密码访问,或者在仓库端和使用的本地端创建匹配秘钥,这样连密码都不用输入了。
如果本地仓没内容,需要把云端的仓库内容拉下来,就:

1
git clone https://云端项目仓链接.git

那么如何git上传呢

1
2
3
4
git status   //检查文件状态
git add -A //添加变化到版本暂存,平时单个文件 `git add 文件名`
git commit -a -m"first commit" //本次版本备注信息
git push //推送云端

直接复制粘贴一键多连操作(大雾,这个一粘贴就执行了,注意哈)。当然,真正使用时最好git push前冷静下看下,毕竟一git push,那云端那个就被本地端覆盖了,你要是不小心拿本地一个空仓库推送了云端,那就祈祷云端有历史版本吧。
其他有用但不常用的命令集可参考以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
git remote rm origin //删除远端仓库关联
git remote -v //查看已关联远端库
git log //查看记录
git reset --hard HEAD^ //回退版本 HEAD HEAD^ HEAD^^ HEAD~100
cat filename//查看文件内容
git checkout -- readme.txt。//放弃工作区中的内容
git rm filename //删除文件
git branch //查看分支
git branch <name> //创建分支
git checkout <name> //切换分支
git checkout -b <name> //创建+切换分支
git merge <name> //合并某分支到当前分支
git branch -d <name> <name> //删除分支

hexo和其主题的编写者肯定是为了渲染出来网页页面后上传的时候忽略到不必要的文件,然而我们现在需要将源码完全git到仓库,有.gitignore文件这个文件就导致一些源码文件夹没上传上去,而且会导致这个文件所在的文件夹一一个文件的形式存在在仓库,而并非将整个文件夹上传。另外,那个隐藏的最后最好在文件夹显示中打开显示隐藏文件,这些源码中别人隐藏的.git文件夹对我们上传是有影响的.git文件夹包含别人仓库的git信息,也会影响我们git源码,所以如果你的hexo源码已经从各处下过一些插件或者其他源码之类的内容,记得查看一下是否有隐藏的.git文件夹,及时删除掉。更坑的是即使删除这些文件,重新git,仍然无法解决仓库中显示为一个文件夹同名的文件的情况。这时候只有把这个整个本地文件夹全删除掉,git这个文件夹被删除的信息上云端,让云端仓库那个同名的文件消失,再重新复制文件夹进来,并检查删除完了.gitignore文件和隐藏的.git文件夹,才能正常的上传。

CI的git

由于源码我们要设置上传到其他仓库或者对象存储的,所以源码中会有我们的git链接、用户名、密码等信息,这时候我们的源码最好放在一个私人仓库,而由于我这边是要将源码渲染出来的页面git到coding和github的仓库静态页面托管以及对象存储,这其中就涉及到如coding仓库秘钥的获取问题,要不然你配置好CI,最后执行的时候虚拟机只能告诉你“请检查权限设置,我莫得权限,莫法上传”。

1
2
github免密访问: https://用户名:密码@github.com/项目仓库名.git
coding: https://访问令牌用户名:秘钥@e.coding.net/项目仓库名.git

秘钥权限之类的我这就略过了,百度一下就有。对象存储也是,百度有。
这个git链接的话,看一下,哪里是外部访问私有仓,哪里就这样写,且写这个的配置文件请不要放在公有仓去。

之后可在coding构建和部署中去创建集成任务。如果你没有看见构建和部署,请在coding账号下去开启该功能。

新建构建任务主要也就代码源、代码仓库、使用哪个Jenkinsfile文件配置脚本这几个关键信息。具体的配置内容coding都给了一些模板,脚本中还可以设置env.GIT_BUILD_REF之类的环境变量等,用于一些变化的场景比较有用,这些如何使用可以看说明文档。

我的构建计划就那点内容

pipeline {
agent any //环境,可以指定,比如node环境,agent内容可以写 label node-10
stages {
stage(‘构建’) { //这相当于每个大环境,可以自定义很多环境
steps {
echo ‘构建中…’
sh ‘go version’
sh ‘node -v’ //查看版本信息
sh ‘git clone https://仓库链接.git .’
sh ‘ls -a’
sh ‘npm install -g hexo-cli’
sh ‘npm install hexo –save’ //安装hexo基本内容
sh ‘npm install hexo-generator-archive –save’
sh ‘npm install hexo-generator-sitemap’
sh ‘npm install hexo-generator-baidu-sitemap’
sh ‘npm install hexo-abbrlink –save’ //一些自己加的功能需要的依赖,否则自己改了的一些功能可能生成异常
echo ‘构建完成.’
}
}
stage(‘测试’) {
steps {
echo ‘单元测试中…’
sh ‘hexo clean’
sh ‘hexo g’
echo ‘单元测试完成.’
}
}
stage(‘部署’) {
steps {
echo ‘部署中…’
// sh ‘npm install hexo-deployer-git –save’
sh ‘hexo deploy’
echo ‘部署完成’
}
}
}
}

触发方式在集成部署的选项设置中设置就行了。如果出问题反复查看报错信息排查,基本都能找到原因修复。

参考文章:

Hexo+coding实现自动化部署
腾讯对象存储COS搭建Hexo博客
基于Travis CI实现Hexo在Github和Coding的同步自动化部署
使用 CODING 进行 Hexo 项目的持续集成

-------------本文结束感谢您的阅读-------------