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 帐户）