Få Netlify Stora Medier Kommer

0
16

Jag gjorde bara detta häromdagen så jag tänkte att jag skulle blogg upp det. Det finns något som heter Git Stor Fil Lagring (Git AKU). Här är hela vitsen med det: det håller stora filer i din repo direkt. Säg att du har 500 MB av bilder på din webbplats och kinda de behöver för att vara i repo så att du kan arbeta med det lokalt. Men det suger eftersom någon kloning reporäntan behöver ladda ner massor av data. Git AKU är svaret.

Netlify har en produkt på toppen av Git LFS kallas Stora Medier. Här är hela poängen med det hela: förutom att göra det lättare att ställa upp och erbjuda en plats för att sätta dessa stora filer, när du har dina filer i det, kan du WEBBADRESSEN fråga param baserat ändra storlek på dem, vilket är mycket användbart. Jag är allt om att låta datorerna göra min bild dimensionering för mig.

Du bör nog bara läsa dokument om du ska komma igång med detta. Men jag sprang in i ett par hakar så jag tänker skriva ner dem här i fall det slutar användbart.

Du måste installera grejer

Jag är på en Mac, så det är dessa saker jag gjorde. Du behöver:

  1. Git LFS själv: brew install git-lfs
  2. Netlify CLI: npm install netlify-cli -g
  3. Netlify Stora Media add-on för CLI: netlify plugins:installera netlify-lm-plugin och sedan netlify lm:installera

“Länk” webbplatsen

Du har bokstavligen att auth på Netlify och som ansluter Netlify CLI till den plats du arbetar på.

netlify länk

Det kommer att skapa ett .netlify/staten.json-filen i ditt projekt som detta:

{
“siteId”: “xxx”
}

Kör installationsprogrammet

netlify lm:setup

Detta skapar en annan fil i ditt projekt .lsfconfig:

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

Du bör engagera dem båda.

“Koll” på alla dina bilder

Du måste köra mer terminal-kommandon för att berätta Netlify Stora Medier exakt vilka bilder som bör vara på Git LFS. Säg att du har en massa Png och jpg-bilder kan du köra:

git lfs spår “*.jpg” “*.png”

Detta var en mindre gotcha för mig. Mitt projekt hade mest .jpeg-filer och jag blev förvirrad varför det var inte plocka upp dem. Märker något annorlunda file extension (ughadgk).

Detta kommer att göra ännu en fil på din projektet kallas .gitattributes. I mitt fall:

*.jpg filter=lfs diff=lfs sammanfoga=aku -text
*.png-filter=lfs diff=lfs sammanfoga=aku -text
*.jpeg-filter=lfs diff=lfs sammanfoga=aku -text

Denna gång, när du trycker på, alla bilder som kommer upp till den Netlify Stora Media storage service. Det kan vara en extra långsamt tycktes driva beroende på hur mycket du laddar upp.

Min huvudsakliga fixar det var vid denna punkt. Denna sista push skulle bara snurra och snurra för mig och min Git-klienten och slutligen misslyckas. Visade sig att jag behövde installera netlify-referens-hjälpare. Det fungerade bra efter att jag gjorde det.

Och for the record, det är inte bara bilder som kan hanteras på detta sätt, det är en stor fil. Jag tror de kallas för “binär” – filer och är vad Git är inte särskilt bra på att hantera.

Kolla din repo, bilderna är bara tips nu

Git-repo där en JPG-fil är egentligen inte en bild, men en liten text pekaren.

Och det bästa

För att ändra storlek på bilden on-the-fly till den storlek jag vill ha, jag kan göra det via URL-parametrar:

<img
src=”bilder/Oops.003.jpeg?nf_resize=passform&w=1000″
alt=”Skärmdumpar av CSS-Tricks och CodePen hemsidor”
/>

Vilket är superpowered av en lyhörd bilder syntax. Till exempel…

<img srcset=”img.jpg?nf_resize=passform&w=320 320w,
< img>.jpg?nf_resize=passform&w=480 480w,
< img>.jpg?nf_resize=passform&w=800 800w”
storlekar=”max-width: 320px) 280px,
(max-width: 480px) 440px,
800px”
src=”img.jpg?nf_resize=passform&w=800″ alt=”Elva klädd som en älva”>