利用SCF+COS搭建Hexo

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的形式
1. `/res/SMD5([organType][organId])/[organName]`该文件为该目录所属机构的标识文件,文件无内容,文件名`[organName]`为该机构的中文名称,方便后期管理维护
1. `/res/SMD5([organType][organId])/img\_\*.\*`以`img\_`前缀的文件为该用户上传的图片资源文件
1. `/res/SMD5([organType][organId])/aud\_\*.\*`以`aud\_`前缀的文件为该用户上传的音频资源文件
1. `/res/SMD5([organType][organId])/vid\_\*.\*`以`vid\_`前缀的文件为该用户上传的视频资源文件
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做一下说明:

---

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.myqcloud.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-全部创建 和 全部删除)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券