Fix CSS loading in Codespaces with transparent hugo command wrapper

.devcontainer/debug-codespaces.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+
+# Debug script to check Codespaces environment
+echo "=== Codespaces Environment Debug ==="
+echo "CODESPACE_NAME: ${CODESPACE_NAME:-NOT SET}"
+echo "GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN: ${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN:-NOT SET}"
+echo ""
+
+if [ -n "$CODESPACE_NAME" ]; then
+    if [ -n "$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN" ]; then
+        CONSTRUCTED_URL="https://${CODESPACE_NAME}-1313.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
+    else
+        CONSTRUCTED_URL="https://${CODESPACE_NAME}-1313.app.github.dev"
+    fi
+    echo "Constructed Codespaces URL: $CONSTRUCTED_URL"
+else
+    echo "Not running in Codespaces (CODESPACE_NAME not set)"
+fi
+
+echo ""
+echo "=== Hugo Binary Location ==="
+which hugo
+ls -la $(which hugo) 2>/dev/null || echo "Hugo not found"
+
+echo ""
+echo "=== Hugo Version ==="
+hugo version 2>/dev/null || echo "Hugo command failed"
+
+if [ -f "/usr/local/bin/hugo-real" ]; then
+    echo ""
+    echo "=== Hugo-real found ==="
+    ls -la /usr/local/bin/hugo-real
+    /usr/local/bin/hugo-real version
+fi

.devcontainer/devcontainer.json

@@ -25,6 +25,12 @@
     }
   },
   "forwardPorts": [1313],
+  "portsAttributes": {
+    "1313": {
+      "label": "Hugo Server",
+      "onAutoForward": "openBrowser"
+    }
+  },
   "remoteUser": "vscode",
-  "postCreateCommand": "npm install; cd /tmp && wget -O hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.133.1/hugo_extended_0.133.1_linux-amd64.deb && sudo dpkg -i hugo.deb && rm hugo.deb && npm init -y && npm install hugo-bin@latest && hugo version && echo 'Hugo server ready to run! Use the Run and Debug view to start the server.'"
+  "postCreateCommand": "npm install && cd /tmp && wget -O hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.133.1/hugo_extended_0.133.1_linux-amd64.deb && sudo dpkg -i hugo.deb && rm hugo.deb && npm init -y && npm install hugo-bin@latest && sudo mv /usr/local/bin/hugo /usr/local/bin/hugo-real && sudo cp /workspaces/innersourcecommons.org/.devcontainer/hugo-wrapper.sh /usr/local/bin/hugo && sudo chmod +x /usr/local/bin/hugo && hugo version && echo 'Hugo server ready! You can now run: hugo server'"
 }

.devcontainer/hugo-wrapper.sh

@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+
+# Hugo Wrapper Script for Codespaces
+# This script wraps the hugo command to automatically set the correct baseURL in Codespaces
+
+# Path to the real hugo binary
+HUGO_BIN="/usr/local/bin/hugo-real"
+
+# Check if we're running 'hugo server' command
+if [[ "$1" == "server" ]]; then
+    # Check if we're in GitHub Codespaces
+    if [ -n "$CODESPACE_NAME" ]; then
+        # Construct the Codespaces URL
+        BASE_URL="https://${CODESPACE_NAME}-1313.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
+
+        # Check if --baseURL is already provided in arguments
+        has_baseurl=false
+        for arg in "$@"; do
+            if [[ "$arg" == --baseURL=* ]] || [[ "$arg" == "--baseURL" ]]; then
+                has_baseurl=true
+                break
+            fi
+        done
+
+        # If no baseURL is provided, add our Codespaces URL
+        if [ "$has_baseurl" = false ]; then
+            echo "🚀 Running Hugo in Codespaces mode"
+            echo "📍 Base URL: $BASE_URL"
+
+            # Check if --bind is already provided
+            has_bind=false
+            for arg in "$@"; do
+                if [[ "$arg" == --bind=* ]] || [[ "$arg" == "--bind" ]]; then
+                    has_bind=true
+                    break
+                fi
+            done
+
+            # Build the command with automatic Codespaces configuration
+            if [ "$has_bind" = false ]; then
+                exec "$HUGO_BIN" "$@" --baseURL="$BASE_URL" --bind=0.0.0.0 --appendPort=false --liveReloadPort=443
+            else
+                exec "$HUGO_BIN" "$@" --baseURL="$BASE_URL" --appendPort=false --liveReloadPort=443
+            fi
+        fi
+    fi
+fi
+
+# If not 'hugo server' in Codespaces, or baseURL was already provided, just run hugo normally
+exec "$HUGO_BIN" "$@"

.vscode/launch.json

@@ -3,22 +3,10 @@
     "configurations": [
         {
             "name": "Hugo Server",
-            "type": "pwa-node",
+            "type": "node-terminal",
             "request": "launch",
-            "program": "${workspaceFolder}/node_modules/.bin/hugo",
-            "args": [
-                "server",
-                "--appendPort=false",
-                "--baseURL=/",
-                "-D"
-            ],
-            "console": "integratedTerminal",
-            "preLaunchTask": "Hugo: Check Environment",
-            "serverReadyAction": {
-                "pattern": "Web Server is available at //localhost:(\\d+)/",
-                "uriFormat": "http://localhost:%s/",
-                "action": "openExternally"
-            }
+            "command": "${workspaceFolder}/.vscode/start-hugo.sh",
+            "cwd": "${workspaceFolder}"
         }
     ]
 }

