jamstack.org

Jamstack

Dies ist das Repo für https://jamstack.org

Ein Einstiegspunkt, um mehr über dieses Architekturmodell zu erfahren. Ein Ort, um zu erfahren, was Jamstack ist, um Tools, Tipps, Beispiele und Artikel auszutauschen. Dies ist auch ein Ort, an dem Sie ein lokales Community-Treffen finden oder Unterstützung bei der Gründung eines eigenen Treffens suchen können.

Bereitstellung von Ressourcen

Wir haben eine Reihe von Videos, Präsentationen, Artikeln und anderen Lernressourcen über Jamstack zusammengestellt. Sie können Inhalte zu diesem Ressourcenpool beitragen!

Wir akzeptieren Beiträge, die als Pull-Requests eingereicht werden.

Fügen Sie Links zu Ressourcen hinzu

So tragen Sie einen Link zu einer Ressource bei:

1. Erstellen Sie eine neue MD-Datei im Ordner src/site/resources mit einem eindeutigen und aussagekräftigen Namen. Füllen Sie diese Datei gemäß der unten gezeigten Struktur.
2. Fügen Sie für Präsentationen und Videos ein optionales Miniaturbild zum Ordner src/site/img/cms hinzu. (Das Bild sollte im JPEG-Format mit einer Breite von 600 Pixel und einer Höhe von 400 Pixel vorliegen.)
3. Senden Sie eine Pull-Anfrage

Ressourcen-MD-Referenz:

---
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)
---

Bevor Sie eine Pull-Anfrage senden oder wenn Sie Code- oder Inhaltsänderungen vorschlagen/beisteuern, ist es ratsam, eine Vorschau Ihrer Änderung in einem lokalen Build anzuzeigen. Wir haben versucht, den Prozess der Ausführung eines lokalen Builds so gering wie möglich zu halten.

Ausführen eines lokalen Builds

Voraussetzungen

• Knoten und NPM

Installieren und Ausführen des Builds

 # 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

Styling mit TailwindCSS

Diese Site verwendet TailwindCSS, um nützliche CSS-Klassen anzubieten und eine schnelle Möglichkeit zur Gestaltung der Site bereitzustellen. Das bedeutet, dass die meisten Stylings durchgeführt werden können, ohne dass zusätzliches CSS geschrieben werden muss. Stattdessen können Dienstprogrammklassen direkt zum HTML hinzugefügt werden. Dies kann zu einer sehr schnellen Entwicklung führen und bietet auch überraschende Vertrautheitsgrade für diejenigen, die es gewohnt sind, auf diese Weise zu arbeiten (da die Konventionen und Klassen nicht pro Standort gelten).

Während der lokalen Ausführung/Entwicklung generiert der Befehl npm run start die Site einschließlich der CSS-Pipeline von Tailwind.

Globale CSS-Dienstprogramme.

Für die Effizienz wiederholter oder globaler Klassen wird eine kleine Anzahl maßgeschneiderter CSS-Regeln bereitgestellt. Diese befinden sich in src/css/tailwind.css , sollten jedoch sparsam verwendet werden, da der größte Teil des Stylings im HTML über die Dienstprogrammklassen von Tailwind erfolgt.

Entwickler vs. Produkt

Während eines Produktionsbuilds enthält die CSS-Pipeline einen Schritt zum Entfernen aller nicht verwendeten CSS-Anweisungen und zum Komprimieren des resultierenden CSS. Aus Gründen der Entwicklungseffizienz wird dieser Schritt während der lokalen Entwicklung nicht über den Befehl npm run start “ ausgeführt. Sie können eine Vorschau eines optimierten Produktions-Builds anzeigen, indem Sie die folgenden Befehle ausführen:

 # Run a production build
npm run build

# Serve the build locally
npm run start

Klonen und Bereitstellen mit einem Klick

Sie können dieses Repository klonen und als eigene Test-Site booten, komplett mit der CI/CD-Build-Pipeline auf Netlify, indem Sie auf die Schaltfläche unten klicken. (Erfordert kostenlose GitHub- und Netlify-Konten)