SITCON_2022_R2_從_0_到_GitHub_Actions，以_Hexo_Blog_為例設計專屬的_CICD_Pipeline.srt

1
00:00:00,000 --> 00:00:03,000
大家好，我是 Tico

2
00:00:03,000 --> 00:00:05,000
今天我們來聊的是

3
00:00:05,000 --> 00:00:07,000
從零到 GitHub Actions

4
00:00:07,000 --> 00:00:11,000
以 Hexo Blog 為例設計專屬的 CI/CD Pipeline

5
00:00:11,000 --> 00:00:13,000
這是 Slido 的提問

6
00:00:13,000 --> 00:00:18,000
如果有需要的話就花個 10 秒鐘掃描

7
00:00:25,000 --> 00:00:27,000
等一下如果會後有問題的話

8
00:00:27,000 --> 00:00:29,000
我會解答

9
00:00:29,000 --> 00:00:30,000
如果沒有回答完的問題

10
00:00:30,000 --> 00:00:33,000
我會在共筆上面一起回答

11
00:00:33,000 --> 00:00:36,000
我是梯口 我是楊丞昊

12
00:00:36,000 --> 00:00:37,000
打上我的 username

13
00:00:37,000 --> 00:00:40,000
這個名字其實基本上都找得到

14
00:00:40,000 --> 00:00:42,000
我是去花蓮寫論文的碩二生

15
00:00:42,000 --> 00:00:45,000
之前也有休息高中師培的課程

16
00:00:45,000 --> 00:00:48,000
在科技公司擔任 ITSRE 的工讀生

17
00:00:48,000 --> 00:00:50,000
如果你也喜歡鏡音鈴的話

18
00:00:50,000 --> 00:00:52,000
也可以來跟我一起

19
00:00:52,000 --> 00:00:54,000
也可以來戳友

20
00:00:54,000 --> 00:00:56,000
在討論今天的主題之前

21
00:00:56,000 --> 00:00:59,000
我先來悄悄講個故事

22
00:00:59,000 --> 00:01:02,000
那時候我在 2018 的時候

23
00:01:02,000 --> 00:01:04,000
我想要架設自己的 Blog

24
00:01:04,000 --> 00:01:06,000
然後這時候我就試了很多平台

25
00:01:06,000 --> 00:01:08,000
像是 Blogspot 或是 Wordpress

26
00:01:08,000 --> 00:01:10,000
這樣子的類似平台

27
00:01:10,000 --> 00:01:12,000
可是就會發現說

28
00:01:12,000 --> 00:01:14,000
其實它編輯我覺得有點不太方便

29
00:01:14,000 --> 00:01:15,000
像是程式碼的部分

30
00:01:15,000 --> 00:01:17,000
就會插入一個很醜的

31
00:01:17,000 --> 00:01:19,000
就是這樣子的框框

32
00:01:19,000 --> 00:01:21,000
這對我來講不是很好看

33
00:01:21,000 --> 00:01:25,000
所以當時我就看了有些的 Solution

34
00:01:25,000 --> 00:01:27,000
就看到了這個 Hexo Blog

35
00:01:27,000 --> 00:01:30,000
這個東西它可以搭配 GitHub Page

36
00:01:30,000 --> 00:01:33,000
來去做建置你自己的 Blog

37
00:01:33,000 --> 00:01:37,000
那我就很快地編輯完我的頁面

38
00:01:37,000 --> 00:01:39,000
然後就上傳第一篇文章

39
00:01:39,000 --> 00:01:41,000
設定好 DNS 就上線了

40
00:01:41,000 --> 00:01:43,000
但是呢

41
00:01:43,000 --> 00:01:45,000
直到我前幾個禮拜換了一台電腦

42
00:01:45,000 --> 00:01:49,000
其實就發現它其實有缺點的

43
00:01:49,000 --> 00:01:51,000
因為我發現它在其他台電腦

44
00:01:51,000 --> 00:01:54,000
它跑就是要寫我的 Blog 的時候

45
00:01:54,000 --> 00:01:57,000
我就只能在我現在原本的那台電腦上編輯

46
00:01:57,000 --> 00:01:59,000
那我該怎麼辦呢

47
00:01:59,000 --> 00:02:00,000
其實就

48
00:02:00,000 --> 00:02:02,000
這個就是我的 Blog

49
00:02:02,000 --> 00:02:04,000
以前的 Blog 的介面

50
00:02:04,000 --> 00:02:05,000
那這邊的話

