Eine gemeinschaftsgetriebene Website mit Eleventy: Vorbereitung auf Beiträge

Ich greife in letzter Zeit am häufigsten zu Eleventy (auch bekannt als 11ty), wenn ich eine Website entwickeln möchte. Es ist schwer, einen statischen Website-Generator zu schlagen, der fortgeschrittene Templating-Möglichkeiten bietet, sich ansonsten aber aus dem Weg geht und es dir erlaubt, einfach nur zu erschaffen.

Eine dieser Websites ist Style Stage, eine moderne CSS-Showcase, die durch Community-Beiträge gestaltet wird. Eleventy war für dieses gemeinschaftsgetriebene Projekt in mehrfacher Hinsicht perfekt:

• Seine außerordentlich schnellen Builds lokal und auf einem Produktionshost
• Es ist unvoreingenommen hinsichtlich der Art und Weise, wie Vorlagen konstruiert werden
• Seine Fähigkeit, jede Dateityp zu erstellen, mit vollständiger Kontrolle darüber, wie und wo Dateien gerendert werden
• Seine Fähigkeit, Templating-Sprachen wie HTML, Markdown und Nunjucks zu vermischen
• Es ist hochperformant, da es zu statischem HTML kompiliert wird, ohne dass für die Produktion erforderliche Abhängigkeiten bestehen

Der wichtigste Grund, warum Eleventy eine großartige Wahl für die Erstellung einer gemeinschaftsgetriebenen Website ist, ist die Möglichkeit, Website-Seiten dynamisch aus Datenquellen zu erstellen. Wir werden untersuchen, wie wir diese Funktion und mehr nutzen können, wenn wir unsere Beispiel-Community-Website erstellen.

Was gehört zur Erstellung einer gemeinschaftsgetriebenen Website?

In der nicht allzu fernen Vergangenheit konnte die Erstellung einer gemeinschaftsgetriebenen Website potenziell ein schmerzhafter Prozess sein, der CMS-Albträume beinhaltete, um Beitragende-Workflows zu erstellen. Bewaffnet mit Eleventy und einigen anderen modernen Werkzeugen ist dies jetzt fast vollständig automatisierbar mit minimaler Aufsicht.

Bevor wir zur Einladung von Beitragenden kommen, haben wir selbst noch etwas zu tun.

1. Ermitteln Sie, welche Inhalte Beitragende ändern dürfen

Dies wird viele der anderen Entscheidungen beeinflussen. Im Fall von Eleventy für Style Stage habe ich eine JSON-Datei erstellt, die Beitragende verwenden können, um Pull-Anfragen zu erstellen, um ihre eigenen relevanten Metadaten zu ändern und bereitzustellen, die zur Erstellung ihrer Seiten verwendet werden.

Vielleicht möchten Sie auch den Zugriff auf zusätzliche Assets ermöglichen, oder es macht Sinn, mehrere Datendateien für die einfache Kategorisierung und Abfrage von Daten zu haben. Oder vielleicht können Beitragende Markdown-Dateien in einem bestimmten Verzeichnis hinzufügen.

Berücksichtigen Sie den Umfang dessen, was Beitragende ändern oder einreichen können, und wägen Sie dies gegen eine Schätzung Ihrer Verfügbarkeit für die Überprüfung von Einreichungen ab. Dies wird zu einer erfolgreichen und überschaubaren Gemeinschaft beitragen.

GitHub Actions können es ermöglichen, eine Pull-Anfrage mit ungültigen Dateien zu kennzeichnen oder zu schließen, wenn Sie eine erweiterte automatisierte Überprüfung eingehender Inhalte benötigen.

2. Erstellen Sie Richtlinien für Beitragende

Zeit im Voraus zu investieren, um Ihre Richtlinien zu durchdenken, kann bei Ihrem Gesamtplan helfen. Möglicherweise identifizieren Sie zusätzliche benötigte Funktionen oder Elemente, die automatisiert werden können.

Sobald Ihre Richtlinien vorbereitet sind, ist es am besten, sie in einer speziellen Datei in Ihrem GitHub-Repository namens CONTRIBUTING.md zu hinterlegen. Der Dateiname in Großbuchstaben ist das erwartete Format. Wenn diese Datei existiert, wird ein zusätzlicher Link für Beitragende angezeigt, wenn sie ihre Pull-Anfragen oder Issues erstellen, der sie auffordert, die Richtlinien zu überprüfen.

