如何低成本拥有一个快速访问的双线博客?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
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2n06TPt-1617024814872)(/images/pasted-28.png)]
-
选择对象存储服务。
- 选择储存桶列表, 创建存储桶, 这里节点我选的是香港(不用备案,但是也开不了境内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
标签:COS,Github,快速访问,创建,CDN,Coding,点击,env 来源: https://blog.csdn.net/ClassmateLin/article/details/115312084