让Netlify大型媒体运行
最近,我解决了设置Netlify大型媒体的问题,并认为我会分享自己的经验。 git大文件存储(git lfs)是关键:它可以将大型文件放在您的主git存储库中。想象一个带有500MB图像的网站 - 将它们直接放在存储库中,使克隆成为噩梦。 Git LFS通过单独存储大型文件来解决此问题。
Netlify大型媒体建立在git LFS上,简化设置并添加了关键的好处:通过URL参数调整的即时图像。这种自动化的调整是一个巨大的节省时间。
虽然官方文档是一个很好的起点,但我遇到了一些障碍,我将在下面进行记录。
必要的安装(MACOS)
这些步骤是用于MacOS的;根据需要调整其他系统。您需要:
- git LFS:
brew install git-lfs
- NetLify CLI:
npm install netlify-cli -g
- NetLify大型媒体插件:
netlify plugins:install netlify-lm-plugin
然后是netlify lm:install
链接您的网站
使用Netlify进行身份验证,将CLI连接到您的项目:
NetLify链接
这将生成一个.netlify/state.json
文件,其中包含您的网站ID:
{ “ siteID”:“ xxx” }
建立大型媒体
运行设置命令:
Netlify LM:设置
这将创建一个.lfsconfig
文件:
<code>[lfs] url = https://xxx.netlify.com/.netlify/large-media</code>
提交.netlify/state.json
和.lfsconfig
。
跟踪图像
使用Git LFS指定应管理哪些图像类型:
git lfs轨道“*.jpg”“*.jpeg”“*.png”
(注意:我最初错过了.jpeg
,导致问题。确保您包括所有相关扩展。)
例如,这会生成一个.gitattributes
文件,例如:
<code>*.jpg filter=lfs diff=lfs merge=lfs -text *.png filter=lfs diff=lfs merge=lfs -text *.jpeg filter=lfs diff=lfs merge=lfs -text</code>
投入和推动后,您的图像将上传到NetLive大型媒体。此推动可能需要一段时间,具体取决于文件大小。
潜在的障碍:我的最初推动停滞了。解决方案是安装netlify-credential-helper
。
这个过程不仅限于图像。任何大型二进制文件都可以通过这种方式处理。
集合:指针,而不是文件
初次推动后,您的存储库将仅包含Netlify大型媒体中存储的文件的指针。
即时调整大小:最好的部分
使用URL参数动态调整图像大小:
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="让Netlify大型媒体运行">
将其与响应式图像技术相结合以获得最佳性能:
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="让Netlify大型媒体运行">
以上是让Netlify大型媒体运行的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...
