Search code examples
deploymentgithub-actionshttp-status-code-404github-pagessveltekit

SvelteKit deployment on gh - pages doesn't work. Only HTML is shown, CSS and JS doesn't load


If I build the project locally and view the preview, everything works fine. If I deploy it to gh-pages only HTML is shown and JS & CSS cannot be loaded. Why is that? I don't find what I am doing wrong, i asked on the official svelte discord server too.

What I used:
Framework: SvelteKit
Adapter: @sveltejs/adapter-static
Hosting Service: GitHub => gh-pages

Deploy Action: https://github.com/marketplace/actions/deploy-to-github-pages
The build files are all in one branch that gets published to gh-pages.

=> Result:
gh-pages-site: https://jonasfroeller.github.io/jonasfroeller/de
repo: https://github.com/jonasfroeller/jonasfroeller/tree/master/portfolio

"dependencies": {
    "@tailwindcss/typography": "^0.5.9",
    "daisyui": "^2.46.1",
    "iconify-icon": "^1.0.2",
    "typesafe-i18n": "^5.18.1"
}

svelte.config.js > paths.base: process.env.NODE_ENV === 'production' ? '/jonasfroeller' : ''

may be important: The whole website is inside of a dynamic route called [lang]. If you don't specify a lang you are being forworded.

Error example in the console: GET https://jonasfroeller.github.io/jonasfroeller/\\\_app/immutable/chunks/i18n-svelte-76a2aa52.js net::ERR_ABORTED 404

I tried 2 other actions but they resulted simillar. I also tried adding a .nojekyll file to the build folder because jekyll doesn't like "_,.,#,~", that didn't work as well. (https://stackoverflow.com/questions/40333629/cant-load-existing-js-file-on-gh-pages)


Solution

  • There is documentation on this specifically.

    Disable Jekyll by simply placing a .nojekyll file in static