Deploying Vite project to GitHub Pages ROOT (index)

[mikeaustin]

Why are you starting this discussion?

Question

What GitHub Actions topic or product is this about?

Workflow Configuration

Discussion Details

Using https://vite.dev/guide/static-deploy.html#github-pages, I've successfully deployed to GitHub Pages with .../repo, but am not sure how to deploy to / (index). I have searched the docs and these discussions.

I see references such as url: ${{ steps.deployment.outputs.page_url }} in the yaml, but I'm not sure if changing that would work or is the correct way. I've been looking at all the actions documentation and don't see a clear answer.

I want to deploy my build to https://org.github.io, not https://org.github.io/repo. Any tips for configuration?

I assume a parameter to actions/upload-pages-artifact or actions/deploy-pages? I see use of url: ${{ steps.deployment.outputs.page_url }} but not sure how to change it.

Thank you!

[yoter-k]

Hi there 👋

To deploy your Vite project to the root of your GitHub Pages site (e.g., https://org.github.io), you need to configure both the repository and Vite build settings correctly. Changing url: ${{ steps.deployment.outputs.page_url }} will not affect the deployment location — that value is informational only.

🔹 Steps to deploy to the root

1. Use a repository named after your organization or user

• Example: org.github.io
• GitHub Pages uses this repo for the root domain automatically.

2. Set Vite base path

// vite.config.js
export default {
  base: '/',
}

3. Use GitHub Actions to build and deploy

name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - uses: actions/deploy-pages@v4
        id: deployment

4. Optional — Custom domain

• Add a CNAME file to dist/ with your domain name if you want to serve from a custom domain.

✅ TL;DR

• Use a repo named org.github.io for root deployment.
• Set base: '/' in Vite.
• Deploy using upload-pages-artifact + deploy-pages Actions.
• steps.deployment.outputs.page_url is informational only.

This setup ensures your site is served at / instead of /repo.

[mikeaustin]

Thank you so much @yoter-k! I didn't think of changing the actual repo name.