简介
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"
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 点击保存后， 点击一次立即构建，构建失败请仔细检查， 成功示例如下:
- 按刚才创建构建计划的方式再创建一个构建计划用于部署站点，这里代码仓库选择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
- 1
- 2
- 3
- 4
登录腾讯云控制台。
选择对象存储服务。
- 选择储存桶列表, 创建存储桶, 这里节点我选的是香港(不用备案，但是也开不了境内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主题官方
欢迎访问博主小站