如何低成本拥有一个快速访问的双线博客?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账号的话先去注册。

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第1张图片

  • 登录后点击New Project.

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第2张图片

  • 选择浏览全部模板.

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第3张图片

  • 找到Hexo并点击.

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第4张图片

  • 然后选择你的账号.

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第5张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第6张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第7张图片

  • 点击deploy

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第8张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第9张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第10张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第11张图片

  • 域名解析示例:

upload successful

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

Coding+COS+CDN搭建服务

  • 点击进入Coding, 创建并登陆账号。

  • 登陆后选择左边的项目栏,然后点击创建项目。

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第12张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第13张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第14张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第15张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第16张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第17张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第18张图片

  • 然后在编辑器中输入以下内容, 需要把这部分内容替换成你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+Github+COS+CDN+Vercel+Hexo了解一下?_第19张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第20张图片

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

    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
    

    如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第21张图片

  • 登录腾讯云控制台。

  • 选择对象存储服务。

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第22张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第23张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第24张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第25张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第26张图片

  • 域名解析示例:

upload successful

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第27张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第28张图片

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

如何低成本拥有一个快速访问的双线博客?Coding+Github+COS+CDN+Vercel+Hexo了解一下?_第29张图片

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

配置Hexo

  • hexo官方文档

  • next主题官方

  • 欢迎访问博主小站

你可能感兴趣的:(hexo,git,devops)