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

简介

• 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/jingtaiwangzhan/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/jingtaiwangzhan/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
  

  

• 登录腾讯云控制台。

• 选择对象存储服务。

• 选择储存桶列表, 创建存储桶, 这里节点我选的是香港(不用备案，但是也开不了境内CDN)，如果需要使用CDN的请选择境内节点，并且需要进行网站备案。访问权限请选择公有读私有写

• 创建储存桶成功后，选择基础配置，静态网站设置，如图设置保存即可:

• 设置自定义源站域名, 如图所示, 开启CDN的话请在自定义CDN域名中填写内容即可。

• 保存成功后，还需要将CNANE的内容设置到域名解析中， 这里CNAME不一样的，按照你自己的来。

• 域名解析示例:

• 点击储存桶概览，将存储桶名称和存储地域分别填写到刚刚Coding构建计划的环境变量COS_BUCKET_NAME, COS_BUCKET_REGION中。

• 点击秘钥管理会跳转到访问管理，点击API秘钥管理生成一个秘钥， 然后将SecretId和SecretKey填到刚刚Coding构建计划的环境变量COS_SECRET_ID和
  COS_SECRET_KEY中。

• 然后点击一次构建计划，看是否构建成功，构建成功使用你绑定的域名访问, 如图查看服务地址如果是124.156.144.44:443说明COS已经部署成功了， 境外ip访问显示是76.xxx.xxx.xxx或者你本地代理地址。

• 至此双线博客基础内容已经搭建完了，主要是进行博客的配置了。可以点击这里访问小站体验一下。

配置Hexo

• hexo官方文档

• next主题官方

• 欢迎访问博主小站