Follow-up to Github Pages deployment -- unoptimized images

MichaelTamaki commented 7 months ago

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. https://github.com/actions/configure-pages/issues/67

k7lim commented 7 months ago

Thanks for writing this up!

MichaelTamaki commented 7 months ago

Had an idea… change the repo name from CWAWebsite -> codewithaloha.github.io. I think that would fix the incorrect github actions assumptions. Github Pages assumes publishing from a repo will have a path with the repo name in it, which is why the github action forced the /CWAWebsite/ prefix to all URLs (I think). Can propose the fix at the mtg tonight.

See “Types of GitHub Pages sites” https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites

CodeWithAloha / website

Follow-up to Github Pages deployment -- unoptimized images #51

TODO