Search code examples
reactjsjsongithub-pagesvite

GitHub Pages can't see my project correctly

I've tried to publish the project on GitHub Pages a couple of times but failed. This is my first React project.

I don't know if it's because of a bad project structure:

Project Structure

... or if I'm doing something wrong with GIT itself. I am asking for help, or for some good and up-to-date guide on YT or forum.

When I just publish a page to GitHub Pages, it's just the background, nothing else. I also used the guides, but at best only the Header component loaded. Routing was not working and dynamically generated items from .json file were not loading.

UPDATE
Old repo is no longer available. There is a new version of it here

Solution

  • Github Pages

    GitHub Pages can display static webpages. Therefore, you will need the production version of your code, which you can build and upload to the dist folder of your repository.

    Solution: automatically build production and deploy

    Need configure your Github Action for this repository.

    Step # 1

    Need to define your base on Vite.

    // vite.config.js

export default defineConfig({
  build: {
    base: process.env.NODE_ENV === 'production' ? '/reponame/' : '/',
    // Other build configuration options...
  },
})

    Or can use relative default path - i prefer to it for Github Page -

    // vite.config.js

export default defineConfig({
  build: {
    base: './',
    // Other build configuration options...
  },
})

    Step # 2

    Generate a new file to /.github/workflows as deploy.yml.

    Add configuration:

    name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

    Step # 3

    Commit and push your new deploy.yml.

    Step # 4

    Visit your GitHub repository in your browser, then click on the "Actions" tab. Here, you should see the workflow labeled "Deploy to GitHub Pages" that starts after the push. Wait until the workflow successfully completes.

    It's generate your production version and deploy it to Github Pages.

    Step # 5

    Open your Github Pages static application:

    https://<github-username>.github.io/<repository-name>/

    Summary

    Now, if you make changes to the source code (dev) and push them, GitHub Actions will compile your production code and update your GitHub Pages site after a short period of time.