2

使用阿里云效自动打包生成hexo静态页面以及部署

 4 months ago
source link: https://raye.wang/2023/11/10/%E4%BD%BF%E7%94%A8%E9%98%BF%E9%87%8C%E4%BA%91%E6%95%88%E8%87%AA%E5%8A%A8%E6%89%93%E5%8C%85%E7%94%9F%E6%88%90hexo%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2%E4%BB%A5%E5%8F%8A%E9%83%A8%E7%BD%B2/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

使用阿里云效自动打包生成hexo静态页面以及部署

Raye Wang
2023-11-10 15:05:00

博客系统有很多,但是在我看来从本质上区分大致可以分为2类:动态和静态

有完整的后台可以直接在后台编辑文章发布,使用起来很方便,缺点是运行需要时时刻刻占用服务器资源,内存和CPU等(也有很多出色的博客系统占用资源很小,如:typecho),同时如果一个博客本身依赖的主键不少的话,部署起来难度也不低,当然大部分博客系统可以一键部署和docker部署,使用起来还是很方便的

在电脑上写好文章,通过命令生成静态页面或者直接传到服务器,服务器上面也运行着博客程序,但是没有对应的后台,当文章文件到了服务器之后由服务器上面的博客系统自动生成对应的静态页面,有些博客系统也自带了一个http服务,如我现在使用和文章介绍的hexo就是这种,静态博客的好处是占用服务器资源少,因为生成的纯静态的HTML,所以只要服务器上面有http服务器就可以了,但是缺点也很明显,使用不方便,虽然直接在电脑上面安装还算方便(相对于静态博客来说)

当然也有一些博客系统本身就可以2种方式都支持(如:solo),本身就是动态博客,但是也可以生成静态页面以减少资源的占用,毕竟对于大多数人来说,博客只是一个记录自己成长过程的地方,每学到一个新的东西,写一篇文章,加深一下自己的印象,或者解决了某个问题,写一篇文章记录,当下次遇到了就可以快速解决,同时把博客内容放到网站上,可以加快别人的学习和解决同样的问题。所以如果一个博客如果本身运行占用了不少服务器资源,对于个人来说,如果服务器资源足够好,那还无所谓,但是大部分的个人服务器都是承载着自己做测试的一些环境,所以资源本身存在缺乏的情况,同时如果只是想搞一个自己的网站,记录自己的成长,就要因此付出不小的服务器开支,会劝退不少人(静态博客可以直接部署到网站空间中,价格比服务器便宜很多),而且很多人会把文章发布到 GitHub Pages,所以我想这才是静态博客出现的原因吧

ghost的痛点

一开始我也是用到动态博客,因为毕竟网站后台直接写文章还是很方便的,起初我一直是用的ghost ,但是因为需要迁移服务器,所以需要重新安装,结果发现在我新服务器上面没办法安装最新版的nodejs(centos 7.9)因为系统某些组件版本太久,但是ghost又必须要用最新版的nodejs才能安装(讲真,ghost更新很频繁,nodejs更新也很频繁,但是不通版本之间兼容性真的好差啊)。我新的服务器上面又有一堆的东西了,又不想重装系统,加上新版的ghost的编辑器越改越不好用(个人感觉),所以干脆打算换一个博客系统

当时也看了很多博客系统,从动态的到静态的,很多动态的我很喜欢,但是要么部署麻烦,要么资源占用不少(主要是Java的,因为我本身就是Java开发),虽然有typecho这种,但是我又不想在搞一套PHP环境,索性选择了静态博客,但是静态博客每次写完都必须要在本地电脑上执行命令生成HTML,然后把HTML复制到服务器上面去发布(hexo有专门的部署命令,但是是否支持部署到自己服务器以及指定目录就没有研究过了),这样很麻烦

想起来了之前看过的阿里云效,可以自动做单元测试,编译打包和部署,相当于一个云端的Jenkins,只是相对于Jenkins来说,更加简单,于是便开始研究能否利用阿里云效给我自动生成HTML和部署到服务器,便有了此文,购买服务器以及服务器上安装http服务器就不用说了,我的http服务器是用的nginx,因为本身自己测试也需要用到nginx给我做反向代理这些