51
00:02:05,000 --> 00:02:06,000
它的缺點就是

52
00:02:06,000 --> 00:02:08,000
它只能在單台電腦上面發佈

53
00:02:08,000 --> 00:02:09,000
雖然 CMS 管理系統

54
00:02:09,000 --> 00:02:13,000
它是那個所見即所得的編輯器

55
00:02:13,000 --> 00:02:15,000
那這邊的話

56
00:02:15,000 --> 00:02:16,000
它是使用 Markdown

57
00:02:16,000 --> 00:02:17,000
那它的缺點就是

58
00:02:17,000 --> 00:02:19,000
它只能在單台電腦上面發佈

59
00:02:19,000 --> 00:02:20,000
好

60
00:02:20,000 --> 00:02:23,000
所以我就開始來做自動化的準備了

61
00:02:23,000 --> 00:02:25,000
那可以先來觀察一下

62
00:02:25,000 --> 00:02:27,000
hexo-starter 這個專案

63
00:02:27,000 --> 00:02:29,000
其實這個就是一個 Hexo 的

64
00:02:29,000 --> 00:02:31,000
最初的專案

65
00:02:31,000 --> 00:02:32,000
好

66
00:02:32,000 --> 00:02:33,000
那可以看到說

67
00:02:33,000 --> 00:02:36,000
這邊會有一個 package.json 檔案

68
00:02:36,000 --> 00:02:38,000
那我們往裡面看的時候

69
00:02:38,000 --> 00:02:39,000
其實它就是一個很小型的

70
00:02:39,000 --> 00:02:41,000
Node.js 的專案

71
00:02:41,000 --> 00:02:42,000
所以也就是說

72
00:02:42,000 --> 00:02:43,000
我們可以執行

73
00:02:43,000 --> 00:02:44,000
yarn run build

74
00:02:44,000 --> 00:02:46,000
就可以產生一個靜態網頁

75
00:02:46,000 --> 00:02:48,000
就是 hexo generate

76
00:02:48,000 --> 00:02:49,000
好

77
00:02:49,000 --> 00:02:51,000
那為什麼我要想把它自動化呢

78
00:02:51,000 --> 00:02:53,000
這邊我引用一本書

79
00:02:53,000 --> 00:02:56,000
叫做 Continuous Deployment

80
00:02:56,000 --> 00:02:57,000
好

81
00:02:57,000 --> 00:02:58,000
它那本書它就是說

82
00:02:58,000 --> 00:03:00,000
如果你的建置部署測試

83
00:03:00,000 --> 00:03:01,000
發佈流程無法自動化

84
00:03:01,000 --> 00:03:03,000
那就是不可重複的

85
00:03:03,000 --> 00:03:04,000
也就是說

86
00:03:04,000 --> 00:03:06,000
每一次建置的時候

87
00:03:06,000 --> 00:03:09,000
如果都有點不太一樣的話

88
00:03:09,000 --> 00:03:12,000
那它的步驟就是不可重複

89
00:03:12,000 --> 00:03:15,000
所以唯有自動化

90
00:03:15,000 --> 00:03:18,000
才有品質的保障

91
00:03:18,000 --> 00:03:20,000
好

92
00:03:20,000 --> 00:03:24,000
接下來我就來開始設定我們 CI/CD

93
00:03:24,000 --> 00:03:28,000
這邊我會自己發佈文章了之後

94
00:03:28,000 --> 00:03:31,000
我會放到 Hexo Source 的 Repository

95
00:03:31,000 --> 00:03:34,000
最後會是 Trigger Actions

96
00:03:34,000 --> 00:03:36,000
然後最後它的 Push 之後

97
00:03:36,000 --> 00:03:41,000
就會到 GitHub 的 Page Repository

98
00:03:41,000 --> 00:03:42,000
好

99
00:03:42,000 --> 00:03:43,000
那 Hexo Source 不要追蹤

100
00:03:43,000 --> 00:03:45,000
自動生成的頁面

101
00:03:45,000 --> 00:03:47,000
像是自動生成的頁面

102
00:03:47,000 --> 00:03:48,000
可能它最後會產生一個

103
00:03:48,000 --> 00:03:50,000
Public 的資料夾

104
00:03:50,000 --> 00:03:52,000
還有或者是 node_modules

105
00:03:52,000 --> 00:03:53,000
這一類的檔案

106
00:03:53,000 --> 00:03:55,000
都不要給它追蹤

