Eine Website für die Front-End-Entwicklung-Konferenzen (Gebaut mit 11ty auf Netlify)

0
19

Ich baute eine neue kleine Website! Es ist eine Website für bevorstehende Konferenzen in die Welt von front-end-web-design und Entwicklung. In den vergangenen Jahren (wie 2017), Sarah Drasner nahm diese gewaltige Aufgabe. Wir verwendeten eine form für die neue Konferenz-Beiträge, aber es war immer noch eine eher manuelle Aufgabe, die grundsätzlich manuell Bearbeiten eines blog-post. Ich wollte zu halten Sie tun dies, wie ich denke, es ist nützlich, um eine einfache Referenz-Seite für Konferenzen in unserer Nische Scheibe des web, aber ich wollte die Website in der Lage sein, zu Leben Jahr für Jahr mit geringeren Wartungs-bezogene technische Schulden.

Also das ist, was ich Tat!

Ich wollte es auf GitHub.

So legte ich es. Teil der Schönheit von GitHub ist, dass es eröffnet die Idee der Zusammenarbeit mittels pull-requests, um wirklich jeden in der Welt. Sie müssen einen GitHub account haben, aber das ist kostenlos, und Sie müssen verstehen, Git zumindest auf einige kleinere Ebene (das ist ein Hindernis, das möchte ich beheben, in der Zeit), aber er fordert mehr Zusammenarbeit als so etwas wie einfach die Leute zu Fragen-E-Mail, die Sie Inhalte und Ideen.

Ich wollte den content in Markdown in das Repo.

Die Front Matter format, die Markdown mit einigen Daten, die die top -, ist zu einem nützlichen und zugänglichen format. Sie benötigen fast null wissen, nicht einmal HTML, um in der Lage zu erstellen/Bearbeiten einer Datei wie dieser:

Mit der eigentlichen Konferenz Daten in der repo bedeutet, dass pull-Anforderungen sind nicht nur für design oder features; häufiger, Sie werden für die eigentliche Konferenz Daten. Die arbeiten dieser Website voll von all der besten Tagungen ist es, die Arbeit von uns allen, nicht nur einer von uns.

Zum Zeitpunkt des Schreibens dieses Artikels gibt es bereits 30 geschlossen pull-Anforderungen.

Ich verwendet 11ty um die Website zu bauen.

11ty ist fast faszinierend einfache. Es sucht in einem Verzeichnis, für das, was es braucht, zu verarbeiten oder zu verschieben in ein anderes Verzeichnis. Es unterstützt mein Lieblings-Template-system out of the box: Nunjucks. Plus front matter Markdown-wie ich oben erwähnt habe.

Ich war in der Lage, im wesentlichen design, eine Karte, die zeigt die Daten, die wir von den Markdown-Dateien erstellen und dann die homepage der Website, indem die Schleife über diese Markdown-Dateien und die Anwendung der Vorlagen-Karte.

11ty basiert auf Node.js so, während ich hatte einige Lernkurve Momente, es war bequem für mich zu arbeiten. Es ist definitiv Konfiguration für die Dinge tun, die ich wollte, zu tun. Zum Beispiel, das ist, wie ich hatte, um eine “Sammlung” von Konferenzen, um die Schleife über Sie:

config.addCollection(“Konferenzen”, function(collection) {
lassen Sie allConferences = Sammlung.getFilteredByGlob(“site/Konferenzen/*.md”);
lassen Sie futureConferences = allConferences.filter(conf => {
Rückkehr conf.Daten.Datum >= new Date();
});
zurück futureConferences;
});

Die Website gehostet wird, auf Netlify.

Ein Grund für Netlify hier ist, dass es unglaublich einfach. Ich machte eine site in Netlify durch den Anschluss an das GitHub-repo. Ich erzählte ihm, wie es um die Website zu bauen (es ist ein einziger Befehl: eleventy) und wo die integrierte site-Dateien sind (dist), und das ist es. In der Tat, das ist sogar Teil der repo:

Jetzt, wenn ich push auf den master-branch (oder akzeptieren Sie einen pull-request in den master), die Website automatisch erstellt und bereitgestellt werden. Dauert nur Sekunden. Es ist wirklich erstaunlich.

Besser gesagt, für jede pull Anfrage, Netlify stellt sicher, dass alles in Ordnung ist, zuerst:

Mein Favorit ist die Bereitstellung Vorschau. Es gibt einen (obskuren) – URL, im wahrsten Sinne des Wortes ewig (unveränderbar) und dient als ein Blick auf die integrierte version dieser Website mit, dass die pull-Anfrage.

Also, es ist nicht nur extrem einfach zu bedienen, Netlify, aber ich bekomme ein paar Sachen kostenlos, wie die Tatsache, dass die Website ist smokin’ schnell auf Ihre CDNs und so.

Ich bin auch aufgeregt, dass ich kaum erschlossen Netlify Funktionen hier, so gibt es eine Menge Sachen, die ich kann Graben sich in Laufe der Zeit. Und ich beabsichtige!

Ich benutze Zapier zu re-build der Website jeden Tag.

Es ist ein bisschen eine Zeit-sensiblen Natur zu dieser Website. Der Zweck dieser Website ist die Referenz für die kommenden Konferenzen. Es ist weniger interessant, um zu sehen, den Konferenzen der vergangenen Jahre (obwohl vielleicht können wir eine durchsuchen-in der Lage, archive in der Zukunft). Ich mag die Idee, die rippen aus vergangenen Konferenzen für die homepage. Wenn dies mit PHP (oder was auch immer), könnten wir tun, dass zur Laufzeit, aber dies ist eine statische Website (on purpose). Sowas zu erstellen ist keine große Sache (siehe das code-snippet oben, dass gibt nur Konferenzen Vergangenheit das heutige Datum). Aber wir können nicht nur darauf warten, um für pull-Anfragen zu re-build der Website, noch will ich Sie, um es ein Handbuch, was ich tun müssen, jeden Tag.

Glücklicherweise ist dies kinderleicht mit Zapier:

Phil Hawksworth nahm dieser zu den extremen, einmal und baute eine Uhr website erstellt jede minute.

Diese Website war nicht nur ein experiment. Ich möchte es am laufen halten! Wenn Sie Teil der Ausführung einer Konferenz, ich bin mir ziemlich sicher, dass es nicht wehtut”, um es hinzuzufügen, um Ihren hinzufügen, nur so lange, wie es ein Anwendbares und umsetzbare Code of Conduct, und ist in der Welt von front-end-web-design und Entwicklung.