如何低成本拥有一个快速访问的双线博客？Coding+Github+COS+CDN+Vercel+Hexo了解一下？

2023-12-06 10:36:10

简介

vercel是什么?

vercel是网站托管服务, 不仅支持静态网站部署, 还支持部署serverless接口。
更新内容只要将文件推送到github即可自动部署, 支持丰富的模板，并且支持自动配置https。
如何实现双线博客?

需要搭建两个服务，通过域名解析设置，*ip和境内ip的分别解析到对应的服务中。

境内服务使用Coding+COS+CDN实现。
*服务使用Github+Vercel实现。
搭建两个服务会不会写博客麻烦?

答案是不会的。只要通过git更新文件到Github或Coding，通过持续集成自动同步内容，以及自动编译站点即可。并且使用传统github pages还需要特地备份一下博客内容麻烦。
点击访问博主的小站，暂时没有加CDN。

Vercel+Github搭建服务

访问vercel, 直接使用Github账号登录即可, 没有Github账号的话先去注册。

登录后点击New Project.

选择浏览全部模板.

找到Hexo并点击.

然后选择你的账号.

选择使用Github创建项目仓库.

输入仓库名称, 如果不想别人看见你的博客文件，把选项勾上设置为私有仓库。

点击deploy

出现这个页面表示已经部署成功了，点击visit即可访问。

点击Dashboard后，点击view domians进行域名设置。

在Domain下面的输入框输入你自己的域名点击添加, 没有域名的需要自己去购买。

添加域名完成后，需要去你的域名服务商的控制台进行域名解析，添加图片中的记录。

域名解析示例:

至此, 已经成功部署了一个服务。

Coding+COS+CDN搭建服务

点击进入Coding, 创建并登陆账号。
登陆后选择左边的项目栏，然后点击创建项目。

项目模板选择左边第一个, 输入项目名并创建。

项目创建完成后，点击左边代码仓库，再点击创建项目，选择普通创建，输入仓库名称，点击完成创建即可。

然后点击持续集成菜单里面的构建计划。

选择制品库，点选自定义构建过程。

代码源选择github, 然后点击授权，授权完成后可以选择仓库，选择之前在vercel中创建的项目。

页面跳转到流程配置中，切换为文本编辑器。

然后在编辑器中输入以下内容, 需要把这部分内容替换成你coding仓库的链接:e.coding.net/classmatelin1/jing*gzhan/www.classmatelin.top.git

pipeline {
  agent any
  stages {
    stage('检出 GitHub') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.BRANCH_NAME]], 
          userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]
        ])
      }
    }
    stage('推送到 CODING') {
      steps {
        // 无需修改 PROJECT_TOKEN_GK 和 PROJECT_TOKEN，它们为 CODING 内置环境变量
        // 请修改为你的代码库链接
        sh "git push https://${PROJECT_TOKEN_GK}:${PROJECT_TOKEN}@e.coding.net/classmatelin1/jing*gzhan/www.classmatelin.top.git HEAD:master"
      }
    }
  }
}

点击保存后，点击一次立即构建，构建失败请仔细检查，成功示例如下:

按刚才创建构建计划的方式再创建一个构建计划用于部署站点，这里代码仓库选择Coding里面的仓库。

打开流程配置的文本编辑器，添加以下内容:

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 {
        sh 'npm install'
        sh 'npm update'
      }
    }
    stage('生成静态文件') {
      steps {
        sh './node_modules/hexo/bin/hexo clean'
        sh './node_modules/hexo/bin/hexo g'
      }
    }
    stage('部署到腾讯云存储') {
      steps {
        sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY} -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
        sh 'rm -rf .git'
        sh 'coscmd upload -r ./public/ /'
      }
    }
  }
}

点击环境变量->添加环境变量, 需要配置4个环境变量, 需要在腾讯云COS控制台找到这些内容, 因为暂时没有创建腾讯COS，可以先添加这个四个环境变量的key, value留空先。
```
COS_SECRET_ID
COS_SECRET_KEY	
COS_BUCKET_NAME
COS_BUCKET_REGION
```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2n06TPt-1617024814872)(/images/pasted-28.png)]