107
00:03:55,000 --> 00:03:56,000
那 Hexo Source 如果用到

108
00:03:56,000 --> 00:03:57,000
其他的 Git Repo

109
00:03:57,000 --> 00:03:59,000
請善用 Submodule

110
00:03:59,000 --> 00:04:02,000
這個部分我沒有提到

111
00:04:02,000 --> 00:04:03,000
但像是就是說

112
00:04:03,000 --> 00:04:05,000
會有那個主題樣式

113
00:04:05,000 --> 00:04:06,000
就是一個模板

114
00:04:06,000 --> 00:04:08,000
它會是另外一個 Git Repo 的專案

115
00:04:08,000 --> 00:04:10,000
所以這邊就要利用

116
00:04:10,000 --> 00:04:12,000
Submodule 來去使用

117
00:04:12,000 --> 00:04:15,000
那 CI/CD 它是一個分開的概念

118
00:04:15,000 --> 00:04:17,000
CI 是持續整合

119
00:04:17,000 --> 00:04:20,000
確定程式碼是可以產生這個頁面

120
00:04:20,000 --> 00:04:22,000
那 CD 它是持續部署

121
00:04:22,000 --> 00:04:24,000
它會把這個結果推送出去

122
00:04:24,000 --> 00:04:25,000
那等一下

123
00:04:25,000 --> 00:04:27,000
它這兩個會是分開實作的

124
00:04:27,000 --> 00:04:28,000
等一下我們就可以來看

125
00:04:28,000 --> 00:04:29,000
那第四個

126
00:04:29,000 --> 00:04:31,000
保持分支的簡潔

127
00:04:31,000 --> 00:04:32,000
會把產生的網頁

128
00:04:32,000 --> 00:04:34,000
放在別的 Repo 上面

129
00:04:34,000 --> 00:04:35,000
那這邊呢

130
00:04:35,000 --> 00:04:38,000
因為 GitHub 其實有一個功能

131
00:04:38,000 --> 00:04:39,000
叫做 gh-page

132
00:04:39,000 --> 00:04:41,000
這個分支其實可以直接

133
00:04:41,000 --> 00:04:42,000
推送頁面

134
00:04:42,000 --> 00:04:44,000
那這邊我也保持分支的簡潔

135
00:04:44,000 --> 00:04:46,000
我會把這個

136
00:04:46,000 --> 00:04:47,000
產生出來的網頁

137
00:04:47,000 --> 00:04:48,000
放在別的 Repo 上

138
00:04:48,000 --> 00:04:49,000
因為它們一開始

139
00:04:49,000 --> 00:04:52,000
本質就是不一樣的東西

140
00:04:52,000 --> 00:04:54,000
好 那就來準備一下

141
00:04:54,000 --> 00:04:56,000
我們的 Deploy Key

142
00:04:56,000 --> 00:04:57,000
那我們要準備 Deploy Key 的時候

143
00:04:57,000 --> 00:05:00,000
就要用 SSH Key Generator

144
00:05:00,000 --> 00:05:02,000
來生成公鑰跟私鑰

145
00:05:02,000 --> 00:05:03,000
那這邊的話

146
00:05:03,000 --> 00:05:05,000
就根據上面的命令

147
00:05:05,000 --> 00:05:06,000
我們就可以產生

148
00:05:06,000 --> 00:05:08,000
我們的那個公鑰跟私鑰

149
00:05:08,000 --> 00:05:09,000
那你可以替換成

150
00:05:09,000 --> 00:05:11,000
你的 GitHub 的 Email

151
00:05:11,000 --> 00:05:12,000
還有 GitHub 的 Actions Bot Email

152
00:05:12,000 --> 00:05:15,000
這兩個都可以

153
00:05:15,000 --> 00:05:16,000
好 那下面的話

154
00:05:16,000 --> 00:05:18,000
就會產生 deploy.pub

155
00:05:18,000 --> 00:05:20,000
跟 Deploy 這個檔案

156
00:05:20,000 --> 00:05:22,000
一個是公鑰 一個是私鑰

157
00:05:22,000 --> 00:05:23,000
那私鑰的話

158
00:05:23,000 --> 00:05:24,000
等一下要

159
00:05:24,000 --> 00:05:25,000
就是作為使用者

160
00:05:25,000 --> 00:05:26,000
要推送出去的時候

161
00:05:26,000 --> 00:05:28,000
公鑰就是要確認說

162
00:05:28,000 --> 00:05:30,000
這是目標

