前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo自动生成及部署系统

Hexo自动生成及部署系统

作者头像
腾讯云serverless团队
修改2019-02-21 11:31:11
8.6K0
修改2019-02-21 11:31:11
举报
文章被收录于专栏:Tencent Serverless 官方专栏

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

本文系转载,前往查看

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

本文系转载前往查看

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 系统说明
    • 系统流程详解
    • COS目录及文件命名规则
      • 目录说明
      • 文章源文件说明
      • 关于草稿文件
      • 关于访问缓存
      • 关于文章资源和页面的删除
      • 使用说明:
      相关产品与服务
      对象存储
      对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档