【玩转腾讯云】用COS+CDN+CI+Hexo+Next+VsCode+智能DNS搭建丝滑的博客

背景

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

动态博客：

1. WordPress

2. ...

静态博客

1. Hexo

2. Jekyll

3. Hugo

4. ...

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

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

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

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

1. Hexo快速生成文件

2. 国内访问加速

3. 国际访问加速

4. 图片增加水印

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

基础知识

主要是技术名词解释

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

CDN：静态资源加速

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

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

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

VsCode：一款漂亮的编辑器

开始搭建

使用COS托管网站

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

先新建一个存储桶

新建存储桶

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

然后将所有文件上传

上传文件

设置CDN加速与自己的域名

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

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

用云函数实现CDN刷新

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

首先需要新建一个云函数，然后使用下面的云函数代码。更详细的教程可以参考这里

1. 下载 SCF 刷新 CDN 示例代码。
2. 解压所有文件，找到其中的 index.js 文件并打开。
3. 在代码里修改替换成您的具备调用 CDN 刷新接口权限的 SecretId、SecretKey 和需要刷新的域名。如下图所示：

CND刷新代码

如需调用刷新绑定在腾讯云海外 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的图片处理功能实现，首先新增样式。

新增样式

选择缩放

文字水印

分隔符可以自由选择

添加水印之后的样子

用VsCode本地编辑博文

VsCode是一个漂亮的编辑器，安装Markdown插件与PicGo插件后可以比较方便的上传图片。

Vscode PicGo插件

在Vscode中选择文件->首选项->设置，然后搜索PicGo，选择腾讯云

PicGo设置

然后可以按住Ctrl+Alt+U上传粘贴板中的图片。

用DNS实现国内国际分流

打开DNS解析页面，为国内与国际的IP设置不同的目标地址。国内的话就指向上文搭建的CDN，国际的话就指向国际CDN（需要在云服务商的国际版再搭建一个CDN，网站内容相同）。