静态博客自动化部署教程
# 前言
原创不易，转载望添加原文链接，十分感谢！
适合人群：
- 专注写作
- 无个人服务器
理论上适用于所有静态托管的博客程序，本文以 VuePress 为例说明
如有疑问，欢迎加入 VuePress 社区交流 QQ 群（见页脚）
服务依赖 Coding 团队版 (opens new window)，感谢 Coding 提供的免费构建服务！
# 什么是自动化部署
简单来说，你的操作只有保存文章，编译与部署等环节，皆交由程序自动完成，让自动化工作流解放你的双手吧！
# 为什么需要自动化
专注写作，无需等待编译部署，结合 Cloud Studio (opens new window) 在线编辑器，随时随地写博客
# 源仓库
源仓库保存的是整个博客源程序，非常重要，注意备份
- 注册 Coding 团队版 (opens new window)
- 新建项目：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
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 个人授权令牌：链接 (opens new window)
- 新建构建计划，修改 Jenkinsfile 配置
- 行 32：
sh "git push -f https://GitHub的用户名:GitHub的个人授权令牌@github.com/GitHub的用户名称/GitHub的仓库名称.git HEAD:master"
# 最终效果
写一篇文章，通过 Git 保存到源仓库
提交成功后，等待几分钟，然后去 Coding 后台查看结果
成功后，打开自己的博客，兴奋地发现，博客已经更新了！🎉