docs/pages/deployment/client/github-pages.mdx 3.2 K raw
1
# GitHub Pages
2
3
Since the bhvr client is a simple static site you can deploy it just about anywhere, including GitHub Pages. Just follow these steps:
4
5
::::steps
6
7
### Enable GitHub Pages action
8
9
Go to your repo settings and click on the `Pages` tab on the left side, then select `GitHub Actions` as the `Source`
10
11
![gh dash](https://cdn.bhvr.dev/CleanShot%202025-06-07%20at%2021.06.59%402x.png)
12
13
### Add the GitHub Action File
14
15
Create a new directory in the root of your project called `.github` and put another folder inside of it called `workflows`. Finally create a file inside of that folder called `deploy-pages.yaml` with the following contents. Pay special attention to the `Build Client` step as that is where you need to replace `your-repo-name` with the actual name of your repo, as well as any environment variables you want included in the build.
16
17
```yaml [.github/workflows/deploy-pages.yaml]
18
name: Deploy to GitHub Pages
19
20
on:
21
  # Trigger on pushes to main branch
22
  push:
23
    branches: [ main ]
24
25
  # Allow manual triggering from Actions tab
26
  workflow_dispatch:
27
28
# Set permissions for GitHub Pages deployment
29
permissions:
30
  contents: read
31
  pages: write
32
  id-token: write
33
34
# Allow only one concurrent deployment
35
concurrency:
36
  group: "pages"
37
  cancel-in-progress: false
38
39
jobs:
40
  build:
41
    runs-on: ubuntu-latest
42
43
    steps:
44
      - name: Checkout code
45
        uses: actions/checkout@v4
46
47
      - name: Setup Bun
48
        uses: oven-sh/setup-bun@v1
49
        with:
50
          bun-version: latest
51
52
      - name: Install dependencies
53
        run: bun install
54
55
      - name: Build shared package
56
        run: bun run build:shared
57
58
      - name: Build client
59
        run: bun run build:client
60
        env:
61
          # Set the base URL for GitHub Pages # [!code hl]
62
          # Replace 'your-repo-name' with actual values # [!code hl]
63
          VITE_BASE_URL: /your-repo-name/  # [!code hl]
64
65
      - name: Setup Pages
66
        uses: actions/configure-pages@v4
67
68
      - name: Upload artifact
69
        uses: actions/upload-pages-artifact@v3
70
        with:
71
          path: './client/dist'
72
73
  deploy:
74
    environment:
75
      name: github-pages
76
      url: ${{ steps.deployment.outputs.page_url }}
77
    runs-on: ubuntu-latest
78
    needs: build
79
80
    steps:
81
      - name: Deploy to GitHub Pages
82
        id: deployment
83
        uses: actions/deploy-pages@v4
84
```
85
86
### Update the `vite.config.ts` in the `client` package
87
88
Update the `vite.config.ts` file located in the `client/src` directory to include the `base` property
89
90
```typescript [vite.config.ts]
91
import { defineConfig } from "vite";
92
import react from "@vitejs/plugin-react";
93
import tailwindcss from "@tailwindcss/vite";
94
import path from "path";
95
96
export default defineConfig({
97
	plugins: [react(), tailwindcss()],
98
	base: process.env.VITE_BASE_URL || "/", // [!code hl]
99
	resolve: {
100
		alias: {
101
			"@client": path.resolve(__dirname, "./src"),
102
			"@server": path.resolve(__dirname, "../server/src"),
103
			"@shared": path.resolve(__dirname, "../shared/src"),
104
			"@": path.resolve(__dirname, "./src"),
105
		},
106
	},
107
});
108
```
109
110
### Push to Deploy!
111
112
After setting these up you have deployments anytime you push to your main branch!
113
114
::::
115
116
::::tip
117
[Check out the Vite Docs for more info and tips](https://vite.dev/guide/static-deploy#github-pages)
118
::::