configure github pages deployment

.github/workflows/deploy.yml

@@ -0,0 +1,39 @@
+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: [ main ]
+  # 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@v3
+      - name: Install, build, and upload your site
+        uses: withastro/action@v1
+        # with:
+          # path: . # The root location of your Astro project inside the repository. (optional)
+          # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (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)
+
+  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@v1

astro.config.mjs

@@ -4,5 +4,6 @@ import vue from '@astrojs/vue';
 
 // https://astro.build/config
 export default defineConfig({
+  site: 'https://duckwho.codes',
   integrations: [vue()],
 });

public/CNAME

@@ -0,0 +1 @@
+css-container-queries-demo.duckwho.codes

src/pages/index.astro

@@ -7,15 +7,15 @@ import Layout from '../layouts/Layout.astro';
     <h1 class="text-xl font-bold">CSS container queries demo index</h1>
   </header>
   <div class="p-4">
-    <a href="/surface-media-queries"> 1. Media queries on Surface</a>
-    <a href="/surface-container-queries"> 2. Container queries on Surface</a>
-    <a href="/surface-content-picker">
+    <a href="/css-container-queries-demo/surface-media-queries"> 1. Media queries on Surface</a>
+    <a href="/css-container-queries-demo/surface-container-queries"> 2. Container queries on Surface</a>
+    <a href="/css-container-queries-demo/surface-content-picker">
       3. Content picker component on Surface
     </a>
-    <a href="/dashboard-content-picker">
+    <a href="/css-container-queries-demo/dashboard-content-picker">
       4. Reuse content picker component on Dashboard
     </a>
-    <a href="/dashboard-content-picker-fallback">
+    <a href="/css-container-queries-demo/dashboard-content-picker-fallback">
       5. Fix content picker component on Dashboard by using media queries as
       fallbacks
     </a>