Vic's blog Vic's blog
首页
  • 前端文章

    • JavaScript
    • Vue
    • HTML
    • CSS
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 微服务
  • Database
  • Python
  • 学习笔记

    • Java面试宝典
    • 《一个人工智能的诞生》笔记
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 学习笔记

    • 《Git》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
  • 大数据
  • 微服务
  • Java面试
关于
  • 网站
  • 资源
  • Vue资源
  • Java面试真题汇总
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Vic xu

永远期待美好的事情将会发生
首页
  • 前端文章

    • JavaScript
    • Vue
    • HTML
    • CSS
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 微服务
  • Database
  • Python
  • 学习笔记

    • Java面试宝典
    • 《一个人工智能的诞生》笔记
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 学习笔记

    • 《Git》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
  • 大数据
  • 微服务
  • Java面试
关于
  • 网站
  • 资源
  • Vue资源
  • Java面试真题汇总
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

  • GitHub技巧

  • 云原生

  • 博客搭建

    • 解决百度无法收录搭建在GitHub上的个人博客的问题
    • 使用Gitalk实现静态博客无后台评论系统
    • GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
    • 博客源码从GitHub迁移到DevClod
      • 代码迁移
      • 构建配置
      • 编译构建
      • 代码检出
      • 上传软件包到软件发布库
      • 推送自动部署静态网站
      • 执行验证
    • 集成云开发 CloudBase Framework 框架「Function」插件
    • 使用Markmap实现在线思维导图
    • Typora+gitee+自定义命令实现图床
    • vdoing主题效果图
  • 学习笔记

  • 技术
  • 博客搭建
xushengli
2021-06-15

博客源码从GitHub迁移到DevClod

# 博客源码从GitHub迁移到DevClod

当前博客源代码托管在github仓库,存在网络环境不稳定的问题,同时github代码仓库的功能比较单一,不利于各种云原生资源的整合

迁移vuepress博客到华为DevClod平台,实现流水线构建任务自动部署,同时使用腾讯云静态网站托管+GitHub Pages托管静态文件

# 代码迁移

由于DevClod的导入外部仓库功能导入github代码仓库一直失败,使用本地Git的方式迁移代码仓库

将Git仓库克隆到本地,再关联并推送到CodeHub,仅推送master分支代码即可

git push --mirror 新建的CodeHub仓库的地址
1

# 构建配置

由于推送时需要连接GitHub和CODING仓库的分支,将仓库平台获取的Personal access tokens配置到构建配置中

key自己定义,在自动部署脚本中需要引用

# 编译构建

在DevClod上对应的项目中编译构建新建一个任务,代码源选择对应的源码仓库,使用npm构建模板

跳转到构建步骤设置,使用默认的install+build命令构建vue项目

export PATH=$PATH:/root/.npm-global/bin
#设置缓存目录
npm config set cache /npmcache
#设置Devcloud镜像仓加速构建
npm config set registry https://repo.huaweicloud.com/repository/npm/
npm config set disturl https://repo.huaweicloud.com/nodejs
npm config set sass_binary_site https://repo.huaweicloud.com/node-sass/
npm config set phantomjs_cdnurl https://repo.huaweicloud.com/phantomjs
npm config set chromedriver_cdnurl https://repo.huaweicloud.com/chromedriver
npm config set operadriver_cdnurl https://repo.huaweicloud.com/operadriver
npm config set electron_mirror https://repo.huaweicloud.com/electron/
npm config set python_mirror https://repo.huaweicloud.com/python 
npm config set prefix '~/.npm-global'
#如需安装node-sass
#npm install node-sass --verbose
#加载依赖
npm install --verbose
#默认构建
npm run build
#tar -zcvf demo.tar.gz ./*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

编译构建完成后会自动在docs/.vuepress/dist目录下构建出静态的资源

# 代码检出

在编译构建之前,需要checkout初始化源代码,在默认步骤中会自动执行,无需单独配置

# 上传软件包到软件发布库

上传软件包到软件发布库步骤,暂时无特殊用处,使用默认的配置和上传目录即可

# 推送自动部署静态网站

使用执行shell命令的步骤模板,新增执行步骤,基于之前的Git Action自动化脚本,编写shell命令配置

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 设置环境变量
GITHUB_TOKEN=${ACCESS_TOKEN} 
# toKen私密变量
CODING_TOKEN=${CODING_TOKEN}

# 进入生成的文件夹
cd docs/.vuepress/dist

# deploy to github pages
#echo 'vicxsl.github.io' > CNAME

if [ -z "$GITHUB_TOKEN" ]; then
  msg='deploy'
  githubUrl=git@github.com:vicxsl/vicxsl.github.io.git
else
  printf "开始github actions的自动部署\n"
  msg='来自github actions的自动部署'
  githubUrl="https://vicxsl:${GITHUB_TOKEN}@github.com/vicxsl/vicxsl.github.io.git"
  git config --global user.name "vicxsl"
  git config --global user.email "vicxsl@163.com"
fi
printf "初始化仓库\n"
git init

printf "添加文件到暂存区\n"
git add -A

printf "提交\n"
git commit -m "${msg}"

printf "查看当前仓库的状态\n"
git status

printf "历史提交版本\n"
git log

# 设置不使用https代理
# git config --global --unset https.proxy

printf "推送gitUrl%s \n" githubUrl

git push -f $githubUrl master:gh-pages
printf "推送完成 \n"

printf "开始coding pages的自动部署\n"
# deploy to coding pages

if [ -z "$CODING_TOKEN" ]; then 
  codingUrl=git@e.coding.net:vicsl/CODING-Pages/blog.git
else
  codingUrl=https://gFXADQdPoz:${CODING_TOKEN}@e.coding.net/vicsl/CODING-Pages/blog.git
fi

printf "删除和重新初始化仓库\n"
rm -rf .git

git init

printf "添加文件到暂存区\n"
git add -A

printf "提交\n"
git commit -m "${msg}"

printf "查看当前仓库的状态\n"
git status

printf "历史提交版本\n"
git log

printf "推送到coding\n"
git push -f $codingUrl master

printf "推送完成\n"

cd -
rm -rf docs/.vuepress/dist
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

脚本的执行步骤与之前一致,存在一些语法和符号问题,需要在保存执行后根据错误日志进行调试

​ 修改引用环境变量使用${GITHUB_TOKEN}占位符

​ 注意:注释中的 '符号可能会导致脚本执行失败,需要去除

# 执行验证

最后验证一下编译构建的执行结果

编辑 (opens new window)
上次更新: 2021/06/15, 19:33:30
GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
集成云开发 CloudBase Framework 框架「Function」插件

← GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床 集成云开发 CloudBase Framework 框架「Function」插件→

最近更新
01
万字长文:选 Redis 还是 MQ,终于说明白了!
10-11
02
Typora+gitee+自定义命令实现图床
09-13
03
字节终面:两个文件的公共url怎么找?
09-09
更多文章>
Theme by Vdoing | Copyright © 2019-2022 Vic | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×