本地电脑进行文章编辑,编辑完成上传到阿里云效的git服务中,然后由阿里云效执行hexo命令生成HTML,打包HTML发送到服务器指定目录,在服务器执行解压命令

流程图

第一步:本地环境

首先在电脑上面安装hexo和git,其实不安装hexo也行,只要有博客网站的代码就行了,这种方式下,hexo主要就是创建博客网站的目录(新写文章时,可以直接在目录里面创建文章的md文件即可),git安装方式就没有啥好说的了,至于hexo,因为是基于nodejs的,所以需要先安装nodejs,hexo的安装详细可以参考hexo 文档

第二步:阿里云

1 创建账号开通服务

首先要创建阿里云的账号,然后开通云效服务,服务用免费的就完全满足需求了

2 创建codeup项目并上传

在云效中的codeup中创建一个博客的项目,创建好之后把本地博客网站的目录上传到codeup中

3 创建云效DevOps项目

进入云效DevOps中,创建一个DevOps项目,如果直接就有就不用创建了,点进去就行了(不清楚其他环境,因为我账号开通云效时间比较久,我进入到DevOps的时候就已经有一个项目了)

创建流水线

在DevOps项目点击添加流水线,选择新建,选择任意Node.Js模版,我这里为了简单就直接选择了【Node.js · 测试、构建、部署到阿里云ECS/自有主机】模板(这个可能会随着时间变化而改名),选择了其他模板也无所谓,反正这个主要是靠自己配置

选择模版

点击创建按钮创建流水线

5 配置流水线
a) 代码源配置

首先配置流水线源,选择codeup,当然如果不是用的codeup也可以选择其他,只是codeup即免费也更方便而已

选择数据源

选择对应的仓库,同事开启代码源触发

b) 删除测试
删除测试环节

需要将流水线中的测试环节删除,因为过不了会导致流水线不会继续执行,而且就算过了也没有必要,会浪费时间(免费版每个月有1800分钟打包时间,相当于每天1个小时)。点击其中一项在右边弹出来的窗口中有删除图标

c) 配置Node.js构建

点击Node.js构建,进入配置页面,选择Node.js版本(需要根据当前hexo适配的版本选择)我这里选择的是16.8版本,如果没有推荐的版本,建议选择附近高版本,只能往高选,不要选低版本,否则容易出现兼容问题

选择版本之后在构建命令中输入

npm install hexo
npm install
npm run deploy

为了减少出错可能,加上了npm install hexo这里是不支持全局安装的,所以只能执行局部安装命令,另外项目本身其实执行npm install的时候也是会安装hexo的,只是我这里配置如果不添加npm install hexo 会抛异常,所以添加了,反正添加也没有什么影响,配置图如下:

20231113095112.png

Node.Js构建配置好之后,点下面的构建物上传,上传方式选择归档至云效公共存储空间,制品名称可以选择默认,打包路径public/,如下图

20231113095404.png
d)主机部署配置

点击主机部署进入主机部署界面,首先选择制品,就刚刚的,比如我得是Artifacts_${PIPELINE_ID}

然后选择主机组,这里如果一开始没有创建过主机组需要点击新建主机组,新建过程中根据提示和实际情况选择创建就好了

部署配置主要配置下载的压缩文件到服务器的什么目录,执行命令的用户,已经执行的脚本,这里可以直接输入脚本命令,比如我得配置,下载路径是**/home/blog/package.tgz,执行用户是root** 部署的脚本因为我只需要一个解压命令,所以直接在脚本里面输入了解压命令,各位可以根据自己的实际情况选择,我的配置如下图:

20231113100041.png
e) 保存并运行

配置完成之后,点击保存并运行,看看有没有问题,如果有问题,可以看到底哪一步出了问题(云效在某个步骤出错了会有提示,并且也有日志可以追踪)

第三步:服务器配置

需要在服务器上面安装http服务器软件以及将域名指向到服务器,这里我是用的Nginx,各位可以根据实际情况选择自己的服务器软件(静态服务器软件即可)

第四步:写作

全部搞好之后就可以开始写作了,可以通过hexo命令创建一篇文章,也可以直接在本机网站程序的\source_posts目录创建文章(.md格式),写好之后上传到git,就可以自动打包并且部署了


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK