前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【玩转腾讯云】用COS+CDN+CI+Hexo+Next+VsCode+智能DNS搭建丝滑的博客

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

原创
作者头像
羽翰尘
修改2020-04-07 10:30:01
1.9K0
修改2020-04-07 10:30:01
举报
文章被收录于专栏:技术向

背景

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

动态博客:

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刷新代码
CND刷新代码

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

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

COS触发
COS触发

用CI实现云端编译

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

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

添加构建
添加构建

并填入如下的pipeline.

代码语言:javascript
复制
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插件

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

PicGo设置
PicGo设置

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

用DNS实现国内国际分流

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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 基础知识
  • 开始搭建
    • 使用COS托管网站
      • 用云函数实现CDN刷新
        • 用CI实现云端编译
          • 用COS实现图床+水印
            • 用VsCode本地编辑博文
              • 用DNS实现国内国际分流
              相关产品与服务
              对象存储
              对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档