前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >静态博客自动化部署教程

静态博客自动化部署教程

作者头像
cnguu
发布2020-10-23 15:57:40
7090
发布2020-10-23 15:57:40
举报
文章被收录于专栏:凉风有信

# 前言

原创不易,转载望添加原文链接,十分感谢!

适合人群:

  • 专注写作
  • 无个人服务器

理论上适用于所有静态托管的博客程序,本文以 VuePress 为例说明

如有疑问,欢迎加入 VuePress 社区交流 QQ 群(见页脚)

服务依赖 Coding 团队版 ,感谢 Coding 提供的免费构建服务!

# 什么是自动化部署

简单来说,你的操作只有保存文章,编译与部署等环节,皆交由程序自动完成,让自动化工作流解放你的双手吧!

# 为什么需要自动化

专注写作,无需等待编译部署,结合 Cloud Studio 在线编辑器,随时随地写博客

# 源仓库

源仓库保存的是整个博客源程序,非常重要,注意备份

  1. 注册 Coding 团队版
  2. 新建项目:vuepress-blog
  3. 创建代码仓库:vuepress-blog(一个项目可以有多个仓库)

# Coding 托管

  1. 创建代码仓库:cnguu.coding.me
  2. 新建静态网站(自行自定义域名)
静态博客自动化部署教程
静态博客自动化部署教程
  1. 新建构建计划
  • 计划名称:部署博客
  • 代码源:Coding
  • 代码仓库:vuepress-blog
  • 配置来源:自定义构建过程
  1. 流程配置(Jenkinsfile)

注意,高亮行需要替换成自己的信息

代码语言:javascript
复制
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

  1. 变量与缓存,勾选 项目目录npm

# GitHub 托管

  1. 新增 GitHub 个人授权令牌:链接
  2. 新建构建计划,修改 Jenkinsfile 配置
  • 行 32: sh "git push -f https://GitHub的用户名:GitHub的个人授权令牌@github.com/GitHub的用户名称/GitHub的仓库名称.git HEAD:master"

# 最终效果

写一篇文章,通过 Git 保存到源仓库

静态博客自动化部署教程
静态博客自动化部署教程

提交成功后,等待几分钟,然后去 Coding 后台查看结果

静态博客自动化部署教程
静态博客自动化部署教程
静态博客自动化部署教程
静态博客自动化部署教程

成功后,打开自己的博客,兴奋地发现,博客已经更新了!?

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/12/26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 前言
    • # 什么是自动化部署
      • # 为什么需要自动化
      • # 源仓库
      • # Coding 托管
      • # GitHub 托管
      • # 最终效果
      相关产品与服务
      云服务器
      云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档