diff --git a/.github/workflows/deploy-gh-pages.yml b/.github/workflows/deploy-gh-pages.yml
new file mode 100644
index 0000000..8da0f4e
--- /dev/null
+++ b/.github/workflows/deploy-gh-pages.yml
@@ -0,0 +1,55 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Set branch subpath variable (for vite)
+        # This is the URL subpath where a branch is deployed.
+        # Empty for main branch (root), otherwise <branch-name>.
+        run: |
+          if [ "${{ github.ref_name }}" == "main" ]; then
+            echo "BRANCH_SUBPATH=" >> $GITHUB_ENV
+          else
+            echo "BRANCH_SUBPATH=${{ github.ref_name }}" >> $GITHUB_ENV
+          fi
+
+      - name: Build project with development backend
+        if: github.ref_name != 'main'
+        run: npm run build:be-dev
+
+      - name: Build project with production backend
+        if: github.ref_name == 'main'
+        run: npm run build:be-prod
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: ./dist
+          # Deploy main branch to root, other branches to their subfolders
+          target-folder: ${{ env.BRANCH_SUBPATH }}
+          # when deploying main to root, keep `dev` folder, as other branches
+          # are deployed there
+          clean-exclude: "develop"
diff --git a/README.md b/README.md
index 71cb6de..b707e5a 100644
--- a/README.md
+++ b/README.md
@@ -31,3 +31,14 @@ Preview either locally with
 ```
 > npm run preview
 ```
+
+## Branches and deployment
+
+The following branches are automatically deployed via Github actions in the following manner:
+
+- `main`
+  - deployed to https://mc3d.materialscloud.org
+  - and is running on the production backend.
+- `develop`
+  - deployed to https://mc3d.materialscloud.org/develop
+  - and is running on the dev backend.
diff --git a/vite.config.js b/vite.config.js
index 8559874..ab9bad5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,11 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
-// https://vitejs.dev/config/
+// `base:` is the full subpath of the URL.
+// Set it dynamically from an env variable,
+// as different gh branches are deployed to different subpaths
+
 export default defineConfig({
   plugins: [react()],
-  base: "/discover-mc3d-react/",
+  base: process.env.BRANCH_SUBPATH || "",
 });