Hexo自动生成及部署系统

2019-02-21 11:31:11 浏览数 (1)

转载至 https://cloud.tencent.com/developer/article/1388235

原作者：囍冯总囍

Hexo自动生成及部署系统

项目源码

系统说明

本系统灵活的借用了腾讯云COS作为对象存储和静态网站托管，使用腾讯云SCF作为Hexo的运行环境。通过SCF上内置的COS触发器，实现了COS上markdown源文件一旦修改，则自动通过SCF上的Hexo将页面渲染为静态页面并部署到COS的指定目录下，同时刷新CDN。具有全自动、自扩容、高并发、无服务器特点的FasS架构。

本项目主要有以下几个功能：

  1. 渲染Markdown文件为静态页面
  2. 将渲染的静态页面部署到COS的指定目录下
  3. 刷新CDN缓存

本项目的初衷是由于公司业务需要，加入平台的商户可以在管理后台发广告、公告、文章等等，遂决定采用Hexo作为Markdown的渲染引擎，前端使用Editor.md作为编辑器，用户只要将编辑的文件保存到COS指定目录后就会触发SCF上的Hexo进行页面渲染，并自动部署到COS上的静态网站中，实现发布的文章的多渠道访问。同时页面的访问压力全部转移到COS上，借助CDN，提高用户的访问体验。

系统流程详解

  1. SCF绑定了该Bucket的全部创建和全部删除事件的触发器
  2. COS上指定Bucket中指定目录下拥有如下类型前缀（res/）和后缀（.md）的文件（如/res/xxx/wrt_[timestamp].md）发生变动时，会自动通过触发器触发SCF上的HexoServer函数
  3. SCF下载新增的文件到/tmp/source/[filename].md目录下
  4. SCF读取源文件头部的Front-Matter部分，获取文件的abbrlink字段值拼接为该文件的永久链接
  5. SCF调用Hexo的Generate命令生成指定文件，并将文件生成于/tmp/public/abbrlink/index.html目录下
  6. SCF删除下载的source源文件（目的是减少下一次生成的处理量，加快生成速度）
  7. SCF将本次新生成的文件上传到COS对应的目录下
  8. 当COS上有新文件上传后，触发SCF的创建事件，SCF根据路由规则自动刷新相应的CDN链接

COS目录及文件命名规则

目录说明

SMD5(*)表示对*进行内容进行16位MD5 [*]整体表示该字段为变量，替换对应内容时无需保留方括号

**COS目录详细说明：**

  • /404该目录对应的网站的404页面
  • /blog该目录为文章的静态页面目录，该目录内容由Hexo自动生成，该目录文件由SCF自动维护，通过修改/res/SMD5([organType][organId])/wrt_[timestamp].md的源文件，SCF会自动生成对应静态页面并替换到该目录下。同时该目录也是面向用户的目录，用户看到的一切静态页面都存放于该目录下。
  • /css该目录对应的网站的css目录
  • /img该目录对应网站的img资源，并非用户的资源，请勿存放其他资源
  • /audio该目录对应网站的音乐资源，并非用户的资源，用户的音乐请存放到/res/*的对应目录下
  • /js该目录对应网站的js资源
  • /photoswipe该目录对应网站的看图插件
  • /index.html该文件为网站首页
  • /res该目录为用户的资源文件目录
  • /res/SMD5([organType][organId])该目录为机构的资源目录，目录名采用16位md5值，md5内容为机构类型 机构ID的形式
代码语言：javascript复制
1. `/res/SMD5([organType][organId])/[organName]`该文件为该目录所属机构的标识文件，文件无内容，文件名`[organName]`为该机构的中文名称，方便后期管理维护
代码语言：javascript复制
1. `/res/SMD5([organType][organId])/img_*.*`以`img_`前缀的文件为该用户上传的图片资源文件
代码语言：javascript复制
1. `/res/SMD5([organType][organId])/aud_*.*`以`aud_`前缀的文件为该用户上传的音频资源文件
代码语言：javascript复制
1. `/res/SMD5([organType][organId])/vid_*.*`以`vid_`前缀的文件为该用户上传的视频资源文件
代码语言：javascript复制
1. `/res/SMD5([organType][organId])/wrt_[timestamp].md`以`wrt_`前缀和`.md`后缀的文件为该用户上传的文章资源，该类资源具有特殊的触发器（触发规则为`res/`目录下且后缀为`.md`的文件），当资源发生改动时会自动触发SCF上的Hexo去Generate静态页面并上传到`/blog/[uuid]/index.html`。其中uuid为在对应markdown源文件中Front-matter中配置的`abbrlink`字段。该字段随着该文章的产生而产生，代表该文章的唯一标识，Hexo生成的永久链接也是以该字段构成。这样就实现了即使修改了原文件的文件名和内容，生成的文章链接依然不会改变。

文章源文件说明

用户的每一篇文章对应的都是一个MarkDown源文件。该源文件由Hexo自动渲染为静态页面并部署到COS的静态网站中。此源文件需要有一段Front-Matter，以此告知Hexo文章的一些基本属性。以下就文章的Front-Matter做一下说明：

代码语言：javascript复制
---

title: 你好，世界 //文章标题，显示文章的标题

date: 2019-01-14 11:01:30 //文章的创建时间

abbrlink: '1521186' // 文章的永久链接或唯一标识，该内容一旦创建后不可变更，否则导致永久链接失效

updated: 2019-01-14 11:01:30 //文章更新时间，选填

mp3: https://xxx.com/xxx.mp3 //选填，可指定文章背景音乐，无该字段时系统自动使用随机音乐

---

关于草稿文件

为了方便资源统一管理，用户可将文章草稿保存到/res/SMD5([organType][organId])/wrt_[timestamp].md.draft文件。只要后缀名不是.md系统就不会进行渲染自动发布。

关于访问缓存

由于外部域名https://xxx.com开启了CDN加速，所以存在一定的缓存时间（默认设置为30天），这会导致即使系统渲染完source文件并上传不部署到COS中，在CDN缓存未过期前用户也无法查看最新的已更改的网页内容。为此，系统在deploy页面完成后，触发SCF调用接口刷新CDN缓存，但即使这样CDN的缓存刷新时间也存在大概5min延时。所以如果希望用户在第一时间可以查看渲染后的页面，可使用非CDN路径进行访问：https://xxx.cos-website.xxx.myzijiebao.com。但此域名由于未开启CDN加速，虽然能够实时看到文件变化但会影响用户的访问体验，所以建议仅供预览时使用。

关于文章资源和页面的删除

当用户将res目录下的资源删除时，不会触发任何事件删除已发布的页面，用户需自己实现在删除source文件时删除对应的已发布的页面静态页面。但用户无需关心刷新CDN，因为系统会自动处理

使用说明：

  1. clone项目到CentOS7中。（由于腾讯云的SCF是运行于CentOS7环境下的Docker容器，所以需要使用CentOS7上执行一下npm install来安装对应的依赖包）
  2. 根据需要和配置修改_config.yml中的配置
  3. 去Hexo官网找一个你中意的主题并安装上（安装步骤请自行学习）
  4. 配置好后，执行npm install
  5. 本地调试运行
  6. 根据需要修改index.js
  7. 打ZIP包并上传到SCF的函数中
  8. 配置号SCF的触发器（COS触发器-你的bucket-全部创建 和 全部删除）
云函数 对象存储 hexo cdn 内容分发网络CDN

0 人点赞