👋 Hallo Leute! Silvestar hat uns diesen Beitrag vorgeschlagen, weil er eine echte Begeisterung für JAMstack und all die Möglichkeiten hegt, die es für die Front-End-Entwicklung eröffnet. Wir wollten das hervorheben, denn obwohl einige der hier genannten Punkte wie gesponserte Inhalte wirken mögen und Netlify tatsächlich ein Sponsor von CSS-Tricks ist, ist dies völlig unabhängig von Netlify.
Als JAMstack-Entwickler im Jahr 2019 fühle ich mich, als würde ich im Wunderland leben. All diese modernen Frameworks, Tools und Dienste machen unser Leben als JAMstack-Entwickler ziemlich angenehm. Tatsächlich würde Chris sagen, sie geben uns Superkräfte.
Dennoch gibt es eine bestimmte Plattform, die sich mit ihren beeindruckenden Produkten und Funktionen hervorhebt – Netlify. Wahrscheinlich sind Sie Netlify ziemlich gut vertraut, wenn Sie CSS-Tricks regelmäßig lesen. Es gibt eine Fülle von Artikeln dazu. Es gibt sogar zwei Microsites von CSS-Tricks, die es nutzen.
Dieser Artikel ist eher ein Liebesbrief an Netlify und all die großartigen Dinge, die es tut. Ich habe mich entschlossen, mich hinzusetzen und meine Lieblingsdinge daran aufzulisten. Das möchte ich hier mit Ihnen teilen. Hoffentlich erhalten Sie dadurch nicht nur eine gute Vorstellung davon, wozu Netlify fähig ist, sondern es hilft Ihnen auch, das Beste daraus zu machen.
Sie können die Netlify-Subdomain Ihrer Website anpassen.
Wenn Sie ein neues Projekt auf Netlify erstellen, beginnen Sie entweder damit, entweder
- einen Repository von einem Git-Anbieter auszuwählen oder
- einen Ordner hochzuladen.
Das Projekt sollte in wenigen Minuten bereit sein, und Sie könnten sofort mit der Konfiguration für Ihre Bedürfnisse beginnen. Beginnen Sie mit der Auswahl des Website-Namens.
Der Website-Name bestimmt die Standard-URL für Ihre Website. Es sind nur alphanumerische Zeichen und Bindestriche erlaubt.
Netlify erstellt zufällig einen Standardnamen für ein neues Projekt. Wenn Ihnen der Name nicht gefällt, wählen Sie einen eigenen, der für Sie viel einfacher zu merken ist.
Zum Beispiel ist mein Website-Name silvestarcodes, und ich könnte meine Website unter silvestarcodes.netlify.com aufrufen.
Sie können alle Ihre DNS-Einträge auf Netlify verwalten.
Wenn Sie eine tatsächliche Website einrichten, möchten Sie eine benutzerdefinierte Domain hinzufügen. Gehen Sie vom Domain-Management-Panel zum Abschnitt Benutzerdefinierte Domains, klicken Sie auf die Schaltfläche „Benutzerdefinierte Domain hinzufügen“, geben Sie Ihre Domain ein und klicken Sie auf die Schaltfläche „Überprüfen“.
Jetzt haben Sie zwei Optionen
- Zeigen Sie Ihre DNS-Einträge auf die Netlify-Load-Balancer-IP-Adresse
- Lassen Sie Netlify Ihre DNS-Einträge verwalten
Für die erste Option können Sie die vollständigen Anweisungen in der offiziellen Dokumentation für benutzerdefinierte Domains lesen.
Für die zweite Option sollten Sie die Nameserver bei Ihrem Domain-Registrar hinzufügen oder aktualisieren. Wenn Sie die Domain noch nicht gekauft haben, können Sie sie direkt über das Dashboard registrieren.
Netlify bietet einen Dienst zur Bereitstellung von DNS-Einträgen namens Netlify DNS.
Sobald Sie die benutzerdefinierte Domain konfiguriert haben, können Sie Ihre DNS-Einträge über das Netlify-Dashboard verwalten.
Wenn Sie eine Entwicklungs-Subdomain für Ihren dev-Branch einrichten möchten, um Entwicklungsänderungen für Ihre Website vorab anzuzeigen, können Sie dies automatisch tun. Wählen Sie im Abschnitt Domain-Management in den Einstellungen Ihrer Website den dev-Branch aus, und Netlify fügt für Sie automatisch eine neue Subdomain dev hinzu. Nun können Sie die Vorschauen sehen, indem Sie die Entwicklungs-Subdomain besuchen.
Sie können eine Subdomain für eine andere Website konfigurieren. Um dies zu erreichen, erstellen Sie eine neue Netlify-Website, geben Sie eine neue Subdomain als benutzerdefinierte Domain ein, und Netlify fügt die Einträge automatisch für Sie hinzu.
Als i-Tüpfelchen auf dem DNS-Management-Kuchen ermöglicht Ihnen Netlify die automatische Erstellung von Let's Encrypt-Zertifikaten für Ihre Domain… kostenlos.
Sie können Snippets in Seiten einfügen, was so etwas wie ein Tag-Manager ist.
Snippet-Injektion ist eine weitere exzellente Funktion. Ich verwende sie hauptsächlich zum Einfügen von Analysen, aber Sie könnten sie zum Hinzufügen von Meta-Tags für responsives Verhalten, Favicon-Tags oder Webmention.io-Tags verwenden.
Beim Einfügen von Snippets können Sie wählen, ob Sie das Codefragment am Ende des <head>-Blocks oder am Ende des <body>-Blocks anhängen möchten.
Jeder Deploy hat für immer seine eigene URL.
Netlify erstellt für jeden erfolgreichen Build einen eindeutigen Vorschau-Link. Das bedeutet, Sie können leicht zwischen den Revisionen Ihrer Website vergleichen. Zum Beispiel ist hier der Link zu meiner Website vom Januar dieses Jahres, und hier ist der Link vom Januar letzten Jahres. Beachten Sie die Stil- und Inhaltsänderungen.
In seinem Vortrag nennt Phil Hawksworth diese Funktion immutable, atomic deploys.
Es sind unveränderliche Deployments, die für immer existieren.
— Phil Hawksworth
Ich fand diese Funktion nützlich, wenn ich Aufgaben erledigte und die Vorschau-Links an die Kunden sendete. Wenn es eine Person gibt, die für Git-bezogene Aufgaben zuständig ist, wie z. B. die Veröffentlichung auf der Produktionsumgebung, können diese Vorschau-Links praktisch sein, um zu verstehen, was bei der Zusammenführung zu erwarten ist. Sie können sogar Vorschau-Builds für jede Pull-Anfrage einrichten.
Netlify ermöglicht das sauberste und verantwortungsbewussteste A/B-Testing, das Sie durchführen können.
Wenn Sie jemals A/B-Tests auf Ihrer Website durchführen wollten, werden Sie feststellen, dass Netlify das Durchführen von A/B-Tests ziemlich einfach macht. Split-Testing auf Netlify ermöglicht es Ihnen, verschiedene Versionen Ihrer Website aus verschiedenen Git-Branches ohne jegliche Tricks anzuzeigen.
Beginnen Sie damit, einen separaten Branch mit den gewünschten Änderungen hinzuzufügen und zu veröffentlichen. Wählen Sie im Panel „Split Testing“ aus, welche Branches getestet werden sollen, legen Sie einen Split-Prozentsatz fest und starten Sie den Test. Sie können sogar eine Variable im Analytics-Code festlegen, um zu verfolgen, welcher Branch gerade angezeigt wird. Möglicherweise müssen Sie Branch-Deployments aktivieren, falls Sie dies noch nicht getan haben.
Netlify's Split Testing ermöglicht es Ihnen, den Traffic zu Ihrer Website zwischen verschiedenen Deployments direkt von unserem CDN-Netzwerk aufzuteilen, ohne Leistungseinbußen beim Download und ohne die Installation einer Drittanbieter-JavaScript-Bibliothek.
— Netlify-Dokumentation
Ich habe bisher A/B-Testing auf meiner Website für einige verschiedene Funktionen genutzt
- Testen verschiedener Versionen von Kontaktformularen
- Anzeigen verschiedener Versionen von Bannern
- Verfolgen des Benutzerverhaltens, z. B. Heatmaps
Wenn Sie Informationen zum Split-Testing verfolgen möchten, können Sie die Umgebungsvariable für diesen Zweck einrichten. Mehr dazu erfahren Sie in der offiziellen Dokumentation. Das Beste daran? Die meisten A/B-Testing-Dienste verwenden clientseitiges JavaScript, was unzuverlässig und nicht gut für die Leistung ist. Dies auf der Load-Balancer-Ebene zu tun, ist so viel besser.
Es gibt viele Optionen für Benachrichtigungen, z. B. E-Mail und Slack.
Wenn Sie eine Benachrichtigung erhalten möchten, wenn etwas mit Ihrem Netlify-Projekt passiert, können Sie aus einer Vielzahl von Benachrichtigungsoptionen wählen. Ich ziehe es vor, für jeden erfolgreichen oder fehlgeschlagenen Build eine E-Mail zu erhalten.
Wenn Sie Gmail verwenden, können Sie bei jedem erfolgreichen Build den Link „Live-Änderungen anzeigen“ bemerken, wenn Sie mit der Maus über Ihre Nachricht in Ihrem Gmail-Posteingang fahren. Das bedeutet, Sie können einen Vorschau-Link öffnen, ohne die E-Mail zu öffnen. Es gibt andere Links wie „Vollständige Deploy-Logs anzeigen“, wenn Ihr Build Probleme hat, oder „Nutzungsdetails prüfen“, wenn Ihr Plan fast erschöpft ist. Wie großartig ist das?
Wenn Sie einen Hook für Drittanbieterdienste einrichten möchten, benötigen Sie lediglich eine URL (ein JWS-geheimer Token ist optional). Slack-Hooks sind in Netlify integriert und können innerhalb von Sekunden eingerichtet werden, wenn Sie die URL Ihres Slack-Incoming-Webhooks kennen.
Fazit
All die oben genannten Funktionen sind Teil des kostenlosen Netlify-Plans. Ich kann mir kaum vorstellen, wie viel Aufwand in die Bereitstellung einer nahtlosen Erfahrung wie der jetzigen investiert wurde. Aber Netlify hört dort nicht auf. Sie führen immer mehr neue und glänzende Funktionen ein, wie z. B. Netlify Dev CLI für die lokale Entwicklung und Deploy-Abbrechungen. Netlify hat sich als zweifellos bahnbrechende Plattform in der modernen Webentwicklung von statischen Websites etabliert und ist ein wichtiger Teil des Wachstums und der Popularität statischer Websites.
Das scheint auf den ersten Blick eine coole Funktion zu sein, außer dass sie nicht einmal die Möglichkeit bieten, einen Deploy zu entfernen. Das bedeutet, wenn Sie etwas bereitstellen, das Sie später nicht mehr wollen und das nicht mehr öffentlich sein soll, haben Sie absolut keine Möglichkeit, es zu entfernen, außer Ihr Projekt komplett von Netlify zu löschen.
Insgesamt liebe ich Netlify auch sehr und halte es für einen ziemlich großartigen Service.
Das stimmt. Aber das ist ein Opfer, das ich zugunsten all der anderen großartigen Funktionen gerne eingehe.
Außerdem bin ich mir nicht sicher, ob die eindeutige URL Ihnen schaden könnte. Kennen Sie ein Szenario, in dem dies der Fall wäre?
Ich habe ein Netlify-Konto, konnte die Funktion zur Snippet-Injektion aber nicht finden. Wo finde ich sie?
Es befindet sich unter Einstellungen → Build und Deploy → Post Processing → Snippet-Injektion.
Verstanden! Danke.
Bei der Snippet-Injektion erwähnen Sie die Verwendung für Analysen oder responsives Verhalten. Können Sie das etwas genauer erklären?
Nun, Sie könnten Google Analytics über die Snippet-Injektion vor dem schließenden
<body>-Tag einfügen, aber Sie könnten auch Code vor dem schließenden<head>einfügen. Zum Beispiel könnten Sie ein responsives Meta-Tag in Ihrem Head-Bereich einfügen:<meta name="viewport" content="width=device-width, initial-scale=1">. Ich würde es nicht empfehlen, aber theoretisch könnten Sie es tun.