prepare website for deployment via github pages

Author: earth-walker

.github/workflows/deploy-website.yml

@@ -0,0 +1,42 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [website-deployment]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v5
+      - name: Install, build, and upload your site
+        uses: withastro/action@v5
+        with:
+          path: ./website # The root location of your Astro project inside the repository. (optional)
+          # node-version: 24 # The specific version of Node that should be used to build your site. Defaults to 22. (optional)
+          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+          # build-cmd: pnpm run build # The command to run to build your site. Runs the package build script/task by default. (optional)
+        # env:
+        # PUBLIC_POKEAPI: 'https://pokeapi.co/api/v2' # Use single quotation marks for the variable value. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

website/astro.config.mjs

@@ -3,4 +3,8 @@ import { defineConfig } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
-export default defineConfig({ vite: { plugins: [tailwindcss()] } });
+export default defineConfig({
+  vite: { plugins: [tailwindcss()] },
+  site: "https://earth-walker.github.io",
+  base: "/benefit-decision-toolkit",
+});

website/src/components/Footer.astro

@@ -1,5 +1,5 @@
 <footer class="py-6 text-center flex flex-col gap-3 bg-green-300">
-  <a href="#top">Return to top</a>
+  <a href=`${import.meta.env.BASE_URL}/#top`>Return to top</a>
   <p>Benefit Decision Toolkit</p>
   <p>With ❤️ from Philly</p>
 </footer>

website/src/components/Header.astro

@@ -16,7 +16,9 @@ import logo from "../assets/logos/bdt-logo-large-mono-dark.svg";
         {
           navLinks.map((link) => (
             <li>
-              <a href={link.path}>{link.title}</a>
+              <a href={`${import.meta.env.BASE_URL}/${link.path}`}>
+                {link.title}
+              </a>
             </li>
           ))
         }

website/src/components/Hero.astro

@@ -12,7 +12,7 @@ import { Content } from "../assets/copy/Hero.md";
     >
       <Content />
     </div>
-    <a href="#projects">
+    <a href=`${import.meta.env.BASE_URL}/#projects`>
       <p
         class="mt-6 w-fit px-4 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-500 text-lg font-bold font-serif"
       >