Make 'hugo server' work automatically in both Codespaces and local environments

Co-authored-by: rrrutledge <9609562+rrrutledge@users.noreply.github.com>

Author: Copilot

.devcontainer/devcontainer.json

@@ -32,5 +32,5 @@
     }
   },
   "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 ${containerWorkspaceFolder}/.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/start-hugo.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 # Determine the base URL for Hugo server
 # In Codespaces, use the Codespaces URL; otherwise, use localhost

.vscode/tasks.json

@@ -10,29 +10,6 @@
                 "panel": "dedicated"
             },
             "problemMatcher": []
-        },
-        {
-            "label": "Hugo: Start Server",
-            "type": "shell",
-            "command": "hugo server --bind=0.0.0.0 --appendPort=false --liveReloadPort=443 -D",
-            "isBackground": true,
-            "presentation": {
-                "reveal": "always",
-                "panel": "dedicated"
-            },
-            "problemMatcher": {
-                "pattern": {
-                    "regexp": "^$",
-                    "file": 0,
-                    "location": 1,
-                    "message": 2
-                },
-                "background": {
-                    "activeOnStart": true,
-                    "beginsPattern": "^.*Building sites.*$",
-                    "endsPattern": "^.*Web Server is available.*$"
-                }
-            }
         }
     ]
 }

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:

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

hugo-server.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+
+# Hugo Server Starter for Codespaces and Local Development
+# This script automatically detects the environment and starts Hugo with the correct configuration
+
+if [ -n "$CODESPACE_NAME" ]; then
+    # Running in GitHub Codespaces
+    BASE_URL="https://${CODESPACE_NAME}-1313.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
+    echo "🚀 Starting Hugo in Codespaces mode"
+    echo "📍 Base URL: $BASE_URL"
+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
+exec hugo server \
+    --bind=0.0.0.0 \
+    --baseURL="$BASE_URL" \
+    --appendPort=false \
+    --liveReloadPort=443 \
+    -D

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",