jamstack.org

果醬堆

這是 https://jamstack.org 的儲存庫

學習此架構模型的切入點。一個了解 Jamstack 是什麼的地方，用於分享工具、技巧、範例和文章。這也是尋找當地社區聚會的地方，或是在創辦自己的社區聚會時尋求支持。

貢獻資源

我們收集了一組有關 Jamstack 的影片、簡報、文章和其他學習資源。您可以向該資源池貢獻內容！

我們接受作為拉取請求提交的貢獻。

貢獻資源連結

要提供資源連結：

1. 在src/site/resources資料夾中建立一個新的 md 文件，並使用唯一的描述性名稱。根據如下所示的結構填入該文件。
2. 對於簡報和視頻，請將可選的縮圖新增至src/site/img/cms資料夾。 （影像應為 600 像素寬、400 像素高的 jpeg）
3. 提交拉取請求

資源MD參考：

---
title : Resource title
date : Publish date (YYYY-MM-DD)
link : the URL of this resource
thumbnailurl : /img/cms/resources/resource-thumbnail.jpg
type :
  - article (Help us group and sort the resources by type article|video|presentation)
---

在提交拉取請求之前，或者如果您建議/貢獻程式碼或內容更改，明智的做法是在本地建置中預覽您的更改。我們試圖使運行本地建置的過程盡可能少。

運行本地構建

先決條件

• 節點和 NPM

安裝並運行構建

 # Clone this repository to your local environment
git clone [email protected]:jamstack/jamstack.org.git

# move in to your local site folder
cd jamstack.org

# install the dependencies
npm install

# run the build and dev server locally
npm start

使用 TailwindCSS 進行樣式設定

該網站使用 TailwindCSS 來提供實用 CSS 類，並提供一種快速設定網站樣式的方法。這意味著大多數樣式無需編寫任何額外的 CSS 即可完成。相反，實用程式類別可以直接添加到 HTML 中。這可以提供一些非常快速的開發，並且還為那些習慣以這種方式工作的人提供令人驚訝的熟悉程度（因為約定和類別不是每個網站的。）

在本地運行/開發時， npm run start指令將產生包含來自 Tailwind 的 CSS 管道的網站。

全域 CSS 實用程式。

為了提高重複或全域類別的效率，提供了少量自訂的 CSS 規則。這些位於src/css/tailwind.css中，但應謹慎使用，大多數樣式透過 Tailwind 的實用程式類別在 HTML 中進行。

開發與產品

在生產建置過程中，CSS 管道包括刪除所有未使用的 CSS 語句並壓縮產生的 CSS 的步驟。為了開發效率，本地開發時透過npm run start指令不執行此步驟。您可以透過執行以下命令預覽優化的生產版本：

 # Run a production build
npm run build

# Serve the build locally
npm run start

一鍵克隆和部署

您可以複製此儲存庫並將其引導為您自己的測試站點，透過點擊下面的按鈕完成 Netlify 上的 CI/CD 建置管道。 （需免費的 GitHub 和 Netlify 帳戶）