Netlify Large Media einrichten

Ich habe das neulich gemacht, also dachte ich, ich schreibe darüber. Es gibt etwas namens Git Large File Storage (Git LFS). Das ist der Sinn der Sache: Große Dateien direkt aus Ihrem Repository fernzuhalten. Sagen wir, Sie haben 500 MB Bilder auf Ihrer Website und diese müssen irgendwie in Ihrem Repository sein, damit Sie lokal damit arbeiten können. Aber das ist ärgerlich, weil jemand, der das Repository klont, eine Menge Daten herunterladen muss. Git LFS ist die Lösung.

Netlify hat ein Produkt, das *auf* Git LFS aufbaut und Large Media heißt. Das ist der Sinn der Sache: Zusätzlich zur einfacheren Einrichtung und der Bereitstellung eines Ortes, an dem diese großen Dateien *platziert* werden können, können Sie diese Dateien, sobald sie dort sind, URL-basierte Größenänderung per Query-Parameter anwenden, was sehr nützlich ist. Ich lasse Computer gerne meine Bildgrößen für mich bestimmen.

Sie sollten wahrscheinlich einfach die Dokumentation lesen, wenn Sie damit beginnen. Aber ich bin auf ein paar Hürden gestoßen, also schreibe ich sie hier auf, falls das nützlich sein sollte.

Sie müssen etwas installieren

Ich verwende einen Mac, also sind dies die Dinge, die ich getan habe. Sie benötigen

Git LFS selbst: brew install git-lfs
Netlify CLI: npm install netlify-cli -g
Netlify Large Media Add-on für die CLI: netlify plugins:install netlify-lm-plugin und dann netlify lm:install

Die Website "verknüpfen"

Sie müssen sich buchstäblich bei Netlify authentifizieren, und das verbindet die Netlify CLI mit der Website, an der Sie arbeiten.

netlify link

Dies erstellt eine Datei namens .netlify/state.json in Ihrem Projekt, wie hier gezeigt

{
	"siteId": "xxx"
}

Setup ausführen

netlify lm:setup

Dadurch wird eine weitere Datei in Ihrem Projekt erstellt, nämlich .lsfconfig

[lfs]
	url = https://xxx.netlify.com/.netlify/large-media

Sie sollten beide committen.

Alle Ihre Bilder "verfolgen"

Sie müssen weitere Terminalbefehle ausführen, um Netlify Large Media mitzuteilen, welche Bilder genau auf Git LFS sein sollen. Sagen wir, Sie haben eine Menge PNGs und JPGs, Sie könnten Folgendes ausführen:

git lfs track "*.jpg" "*.png"

Dies war für mich ein kleiner Haken. Mein Projekt hatte hauptsächlich .jpeg-Dateien, und ich war verwirrt, warum dies sie nicht erfasste. Beachten Sie die leicht unterschiedliche Dateiendung (ughadgk).

Dadurch wird eine weitere Datei in Ihrem Projekt erstellt, namens .gitattributes. In meinem Fall

*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -text

Dieses Mal, wenn Sie pushen, werden alle Bilder in den Netlify Large Media Speicherdienst hochgeladen. Abhängig von der Menge, die Sie hochladen, kann der Push langsam erscheinen.

Mein Haupt-Haken war an diesem Punkt. Der letzte Push würde bei mir nur endlos laufen und dann mit meinem Git-Client fehlschlagen. Es stellte sich heraus, dass ich den netlify-credential-helper installieren musste. Danach funktionierte es einwandfrei.

Und nur zur Info, es sind nicht nur Bilder, die so behandelt werden können, sondern jede große Datei. Ich glaube, sie werden als "binäre" Dateien bezeichnet und sind das, womit Git nicht besonders gut umgehen kann.

Schauen Sie sich Ihr Repository an, die Bilder sind jetzt nur noch Zeiger

Git-Repository, in dem eine JPG-Datei nicht tatsächlich ein Bild ist, sondern ein kleiner Textzeiger.

Und das Beste daran

Um das Bild on-the-fly auf die gewünschte Größe zu ändern, kann ich dies über URL-Parameter tun

<img 
  src="slides/Oops.003.jpeg?nf_resize=fit&w=1000"
  alt="Screenshots of CSS-Tricks and CodePen homepages"
/>

Dies wird durch eine Responsive Images-Syntax superpowered. Zum Beispiel...

<img srcset="img.jpg?nf_resize=fit&w=320 320w,
             img.jpg?nf_resize=fit&w=480 480w,
             img.jpg?nf_resize=fit&w=800 800w"
      sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
        src="img.jpg?nf_resize=fit&w=800" alt="Elva dressed as a fairy">