163
00:05:30,000 --> 00:05:33,000
要擺的目標的地方

164
00:05:33,000 --> 00:05:34,000
好 接下來

165
00:05:34,000 --> 00:05:37,000
在 Hexo Source 裡面放上私鑰

166
00:05:37,000 --> 00:05:39,000
那這裡 Secret 名稱要記得

167
00:05:39,000 --> 00:05:42,000
就等一下 Actions 的時候會用到

168
00:05:42,000 --> 00:05:43,000
那在 GitHub Page 的

169
00:05:43,000 --> 00:05:44,000
另外一個專案

170
00:05:44,000 --> 00:05:46,000
我們放上公鑰

171
00:05:46,000 --> 00:05:47,000
那這邊要記得

172
00:05:47,000 --> 00:05:49,000
把 Write Access 打開

173
00:05:49,000 --> 00:05:54,000
這樣 Actions 才能自動推送

174
00:05:54,000 --> 00:05:55,000
好 接下來

175
00:05:55,000 --> 00:05:56,000
我們就來設定

176
00:05:56,000 --> 00:05:58,000
GitHub Actions 的 CI 了

177
00:05:58,000 --> 00:06:00,000
那我們就可以來

178
00:06:00,000 --> 00:06:01,000
我們就其實

179
00:06:01,000 --> 00:06:02,000
根據我們的 Starter 的

180
00:06:02,000 --> 00:06:03,000
這些專案

181
00:06:03,000 --> 00:06:04,000
我們就可以來設計

182
00:06:04,000 --> 00:06:06,000
我們的 GitHub Actions 流水線

183
00:06:06,000 --> 00:06:07,000
當我們把專案

184
00:06:07,000 --> 00:06:08,000
抓下來的時候

185
00:06:08,000 --> 00:06:09,000
等於就是說

186
00:06:09,000 --> 00:06:11,000
我們 git clone 抓下來

187
00:06:11,000 --> 00:06:14,000
然後因為 GitHub Actions

188
00:06:14,000 --> 00:06:15,000
它一開始會是空的

189
00:06:15,000 --> 00:06:17,000
所以我們要給它安裝

190
00:06:17,000 --> 00:06:19,000
Node.js

191
00:06:19,000 --> 00:06:20,000
我們裝的是

192
00:06:20,000 --> 00:06:21,000
Node.js 的 16 版

193
00:06:21,000 --> 00:06:23,000
那接下來執行

194
00:06:23,000 --> 00:06:25,000
它的相依性套件的安裝

195
00:06:25,000 --> 00:06:27,000
然後產生我們頁面

196
00:06:27,000 --> 00:06:29,000
將產生完的頁面

197
00:06:29,000 --> 00:06:31,000
上傳到 Artifacts 上面

198
00:06:31,000 --> 00:06:34,000
就是 GitHub 其實會有這個功能

199
00:06:34,000 --> 00:06:36,000
好 那這邊

200
00:06:36,000 --> 00:06:37,000
它 GitHub Actions

201
00:06:37,000 --> 00:06:39,000
其實它是一個 yaml 檔

202
00:06:39,000 --> 00:06:40,000
上面的話

203
00:06:40,000 --> 00:06:43,000
它的這個 Workflow 的名稱

204
00:06:43,000 --> 00:06:45,000
那在第三行的時候

205
00:06:45,000 --> 00:06:48,000
在推送這個

206
00:06:48,000 --> 00:06:49,000
Push 這個

207
00:06:49,000 --> 00:06:51,000
我們上傳我們的文章

208
00:06:51,000 --> 00:06:53,000
它就會觸發這個 Workflow

209
00:06:53,000 --> 00:06:54,000
那第五六行

210
00:06:54,000 --> 00:06:57,000
它會是改成 UTC 加 8 的時區

211
00:06:57,000 --> 00:06:59,000
因為它一開始的預設時區

212
00:06:59,000 --> 00:07:01,000
不會是台灣的時區

213
00:07:01,000 --> 00:07:03,000
要更正回我們的時區這樣子

214
00:07:03,000 --> 00:07:05,000
好 接下來我們就要開始

215
00:07:05,000 --> 00:07:06,000
Build Test

216
00:07:06,000 --> 00:07:07,000
也就是說這裡就要開始

217
00:07:07,000 --> 00:07:08,000
做我們的 CI 了

218
00:07:08,000 --> 00:07:12,000
這邊我們先把專案給 Checkout 下來

219
00:07:12,000 --> 00:07:15,000
然後安裝 Node.js 16

