Hice esto el otro día, así que pensé en publicarlo en un blog. Hay una cosa llamada Git Large File Storage (Git LFS). Aquí está todo el punto: mantiene los archivos grandes fuera de su repositorio directamente. Supongamos que tiene 500 MB de imágenes en su sitio y que deben estar en el repositorio para que pueda trabajar con ellas localmente. Pero eso apesta porque alguien que clona el repositorio necesita descargar una tonelada de datos. Git LFS es la respuesta.
Netlify tiene un producto además de Git LFS llamado Large Media. Aquí está todo el punto: Además de facilitar la configuración y proporcionar un lugar para colocar esos archivos grandes, una vez que tenga sus archivos allí, puede realizar una consulta de URL en función del cambio de tamaño de ellos, lo cual es muy útil. Me gusta dejar que las computadoras hagan el tamaño de mi imagen por mí.
Probablemente debería leer los documentos si está comenzando con esto. Pero encontré algunos inconvenientes, así que los anotaré aquí en caso de que esto termine siendo útil.
Tienes que instalar cosas
Estoy en una Mac, así que estas son las cosas que hice. Necesitarás:
- Git LFS en sí:
brew install git-lfs - CLI de Netlify:
npm install netlify-cli -g - Complemento de Netlify Large Media para la CLI:
netlify plugins:install netlify-lm-pluginy luegonetlify lm:install
“Vincular” el sitio
Literalmente, tiene que realizar la autenticación en Netlify y eso conecta la CLI de Netlify al sitio en el que está trabajando.
netlify linkCreará un .netlify/state.json archivo en su proyecto de esta manera:
{
"siteId": "xxx"
}Ejecutar la instalación
netlify lm:setupEsto crea otro archivo en su proyecto en .lsfconfig:
[lfs]
url = https://xxx.netlify.com/.netlify/large-mediaDeberías comprometerlos a ambos.
“Rastrea” todas tus imágenes
Deberá ejecutar más comandos de terminal para decirle a Netlify Large Media exactamente qué imágenes deben estar en Git LFS. Supongamos que tiene un montón de PNG y JPG, podría ejecutar:
git lfs track "*.jpg" "*.png"Esto fue un problema menor para mí. Mi proyecto tuvo mayormente .jpeg archivos y me confundí por qué esto no los estaba recogiendo. Observe la extensión de archivo ligeramente diferente (ughadgk).
Esto creará otro archivo en su proyecto llamado .gitattributes. En mi caso:
*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -textEsta vez, cuando presione, todas las imágenes se cargarán en el servicio de almacenamiento Netlify Large Media. Podría ser un impulso aparentemente extra lento dependiendo de cuánto esté cargando.
Mi principal problema fue en este punto. Este último empujón simplemente giraría y giraría para mí y mi cliente Git y eventualmente fallaría. Resulta que necesitaba instalar netlify-credential-helper. Funcionó bien después de que hice eso.
Y para que conste, no son solo las imágenes las que se pueden manejar de esta manera, es cualquier archivo grande. Creo que se llaman archivos “binarios” y son lo que Git no es particularmente bueno para manejar.
Echa un vistazo a tu repositorio, las imágenes ahora son solo indicadores
Repositorio de Git donde un archivo JPG no es en realidad una imagen, sino un pequeño puntero de texto.
Y la mejor parte
Para cambiar el tamaño de la imagen sobre la marcha al tamaño que quiero, puedo hacerlo a través de parámetros de URL:
<img
src="https://css-tricks.com/getting-netlify-large-media-going/slides/Oops.003.jpeg?nf_resize=fit&w=1000"
alt="Screenshots of Programar Plusand CodePen homepages"
/>Que está superpoblado por una sintaxis de imágenes receptivas. Por ejemplo…
<img srcset="https://css-tricks.com/img.jpg?nf_resize=fit&w=320 320w,
https://css-tricks.com/img.jpg?nf_resize=fit&w=480 480w,
https://css-tricks.com/img.jpg?nf_resize=fit&w=800 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="https://css-tricks.com/getting-netlify-large-media-going/img.jpg?nf_resize=fit&w=800" alt="Elva dressed as a fairy">