TL;DR
Just resize your image or use a smaller one, then store it in the /img/ directory instead of using a remote URL.
The bug #
When I was trying to deploy this site using Netlify and Eleventy, everything was safe and sound until this bug happened in the Netlify build process (nothing failed in my local environment):
Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble writing template: _site/about/index.html
`TemplateWriterWriteError` was thrown
> VipsJpeg: Premature end of JPEG file
vips2png: unable to write to target
`Error` was thrown:
Error: VipsJpeg: Premature end of JPEG file
vips2png: unable to write to target
Solution #
After trying different stuffs such as clearing cache & re-deploy, removing the _site directory before building, or updating the remote nodejs version to match with my local one, nothing worked.
Then I noticed that sometimes the Netlify log had these lines:
Error writing templates: (more in DEBUG output)
> Having trouble writing template: _site/index.html
`TemplateWriterWriteError` was thrown
> unsupported file type: undefined
(file: /opt/build/repo/_site/img/remote/Z2nwyyb.jpg)
Notice the file remote/Z2nwyyb.jpg: the Eleventy framework generate it per build, by fetching a remote image URL (defined in my templates) then cached it locally.
And that remote image was huge (~ 6.4MB)! So I downloaded and resized it to a smaller one: 768 x 1024 ~ 425KB, but it didn't fix the problem neither...
Until the last step: instead of using the remote image, I copied it to the /img/ directory (not the /_site/img/) and updated all the references in my templates. Finally, it worked!
Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated!
For feedback, ping me on Twitter.
All the information on this blog are my own opinions and do NOT represent the views or opinions of any of my past or current employers.
Published