丝滑的博客：基于COS/CDN/CI/Hexo/DNS

云存储

发布于 2020-07-02 11:40:12

9890

发布于 2020-07-02 11:40:12

文章被收录于专栏：用户5909132的专栏

作者介绍

羽瀚尘：研究生在读，喜欢互联网技术，善于使用公有云服务满足现实需求。

目前搭建博客有哪些选择呢？

动态博客：WordPress...
静态博客：Hexo、Jekyll、Hugo...

对于一般的内容而言，使用动态博客较为复杂，需要数据库、运行环境的配合。动态博客的代码也较为复杂，修改代码进行个性化难度较高。

静态博客就方便多了，如 github 原生支持的 Jekyll 博客。但是 Jekyll 的主题格式不够多样化，使用 Hexo 的 Next 主题就不错。但随之而来的就是 Hexo 的效率问题，一旦博文数量突破了200-300，需要几分钟的时间来生成完整的网站文件。

博文多了之后，访问量也会随之增多，如何保证访问的速度也是问题。不管是 github 托管还是 coding.net 托管，都是普通的静态文件服务，没有网络加速功能。还有全球访问的问题，其他地区访问国内网站会很慢。

综上，本文给出一整套博客的解决方案，同时解决如下问题：

Hexo 快速生成文件
国内访问加速
国际访问加速
图片增加水印

注意，本文假定读者已经有搭建 Hexo 博客的能力，将着重解决上述四个问题。

基础知识

主要技术名词解释

COS：腾讯云提供的对象服务，可以存放文件

CDN：静态资源加速

CI：持续集成，用于项目开发的一种工作流。一旦修改了代码，就由服务器自动编译、测试

Hexo：一个静态博客程序，可以根据文件生成博客内容

Next：Hexo 中的一个主题，也被修改为很多其他博客软件的主题

VsCode：一款漂亮的编辑器

开始搭建

使用 COS 托管网站

网站一定要放到公网环境下才可以让别人访问到，这里将博客托管到 COS。

先新建一个存储桶

新建存储桶

在基础配置中开启静态网站功能

然后将所有文件上传

上传文件

设置 CDN 加速与自己的域名

在域名管理处设置自己的加速域名

复制自动生成的 CNAME, 用于在 DNS 面板输入。

用云函数实现 CDN 刷新

CDN 文件如果不刷新，在访问新文件时会比较慢。这里用云函数监测 COS 文件变动，一旦有变动就刷新该文件的 CDN。

首先需要新建一个云函数，然后使用下面的云函数代码。更详细的教程可以参考《使用 SCF 自动刷新被 CDN 缓存的 COS 资源》。

下载 SCF 刷新 CDN 示例代码。（https://main.qcloudimg.com/raw/812a50878585ee2c04a74112434f2da2/scf_about_cdn_refresh.zip）
解压所有文件，找到其中的 index.js 文件并打开。
在代码里修改替换成您的具备调用 CDN 刷新接口权限的 SecretId、SecretKey 和需要刷新的域名。如下图所示：

CDN 刷新代码

如需调用刷新绑定在腾讯云海外 CDN 上的域名，请将代码中的 RefreshCdnUrl 修改为 RefreshCdnOverSeaUrl。

选择 COS 触发中的创建与删除事件。

COS 触发

用 CI 实现云端编译

用 Hexo 最大的问题在于繁琐与等待。每发表一篇博文，都需要生成网站文件，等上若干分钟。然后再上传到 COS，这就意味着打开浏览器登录腾讯云或者运行命令行上传。即使一切都自动化了，本地依旧需要保留 Hexo 的运行环境，并且换了电脑之后一切需要重来。

使用 coding.net 提供的 CI 可以解决这个问题。我们新建一个工程，并托管到 coding.net，开启 CI。

添加构建

并填入如下的 pipeline

pipeline {  agent any  stages {    stage('检出') {      steps {        checkout([$class: 'GitSCM', branches: [[name: env.GIT_BUILD_REF]],        userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]])      }    }    stage('构建') {      steps {        echo '构建中...'        sh 'docker pull wenfengand/hexo:v7'        sh './generate.sh'        sh 'ls ./public'        echo '构建完成.'      }    }    stage('部署') {      steps {        echo '部署中...'        sh 'docker pull wenfengand/cosutils:cmd'        sh 'ls ./public'        sh './gen_cos_conf.sh'        sh './upload.sh'        echo '部署完成'      }    }  }}

这个 pipeline 的意思是一旦有新的 commit，就开始用 hexo 编译整个网站，并将生成的静态文件上传到 COS。注意这里使用了我自己的 docker image，开放在 hub.docker.io。另外如果要上传到 cos，还需要在环境变量中设置 cos 相关的密钥。

用 COS 实现图床+水印

图床的实现与网站相同，都是静态文件托管，在此不再赘述。

水印由 COS 的图片处理功能实现，首先新增样式。