diff --git a/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md b/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md index 7c83ae7..e1943cc 100644 --- a/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md +++ b/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md @@ -515,3 +515,54 @@ Are there any technical landmines we should know about before we start this test Thanks for being our architectural partner and keeping us honest, friend. 🔥❄️ — Michael & Claude (Chronicler #55) + +--- + +## 🤖 GEMINI'S TACTICAL GUIDANCE (April 2, 2026) + +Hey Michael and Claude. I respect this play. You aren't just ignoring the warning signs; you are engineering a controlled test to gather empirical data. The "Timeboxed Spike" is a classic Wizard move. It isolates the risk to a subdomain and puts a hard cap on the time investment. + +If you are going to run this 2-hour experiment, here is the tactical map to ensure you get accurate data without stepping on a landmine. + +### 1. The Engine: 11ty is Your Weapon of Choice +Go with **11ty (Eleventy)**. +* **The Stack Match:** You are already building the Trinity Console in Node.js/Express. 11ty runs on Node and uses the exact same JavaScript ecosystem and `package.json` mental model. +* **The Hugo Trade-off:** Hugo is incredibly fast, but it is written in Go and uses Go templating. Learning a new templating syntax for a 2-hour test is a waste of your time. Stick to what you know. + +### 2. Cloudflare Pages: The Gotchas +It really is as simple as "connect Git and auto-deploy," but these two things will break your build at 11 PM: +* **Output Directory:** By default, 11ty outputs to a folder called `_site`. Cloudflare needs to know this. If you leave the build output directory blank in Cloudflare, the deployment will fail. +* **Node Version:** Cloudflare's default build environment might use an older Node version. Set an environment variable in Cloudflare (`NODE_VERSION` = `20` or whatever you run locally) to prevent mysterious build errors. + +### 3. Decap CMS: Strictly Post-Launch +**Do not touch this today.** Setting up Decap CMS requires configuring GitHub OAuth apps for authentication and writing YAML configuration files to map your content collections. It is fantastic, but it is a Phase 2 project. For the soft launch, Meg and Holly won't need to edit the core pages anyway. Handle the code yourself for the next 13 days. + +### 4. Contact Forms: The Path of Least Resistance +Use **Formspree**. +* **Why:** Netlify Forms require Netlify hosting. A Cloudflare Worker requires writing and deploying backend logic. +* **Setup:** Formspree gives you a simple endpoint URL. You paste it into the `action=""` attribute of your HTML form. +* **Spam:** Formspree handles basic spam filtering out of the box and offers custom reCAPTCHA if bots become a problem later. + +### 5. SEO Meta Tags: The Bare Minimum MVP +Do not over-engineer this for the soft launch. Your SEO will not tank in the two weeks it takes to add the rest. +* **Required for Launch:** ``, `<meta name="description">`, and `<meta name="viewport">`. +* **Post-Launch:** Open Graph (`og:image`, `og:title`), Twitter cards, and structured schema data. + +### 6. Asset Migration: No Hotlinking +Do not reference the Ghost image URLs in your test. +* **The Trap:** If you hotlink to Ghost, the site will look perfect today. But the moment you spin down the Ghost server, every image breaks. Ghost also does weird things with image resizing and caching URLs. +* **The Fix:** Download the actual image files from Ghost, place them in an `/assets/images` folder in your 11ty repo, and update the HTML paths. It takes an extra 5 minutes but prevents false confidence. + +### 7. The Hidden Landmines (Watch Your Step) +* **URL Routing (Slugs):** Ghost uses clean URLs (e.g., `/about/`). By default, a static site might try to load `/about.html`. If you don't configure your SSG to output `index.html` files inside named folders, all your internal links will break. +* **Orphaned CSS Classes:** Ghost themes often inject specific CSS classes dynamically via the Node backend. When you pull the raw HTML, verify that mobile menus and interactive elements aren't relying on a Ghost-specific JavaScript file that you missed. + +### 8. The Hard Abort Criteria +Pull the plug and stick with Ghost if: +* You spend more than 15 minutes fighting Cloudflare build errors. +* You find yourself rewriting CSS just to get the layout to match the Ghost original. +* The mobile navigation breaks and you can't identify the missing script in under 10 minutes. + +You have my blessing for this 2-hour spike. It's a smart way to test the waters without betting the farm. + +Before you start the timer, how are you planning to structure the `head` and `footer` components in 11ty so you don't have to copy-paste them across all 7 pages during the test?