【玩转腾讯云】用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,网站内容相同)。

注明:本文为星速云原创版权所有,禁止转载,一经发现将追究版权责任!

发表评论

登录后才能评论
问答社区 QQ客服
微信客服
微信客服
分享本页
返回顶部