Editing Openai/691ff205-cea0-8003-bde5-f449b081a1e1 (section)

==== GitHub Pages UI only offers: ====
* / (root)
* /docs

It never shows /dist. That’s expected.

For a Vite project, the usual pattern is:

: 

Here’s how to set that up.

===== Open vite.config.ts and adjust it roughly like this: =====

<syntaxhighlight lang="ts">import { defineConfig } from 'vite'

export default defineConfig({
  base: '/h2wdemo.github.io/',   // IMPORTANT for project pages
  build: {
    outDir: 'docs'               // build into /docs instead of /dist
  }
})

</syntaxhighlight>

Key parts:
* base must match your repo name with slashes: /h2wdemo.github.io/ - This fixes broken paths when the site lives at /h2wdemo.github.io/ under your domain.
* outDir: 'docs' makes Vite build into a folder GitHub Pages actually supports.

===== In the terminal: =====

<syntaxhighlight lang="bash">npm install        # if you haven't already
npm run build      # Vite will create a /docs folder

</syntaxhighlight>

You should now see a <code>docs</code> folder in the repo (with index.html, assets, JS etc.).

===== <syntaxhighlight lang="bash">git add . =====
git commit -m "Configure Vite for GitHub Pages (docs outDir)"
git push

</syntaxhighlight>

===== You already found this screen. Set: =====
* Source: Deploy from a branch
* Branch: main
* Folder: /docs
* Click Save

After the build finishes, your working URL stays:

👉 https://bossleoio.github.io/h2wdemo.github.io/

Now the page should render your built Vite experience, not just the bare HTML.