Angular 靜態網站產生器不求人：Scully 新手入門

Angular 靜態網站產⽣器不求⼈

Scully 新⼿入⾨
x
1

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

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

什麼是 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 x
圖片出處：https://dev.to/vincentntang/wtf-are-jamstack-apps-and-static-site-generators-ssg-56if

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

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

為什麼要⽤ Scully？
x
10

• 管理後台
• ER
P

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

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

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

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

• Hero

• Jekyll (Ruby
)

• Hugo (Go
)

• Gatsby (React
)

• Next.js (React
)

• Nuxt (Vue)
⾏之有年的 Generator
15 x

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

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

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

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

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

⼀⾏指令即可⽀援 Blog
23 x

• 什麼是 Scully
?

• 基於 JAMstack 的 Static Site Generator，且 Angular Friendl
y

• 為什麼要⽤ Scull
y

• 建構利於 SEO 的網站且 Angular Friendly

• 不太需要變動現有的程式碼
總結
27 x

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

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

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

Angular 靜態網站產生器不求人：Scully 新手入門

More Related Content

What's hot (19)

More from 志龍陳 (11)