飞雪连天射白鹿,笑书神侠倚碧鸳

0%

Marp用markdown制作PPT

Marp -> ppt/pdf/html -> with markdown

最近需要搞一个技术分享,ppt的风格比较多,发现强大的md语法也能够生成ppt,就试试这种极简风格吧

下面是语法示例
xx.md内容为之前博客文章内容


安装Marp for VS Code插件

文件顶部必须有marp: true用于识别

1
2
3
---
marp: true
---

每页通过---分割,vscode编辑器通过按钮导出预览格式

  • 文件大小
    • a.md 65kb(不含图片)
    • a.html 4kb(不含图片)
    • a.pdf 318kd(含图片)
    • a.ppt 240kb(含图片)
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
---
marp: true
style: |
section {}
---

<!-- Global style -->
<style>
section.sectionEnd {
align-items: center;
}
</style>

<!-- paginate: true-->
<!-- _header: 技术分享 -->
<!-- _footer: - -->

# 技术分享——搭建Jenkins

Leo

---
<!-- _header: 关于部署 -->
<!-- class: section0 -->
<!-- footer: Powered By [Marp][Marp] -->
## 关于前端部署

之前开发时部署采用的是手动打包,上传服务器的方式

加入公司后,看到技术团队用的是自动化部署,即更新master分支后自动编译发布

本次介绍前端如何结合Jenkins进行自动化部署

---
<!-- _header: Jenkins介绍 -->
<!-- class: section1 -->
## Jenkins介绍

CI持续集成 - 自动检测源代码、拉取、构建的过程,减少集成问题
CD持续部署 - 随时推向生产环境,降低每次发布的风险,快速迭代

Jenkins是一个CI工具,简化部署工作流程,丰富的插件生态,可视化的界面配置

其他还有很多CI/CD工具可用于不同场景下

---

<!-- _header: 环境准备 -->
<!-- class: section2 -->
## 环境准备

`Github/Gitlab``Centos ECS``Jnkins`

<!-- ```cmd -->
$ yum install java # 安装依赖
$ yum install jenkins # 安装jenkins
$ service jenkins start # 启动jenkins
<!-- ``` -->

- 访问server ip:8080
- 初始化jenkins并安装通用插件
- 配置完成后如右图
![bg right:40%][login]

---
<!-- _header: 环境准备 -->

## 安装插件

- Rebuilder 用于重新执行构建命令
- SafeRestart 用于重启
- Webhook 触发器
- Publish Over SSH 登录目标服务器
- 配置前端需要的node版本

![bg vertical right 90%][ManagePlugins]
![bg right 90%][nodejs]

---
<!-- _header: 环境准备 -->

## 创建任务

创建任务后

- 关联 GitHub 仓库
- 填写shell命令

![bg vertical right 90%][repository]
![bg right 90%][build]

---
<!-- _header: 环境准备 -->
## 自动部署

通过Publish Over SSH插件实现连接服务器部署

- Source files 打包后的文件
- Remove prefix 删除的目录
- Remote directory 连接服务器的目录

![bg vertical right 90%][sshServerConfig]
![bg right 90%][sshConfig]

---
<!-- _header: 环境准备 -->
## Webhook

Jenkins任务的构建触发器处填写自定义的token,用于和github的Webhook绑定

再次提交代码,可以看到页面触发了新的任务,正在执行,还可以查看执行进度的具体log信息

至此就完成了Jenkins的配置

![bg vertical right 90%][webhooks]
![bg right 90%][progress]

---
<!-- _header: 回顾流程 -->
<!-- class: section6 -->

## 回顾流程

- push本地代码到远端仓库
- Webhook监听自动触发jenkins上的构建动作
- 完成安装node依赖、打包
- 通过Publish Over SSH插件,将打包出来的文件,部署到目标服务器上

---
<!-- _header: 关于Marp -->
<!-- _footer: '' -->
## 关于Marp

左下角的页尾有个Marp,是vs code中支持md语法的PPT制作插件,支持导出html,pdf,pptx

---
<!-- _paginate: false-->
<!-- _footer: '' -->
<!-- class: sectionEnd -->

## END

[Marp]:https://marp.app/
[login]:./Marp用markdown制作PPT/images/login.jpg
[ManagePlugins]:./Marp用markdown制作PPT/images/ManagePlugins.jpg
[nodejs]:./Marp用markdown制作PPT/images/nodejs.jpg
[sshServerConfig]:./Marp用markdown制作PPT/images/sshServerConfig.jpg
[sshConfig]:./Marp用markdown制作PPT/images/sshConfig.jpg
[repository]:./Marp用markdown制作PPT/images/repository.jpg
[build]:./Marp用markdown制作PPT/images/build.jpg
[webhooks]:./Marp用markdown制作PPT/images/webhooks.jpg
[progress]:./Marp用markdown制作PPT/images/progress.jpg
听说,打赏我的人最后都找到了真爱
↘ 此处应有打赏 ↙
// 用户脚本