Wie Lizenzierung von Inhalten und Urheberschaft gehandhabt werden, gehört in diese Kategorie. Zum Beispiel veröffentlicht Style Stage beigesteuerte Stylesheets unter der CC BY-NC-SA-Lizenz, aber Autoren behalten das Urheberrecht an Originalgrafiken. Als Teil des Build-Prozesses werden die Lizenz und die Urheberschaft an die Styles angehängt, und die Metadaten des Autors werden in der Style-Seitenvorlage aktualisiert.

Sie möchten auch Richtlinien für akzeptable Inhalte berücksichtigen und was zur Ablehnung von Einreichungen führen würde. Style Stage gibt an, dass

Einreichungen werden abgelehnt, wenn sie obszöne, übermäßig gewalttätige oder anderweitig geschmacklose Bilder verwenden, gegen die oben genannten Richtlinien verstoßen oder aus anderen Gründen nach Ermessen des Maintainers.

3. Workflow und Automatisierungen vorbereiten

Während Eleventy sich um den Website-Build kümmert, sind die anderen wichtigen Akteure, die Style Stage-Beiträge ermöglichen, Netlify und GitHub.

Beitragende reichen eine Pull-Anfrage beim Style Stage-Repo auf GitHub ein, und wenn sie dies tun, erstellt Netlify eine Deploy-Vorschau. Dies ermöglicht es Beitragenden, zu überprüfen, ob ihre Einreichung wie erwartet funktioniert, und spart mir als Maintainer Zeit, indem ich Einreichungen nicht herunterladen muss, um sicherzustellen, dass sie die Richtlinien erfüllen.

Alle Diskussionen finden über GitHub statt. Dies hat den zusätzlichen Vorteil der öffentlichen Rechenschaftspflicht, die böswillige Akteure abschreckt.

Wenn der Beitragende eine Änderung vornehmen muss, kann er seine Pull-Anfrage aktualisieren oder einen erneuten Deploy der Branch-Vorschau anfordern, wenn es sich um ein Remote-Asset handelt, das sich geändert hat. Dieser erneute Deploy ist ein sehr kleiner manueller Schritt und möglicherweise nicht für jede PR erforderlich – oder sogar überhaupt nicht, je nachdem, wie Sie Beiträge annehmen.

Der letzte Schritt ist die endgültige Genehmigung der PR und das Mergen in den Haupt-Branch. Sobald die Pull-Anfrage zusammengeführt wurde, stellt Netlify die Änderungen sofort auf Produktion bereit.

Eleventy ist natürlich ein statischer Website-Generator, und mehrere Hoster bieten Webhooks an, um einen Build auszulösen. Netlify Build Plugins sind ein gutes Beispiel dafür. Aber wenn Sie Daten häufiger als bei jedem Zusammenführen einer PR aktualisieren müssen, ist eine Option, IFTTT oder Zapier zu verwenden, um tägliche Deploys oder Deploys basierend auf einer Vielzahl anderer Trigger einzurichten.

Es ist erwähnenswert, dass das, worüber wir hier sprechen, Ihre Zielgruppe von Beitragenden auf Personen mit einem GitHub-Konto beschränkt. Allerdings können GitHub-Beiträge vollständig über die Weboberfläche erfolgen, sodass es sehr gut möglich ist, Anleitungen bereitzustellen, damit auch andere Benutzer – selbst solche, die nicht programmieren – teilnehmen können.

4. Wählen Sie eine Methode für Beitrags- und Community-Updates

Die erste Überlegung hier ist, zu entscheiden, wie kritisch es für Beitragende ist, über Updates Ihrer Website informiert zu werden, indem Sie die wahrscheinlichen Auswirkungen der Änderung bewerten.

Im Fall von Style Stage wird der Kern unverändert bleiben, aber es gibt geplante optionale Funktionalitäten. Ich habe mich für einen wöchentlichen(-ish) Newsletter entschieden. Auf diese Weise können die Leute ihn abonnieren, und er bietet sowohl für Beitragende als auch für Benutzer einen Mehrwert.

Matthew Ströms „Verwendung von Netlify Forms und Netlify Functions zum Erstellen eines E-Mail-Anmelde-Widgets“ ist ein großartiger Ort, um zu lernen, wie Sie Abonnenten mit einem statischen Formular in Eleventy zu Ihrem Newsletter hinzufügen. Es behandelt auch eine Funktion zum Senden der E-Mail des Abonnenten an Buttondown, einen leichten E-Mail-Dienst. Ein Beispiel, wie Sie Ihre Buttondown-E-Mail-Vorlage und -Inhalte in Eleventy verwalten können, finden Sie in der Style Stage-Einrichtung, die zeigt, wie der Newsletter vom veröffentlichten Website-Build ausgeschlossen wird.