220
00:07:15,000 --> 00:07:17,000
然後安裝相應信套件

221
00:07:17,000 --> 00:07:19,000
並產生網頁

222
00:07:19,000 --> 00:07:21,000
然後最後把產生後的網頁

223
00:07:21,000 --> 00:07:25,000
放在 GitHub Artifact 上面

224
00:07:25,000 --> 00:07:28,000
好 當我們做好這些步驟了之後

225
00:07:28,000 --> 00:07:30,000
因為我們上傳到 Artifact 上面

226
00:07:30,000 --> 00:07:32,000
這裡只要下載回來就好了

227
00:07:32,000 --> 00:07:35,000
那我們下載完 Artifact 之後

228
00:07:35,000 --> 00:07:39,000
我們再 Push 到其他的專案

229
00:07:39,000 --> 00:07:44,000
那或者是說你要用 FTP 上傳也是可以的

230
00:07:44,000 --> 00:07:45,000
好 那這邊的話

231
00:07:45,000 --> 00:07:47,000
我這邊就要特別設計說

232
00:07:47,000 --> 00:07:49,000
如果上一個 上一個

233
00:07:49,000 --> 00:07:51,000
它的一定要上一個步驟做完

234
00:07:51,000 --> 00:07:54,000
它才可以做 Deploy 的動作

235
00:07:54,000 --> 00:07:57,000
那我們再下載剛剛上傳的 Artifact

236
00:07:57,000 --> 00:08:01,000
然後再 Push 到其他的 Repo

237
00:08:01,000 --> 00:08:02,000
那這邊的話

238
00:08:02,000 --> 00:08:05,000
這邊就是我們剛剛要記錄使用的 Secret Name

239
00:08:05,000 --> 00:08:06,000
就要來用到這邊了

240
00:08:06,000 --> 00:08:08,000
因為它要用到私鑰

241
00:08:08,000 --> 00:08:10,000
所以我們才能 Push 上去

242
00:08:10,000 --> 00:08:14,000
然後這邊就是我們的目的 Repo 的資訊

243
00:08:14,000 --> 00:08:16,000
還有它的分支

244
00:08:16,000 --> 00:08:20,000
好 最後我們在 GitHub Page 設定 branch

245
00:08:20,000 --> 00:08:21,000
就是只要知道說

246
00:08:21,000 --> 00:08:24,000
就是我要知道它到時候發佈的時候

247
00:08:24,000 --> 00:08:26,000
要用哪個 branch 去做發佈

248
00:08:26,000 --> 00:08:28,000
這樣就可以了

249
00:08:28,000 --> 00:08:31,000
好 以上的就會是像是這樣的流程

250
00:08:31,000 --> 00:08:35,000
就會是從 Build 到 Deploy

251
00:08:35,000 --> 00:08:37,000
然後最後會產生 Artifact 這個檔案

252
00:08:37,000 --> 00:08:41,000
就是我們產生完的頁面

253
00:08:41,000 --> 00:08:43,000
好 以上的這些 Demo 的範例程式

254
00:08:43,000 --> 00:08:45,000
都已經放在 GitHub 上面

255
00:08:45,000 --> 00:08:46,000
然後有興趣的話

256
00:08:46,000 --> 00:08:52,000
我等一下會先把它公開出來

257
00:08:52,000 --> 00:08:54,000
好 那這邊的話

258
00:08:54,000 --> 00:08:55,000
這邊的話就是

259
00:08:55,000 --> 00:08:57,000
這邊我們已經做好簡單的

260
00:08:57,000 --> 00:09:00,000
Hexo Blog 的 CI/CD 了

261
00:09:00,000 --> 00:09:03,000
這當中還是有很多可以改善的部分

262
00:09:03,000 --> 00:09:06,000
像是可以做一些測試站

263
00:09:06,000 --> 00:09:09,000
或者是諸如此類的一些功能

264
00:09:09,000 --> 00:09:11,000
那這邊的話就

265
00:09:11,000 --> 00:09:12,000
這邊有看到

266
00:09:12,000 --> 00:09:15,000
因為時間的關係

267
00:09:15,000 --> 00:09:17,000
就先到這邊就好了

268
00:09:17,000 --> 00:09:20,000
然後如果 Slido 上面有問題的話

269
00:09:20,000 --> 00:09:25,000
我會後會在共筆上面統一解答

270
00:09:25,000 --> 00:09:28,000
好 就是這樣 謝謝大家