.vscode/start-hugo.sh

@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+
+# Determine the base URL for Hugo server
+# In Codespaces, use the Codespaces URL; otherwise, use localhost
+
+if [ -n "$CODESPACE_NAME" ]; then
+    # Running in GitHub Codespaces
+    # Construct the Codespaces URL using the CODESPACE_NAME and port forwarding domain
+    if [ -n "$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN" ]; then
+        BASE_URL="https://${CODESPACE_NAME}-1313.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
+    else
+        # Fallback: construct using the standard pattern
+        BASE_URL="https://${CODESPACE_NAME}-1313.app.github.dev"
+    fi
+    echo "🚀 Starting Hugo in Codespaces mode"
+    echo "📍 Base URL: $BASE_URL"
+    echo "📍 CODESPACE_NAME: $CODESPACE_NAME"
+    echo "📍 GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN: ${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN:-not set, using default}"
+else
+    # Running locally
+    BASE_URL="http://localhost:1313"
+    echo "🚀 Starting Hugo in local mode"
+    echo "📍 Base URL: $BASE_URL"
+fi
+
+# Start Hugo server with the appropriate configuration
+# Use the actual hugo binary path to ensure we're not calling a wrapper
+HUGO_CMD="hugo"
+
+# Check if hugo-real exists (wrapper might be installed)
+if [ -x "/usr/local/bin/hugo-real" ]; then
+    HUGO_CMD="/usr/local/bin/hugo-real"
+    echo "📍 Using hugo-real binary"
+elif command -v hugo &> /dev/null; then
+    HUGO_CMD="hugo"
+    echo "📍 Using standard hugo binary"
+fi
+
+exec $HUGO_CMD server \
+    --bind=0.0.0.0 \
+    --baseURL="$BASE_URL" \
+    --appendPort=false \
+    --liveReloadPort=443 \
+    -D

CODESPACES.md

@@ -26,12 +26,28 @@ The Codespace will take a minute or two to set up. You'll see a loading screen w
 
 ### Step 4: Run the Hugo Server
 
-Once the Codespace is loaded:
+Once the Codespace is loaded, you can start the Hugo server using any of these methods:
+
+**Option A: Command Line (Recommended and Easiest)**
+
+1. Open the terminal (Terminal → New Terminal if not already open)
+2. Run: `hugo server`
+
+That's it! In Codespaces, the `hugo server` command automatically detects the environment and configures everything correctly.
+
+**Option B: Using the Run and Debug Panel**
 
 1. Click the "Run and Debug" icon in the left sidebar (it looks like a play button with a bug)
 2. At the top of the Run and Debug panel, click on the dropdown and select "Hugo Server"
 3. Click the green play button to start the Hugo server
 
+**Option C: Using npm**
+
+1. Open the terminal (Terminal → New Terminal)
+2. Run: `npm start`
+
+All methods work correctly in Codespaces and will automatically configure the proper URL so that CSS and assets load correctly.
+
 ### Step 5: View the Website Preview
 
 When the Hugo server starts:
@@ -72,6 +88,11 @@ When the Hugo server starts:
 
 If you encounter any issues:
 
+- **CSS not loading (assets loading from localhost:1313)**: This means the Codespace environment wasn't detected properly. Try these steps:
+  1. Stop the Hugo server (Ctrl+C in the terminal or stop debugging)
+  2. Run `.devcontainer/debug-codespaces.sh` in the terminal to check your environment
+  3. Make sure you see the "Running in Codespaces mode" message when starting Hugo
+  4. If the environment variables are not set, try rebuilding the container (see below)
 - **Hugo server not starting**: Try restarting the Codespace by clicking on the menu in the bottom left corner and selecting "Codespaces: Stop Current Codespace" and then restarting it.
 - **Changes not showing**: Make sure you've saved your files and that the Hugo server is running.
 - **Port not forwarding**: Click the "Ports" tab at the bottom of the Codespace and make sure port 1313 is forwarded.

README.md

@@ -27,12 +27,16 @@ GitHub Codespaces provides an easy way to work on the website without installing
 3. Select the "Codespaces" tab
 4. Click "Create codespace on master"
 5. Wait for the codespace to load (this may take a minute)
-6. Once loaded, click the "Run and Debug" icon in the sidebar (or press F5)
-7. Select "Hugo Server" from the dropdown menu and click the play button
-8. When prompted, click "Open in Browser" to view the website
+6. Start the Hugo server using **any of these methods**:
+   - Run `hugo server` in the terminal (recommended - works automatically in Codespaces!)
+   - Run `npm start` in the terminal
+   - Click the "Run and Debug" icon in the sidebar (or press F5), select "Hugo Server" and click the play button
+7. When prompted, click "Open in Browser" to view the website
 
 The website will be displayed in a new browser tab, and any changes you make will automatically update in real-time.
 
+**Note**: In Codespaces, `hugo server` automatically detects the environment and configures the correct URL, so CSS and assets load properly from the Codespaces forwarded URL.
+
 For a more detailed guide with screenshots, please see our [Codespaces documentation](CODESPACES.md).
 
 ### Local Installation

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "build": "hugo",
     "build:preview": "hugo --baseURL \"${DEPLOY_PRIME_URL:-/}\" --buildDrafts --buildFuture",
-    "start": "hugo server"
+    "start": "./.vscode/start-hugo.sh"
   },
   "devDependencies": {
     "autoprefixer": "^10.3.4",