I have a static site that is using Vite and Tailwind deployed on github pages. This is the repo. and here is the gh pages link: https://ethanrush.github.io/CurieNCo/
Locally, when I run
npm run dev
everything works and my site loads properly with all the JS.
When I deploy on github pages following the Vite documentation for deploying a static site. the JavaScript doesn't load.
If I check the URL that the JS is trying to load from: https://ethanrush.github.io/CurieNCo/assets/js/custom.js I get a 404 error.
This is how the scripts are references in index.html:
<!-- Swiper Slider JS -->
<script src="assets/js/swiper-bundle.min.js"></script>
<!-- Counter Js -->
<script src="assets/js/vanilla-counter.js"></script>
<!-- AOS Animation JS -->
<script src="assets/js/aos.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom.js"></script>
This is the deploy action being used on github pages. It is from the Vite documentation
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ['main']
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: 'pages'
cancel-in-progress: true
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
The images are all being correctly loaded and if I got to the URL they are located: https://ethanrush.github.io/CurieNCo/assets/ I don't get a 404. It is only the JS folder that is showing 404 errors.
In my github repo there is a JS folder in the assets folder that holds all my js files. I'm thinking the path is incorrect but I am not sure why it works for images but not js.
I tried changing the homepage url in the package.json, but that did not resolve the issue. It changed the url for the assets as expected but I still have a 404 if I click on those links.
My hunch is it might have something to do with the path to the dist repo in the build action. But I'm not sure entirely what that is or where it should be set to in this context.
