jamstack cms

果醬棧

這是一個實驗，我試圖建立一個 JAMstack 網站。

基於客戶端 JavaScript、可重複使用 API 和預先建置標記的現代 Web 開發架構。

成分是：

• JavaScript：使用 jQuery 的客戶端邏輯
• API：使用 Azure 上託管的 Azure Functions Core Tools 的伺服器端邏輯
• 標籤：使用 Hugo 產生的靜態 HTML
• 內容：基於 Git 的 Headless CMS 和 Netlify CMS

Hugo網站的原始碼：

• /src/站點

Azure Functions 的原始碼：

• /src/api

網站由 Netlify 託管，網址為：

• http://jamstack-cms.netlify.com

跑步

要在本地運行站點，請編輯 /src/site/data/api.toml：

[ recipe ]
get_ingredients = " http://localhost:7071/api/Ingredients/ "

[ submit ]
post_recipe = " http://localhost:7071/api/Recipe "

運行 Hugo 站點：

cd src/site

hugo server

執行 Azure 函數：

cd src/api

func host start --cors http://localhost:1313

瀏覽：

http://localhost:1313

歸因

果醬食譜取自瑞典網站 Tasteline.com：

• 蘋果醬：http://www.tasteline.com/recept/appelmos-grundrecept/
• 越橘果醬：http://www.tasteline.com/recept/lingonsylt/
• 草莓醬：http://www.tasteline.com/recept/jordgubbssylt/

從瑞典語到英語的翻譯是透過谷歌翻譯完成的。

圖片取自 Flickr：

• 蘋果：https://www.flickr.com/photos/1sock/7910673688/ by 1sock
• 越橘：https://www.flickr.com/photos/kymis/2875484409/ 作者：Jyrki Kymäläinen
• 草莓：https://www.flickr.com/photos/42787780@N04/6984507532/ by Fried Dough