静态博客自动化部署教程
时间:2022-07-28
本文章向大家介绍静态博客自动化部署教程,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
# 前言
原创不易,转载望添加原文链接,十分感谢!
适合人群:
- 专注写作
- 无个人服务器
理论上适用于所有静态托管的博客程序,本文以 VuePress 为例说明
如有疑问,欢迎加入 VuePress 社区交流 QQ 群(见页脚)
服务依赖 Coding 团队版 ,感谢 Coding 提供的免费构建服务!
# 什么是自动化部署
简单来说,你的操作只有保存文章,编译与部署等环节,皆交由程序自动完成,让自动化工作流解放你的双手吧!
# 为什么需要自动化
专注写作,无需等待编译部署,结合 Cloud Studio 在线编辑器,随时随地写博客
# 源仓库
源仓库保存的是整个博客源程序,非常重要,注意备份
- 注册 Coding 团队版
- 新建项目:vuepress-blog
- 创建代码仓库:vuepress-blog(一个项目可以有多个仓库)
# Coding 托管
- 创建代码仓库:cnguu.coding.me
- 新建静态网站(自行自定义域名)
- 新建构建计划
- 计划名称:部署博客
- 代码源:Coding
- 代码仓库:vuepress-blog
- 配置来源:自定义构建过程
- 流程配置(Jenkinsfile)
注意,高亮行需要替换成自己的信息
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 {
echo '安装中...'
sh 'yarn install'
echo '安装完成.'
}
}
stage('构建') {
steps {
echo '构建中...'
sh 'yarn build'
echo '构建完成.'
}
}
stage('部署') {
steps {
echo '部署中...'
dir(path: '编译输出目录名称') {
script {
writeFile(file: 'CNAME', text: '域名')
sh 'git init'
sh 'git add -A'
sh 'git commit -m deploy'
sh "git push -f https://${PROJECT_TOKEN_GK}:${PROJECT_TOKEN}@e.coding.net/团队名称/项目名称/仓库名称.git HEAD:master"
}
}
echo '部署完成'
}
}
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
域名不是通过 CNAME 方式解析的,可以去掉行 28
- 变量与缓存,勾选
项目目录
和npm
# GitHub 托管
- 新增 GitHub 个人授权令牌:链接
- 新建构建计划,修改 Jenkinsfile 配置
- 行 32:
sh "git push -f https://GitHub的用户名:GitHub的个人授权令牌@github.com/GitHub的用户名称/GitHub的仓库名称.git HEAD:master"
# 最终效果
写一篇文章,通过 Git 保存到源仓库
提交成功后,等待几分钟,然后去 Coding 后台查看结果
成功后,打开自己的博客,兴奋地发现,博客已经更新了!?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MHA搭建之ssh互信打通脚本
- pt-slave-restart工具
- 二叉树:层序遍历登场!
- 二叉树:前中后序迭代方式的写法就不能统一一下么?
- 二叉树:听说递归能做的,栈也能做!
- 二叉树:一入递归深似海,从此offer是路人
- 关于二叉树,你该了解这些!
- 双指针法:总结篇!
- 栈与队列:总结篇!
- Appium移动端自动化测试--元素操作与触摸动作【移动端自动化测试教程奉上】
- 接口测试Mock利器--moco runner是如何工作的?
- Java中类型判断的几种方式
- 如何实现类似@Component的Spring动态注入功能
- 一次代码优化实践,用了模板方法+策略+工厂方法模式
- 给 JDK 报了一个 P4 的 Bug,结果居然……