Wenn Sie nur Updates mit geringer Priorität erwarten, können die Repo-Benachrichtigungen von GitHub für die Kommunikation ausreichend sein. Das Erstellen von Releases ist eine weitere Möglichkeit. Oder, hey, es ist sogar möglich, Benachrichtigungen auf der Website selbst zu integrieren.

5. Potenzielle Beitragende finden und engagieren

Style Stage war eine Idee, die ich durch eine Umfrage auf Twitter geprüft habe. Dann habe ich einen „Aufruf zur Mitarbeit“ gestartet und mit den Antwortenden sowie denen interagiert, die mich retweetet haben. Eine kurze Frist half auch dabei, motivierte Beitragende zu finden, die Style Stage halfen, ohne Einreichungen zu starten. Viele dieser Beitragenden wurden zu Evangelisten, die Style Stage noch mehr Leuten vorstellten. Ich habe auch einen Launch-Livestream beworben, der gleichzeitig als Werbematerial diente.

Das ist, was es bedeutet, sich mit Beitragenden zu „engagieren“. Das Schaffen von Möglichkeiten zur Interaktion und das Aufrechterhalten dieser Interaktion helfen dabei, Gelegenheitsbeitragende in „Fans“ zu verwandeln, die andere zur Teilnahme ermutigen.

Denken Sie daran, dass der Website-Inhalt ein großartiger Ort ist, um zur Teilnahme zu ermutigen! Style Stage widmet seine gesamte Seite der Ermutigung von Einreichungen. Wenn das für Sie nicht möglich ist, können Sie dort, wo es sinnvoll ist, Aufforderungen zu Beiträgen verwenden.

6. Repository-Einstellungen finalisieren und Community-Health-Dateien einfügen

Stellen Sie abschließend sicher, dass Ihr Repository öffentlich zugänglich ist und die entsprechenden „Community-Health“-Dateien enthält. Dies sind Dokumente, die dazu dienen, Richtlinien festzulegen, gute Erwartungen bei Community-Mitgliedern zu wecken, einen Verhaltenskodex zu definieren und andere Informationen bereitzustellen, die zur allgemeinen „Gesundheit“ der Community beitragen. Es gibt eine Reihe von Beispielen, Vorschlägen und Tipps, wie dies in den GitHub-Docs gemacht wird.

Obwohl in der Dokumentation ein halbes Dutzend Dateien aufgeführt sind, sind meiner Erfahrung nach die drei Dateien, die Sie mindestens benötigen, folgende:

• eine README.md-Datei am Stammverzeichnis des Projekts, die den Projektnamen und eine gute Beschreibung dessen enthält, was es ist. GitHub zeigt den Inhalt unter der Liste der Dateien im Repository an.
• eine CONTRIBUTING.md-Datei, die den Prozess für Einreichungen von Beiträgen beschreibt. Seien Sie explizit hinsichtlich der beteiligten Schritte und dessen, was eine „gute“ Einreichung ausmacht.
• eine Pull-Request-Vorlage. Ich würde dies nicht gerade als zwingend bezeichnen, aber es lohnt sich, es dieser Liste hinzuzufügen, da es die Erwartungen für die Einreichung von Beiträgen weiter festigt. Viele Vorlagen enthalten sogar eine Checkliste, die die Anforderungen für die Genehmigung detailliert aufführt.

Und noch ein Tipp: Das Einrichten einer Branch-Schutzregel für den Haupt-Branch ist ebenfalls eine gute Idee. Sie können dies tun, indem Sie von Ihrem Repository aus zu Einstellungen → Branches navigieren und die Option „Regel hinzufügen“ auswählen. „Pull-Request-Reviews vor dem Mergen erzwingen“ und „Review von Code-Besitzern erzwingen“ sind die beiden wichtigsten Einstellungen, die Sie aktivieren sollten. Sie können die GitHub-Dokumentation konsultieren, um mehr über diesen Schutz zu erfahren.

Kommt als Nächstes…

Was wir hier behandelt haben, ist ein Ausgangspunkt für die Erstellung einer gemeinschaftsgetriebenen Website mit Eleventy. Der Punkt ist, dass es mehrere Dinge zu berücksichtigen gibt, bevor wir direkt zum Code springen. Gemeinschaften brauchen Pflege und das erfordert einige Schritte, die helfen, eine engagierte und gesunde Gemeinschaft aufzubauen.

Sie sind wahrscheinlich schon ungeduldig, eine Community-Website mit Eleventy zu coden! Nun, das kommt im nächsten Teil dieses Zweiteilers. Gemeinsam entwickeln wir einen Eleventy-Starter von Grund auf, den Sie für Ihre eigene Community- (oder persönliche) Website erweitern können.