簡單地介紹一下 Scully

1. Angular 靜態網站產⽣器不求⼈
Scully 新⼿入⾨
x
1

2. • Angular 深入淺出三⼗天
• Angular Schematics 實戰三⼗天
• 任職於 Lilee Systems
陳志龍（Leo 李歐）
x
2

3. • 什麼是 Scully？
• 為什麼要⽤ Scully？
• 如何使⽤ Scully？
• Demo
⼤綱
3 x

4. 什麼是 Scully？
4 x

5. 什麼是 Scully？
5 x
“Scully makes building, testing and deploying
Jamstack apps extremely simple.”
“Nothing will make your Angular project as fast as
using Scully and embracing Jamstack.”

6. 成龍疑惑
6 x
圖片出處：https://dev.to/vincentntang/wtf-are-jamstack-apps-and-static-site-generators-ssg-56if

7. Jamstack？
7 x

8. Jam？果醬？
8 x
圖片出處：https://www.tiuweehan.com/blog/2020-09-06-this-website-is-built-on-the-jamstack/

9. 對不起了個資，我真的需要那個酷東⻄
9 x
連結：https://www.netlify.com/oreilly-jamstack/#download

10. 為什麼要⽤ Scully？
x
10

11. • 管理後台
• ER
P
• 部落格？
• EC？
• 形象官網？
⽬前使⽤ Angular 都是⽤來作哪些類型的專案？
11 x

12. • 初始化的時間較久
• Bundle Size 較⼤
• 較不利於 SEO
SPAs 的問題
12 x

13. • 在現有基礎上加入需要改動較多的程式碼
• 流量較⼤時，使⽤者體驗會變差
SSR by Universal?
13 x

14. CSR vs SSR vs SSG
14 x
CSR SSR SSG
初始化時間 久 尚可 短
SEO分數 低 ⾼ ⾼
使⽤者體驗 佳 優 優

15. • Hero
• Jekyll (Ruby
)
• Hugo (Go
)
• Gatsby (React
)
• Next.js (React
)
• Nuxt (Vue)
⾏之有年的 Generator
15 x

16. 終於...
16 x

17. Scully 是怎麼渲染出靜態檔案的？
17 x

18. 年幼的 Scully
18 x
• ⽣態圈才剛發展
• 第三⽅的 Plugin 較少
• 只有內建的 Blog 範本

19. 如何使⽤ Scully？
19 x

20. 將 Scully 新增到你的專案內
20 x

21. ⽤ Scully 產⽣出靜態⾴⾯檔
21 x

22. 啟動 Scully 內建的開發伺服器
22 x

23. ⼀⾏指令即可⽀援 Blog
23 x

24. 快速新增⽂章
24 x

25. Demo
25 x

26. 總結
26 x

27. • 什麼是 Scully
?
• 基於 JAMstack 的 Static Site Generator，且 Angular Friendl
y
• 為什麼要⽤ Scull
y
• 建構利於 SEO 的網站且 Angular Friendly
• 不太需要變動現有的程式碼
總結
27 x

28. • Scully 官⽅網站
• JAMstack 官⽅網站
• JAMstack 到底是什麼巫術？
• This website is built on the JAMStack
• Puppeteer 官⽅網站
References
28 x

29. • WTF are JAMstack Apps and Static Site Generators (SSG)
• [Angular] Scully: Angular + JAMStack
• 使⽤ Scully 建立 Blog 的⼼得記錄
• 初探 Scully 建立 blog
References
29 x

30. 相關連結
30
Angular Taiwan 臉書社團 Angular Taiwan 論壇
Angular Taiwan 線上讀書會社團 Angular Taiwan Youtube 頻道
x

31. Thank you
31 x