Follow-up to Github Pages deployment -- unoptimized images #51
Description
We had a fun, perfect engineering principles journey in the 1/22/24 meeting where we tried to debug the CWA website deployment on Github Actions.
See PRs:
From #48:
We're facing an issue where the Github pages deployed website is using the wrong URL for assets. For example,
https://codewithaloha.org/CWAWebsite/_next/static/css/6087ebff33816151.css
It 404s on this URL. Originally, we thought that maybe it was not deploying the build assets, but what was really happening was that the URL itself was incorrect. We found that if we removed CWAWebsite from the URL, the asset was there.
https://codewithaloha.org/_next/static/css/6087ebff33816151.css
From #50:
Ok so #48 didn't work. Try again, the error was due to using optimized images.
Run npx --no-install next export
npx --no-install next export
shell: /usr/bin/bash -e {0}
⚠ "next export" is deprecated in favor of "output: export" in next.config.js https://nextjs.org/docs/advanced-features/static-html-export
using build directory: /home/runner/work/CWAWebsite/CWAWebsite/.next
Copying "static build" directory
⨯ Image Optimization using the default loader is not compatible with export.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
Read more: https://nextjs.org/docs/messages/export-image-api
Error: Process completed with exit code 1.
https://github.com/CodeWithAloha/CWAWebsite/actions/runs/7621593565/job/20758192223
TODO
To get this to work, we had to turn off image optimization. We also turned off the github action actions/configure-pages@v3 (which I still don't exactly know what it does). Someone needs to investigate if there's any way we can deploy nodejs to Github Pages AND have image optimization turned on.
@tyliec found the related issue which helped us pinpoint the bug. actions/configure-pages#67