|
| 1 | +# 🔧 Deployment Notes: AdoPipelineView SPA and Blog Integration |
| 2 | + |
| 3 | +## 🧠 Context |
| 4 | + |
| 5 | +This repository is part of a two-repo setup used to host: |
| 6 | + |
| 7 | +- 📰 A **Jekyll-based blog** at **https://www.foxdeploy.com/** |
| 8 | +- ⚙️ A **standalone Single Page App (SPA)** at **https://www.foxdeploy.com/AdoPipelineView/** |
| 9 | + |
| 10 | +The SPA and blog are hosted via **GitHub Pages**, but they live in **separate repositories** for clarity and cleaner dev workflows. |
| 11 | + |
| 12 | +--- |
| 13 | + |
| 14 | +## 🌐 Domain + URL Structure |
| 15 | + |
| 16 | +| URL | Purpose | Hosted From | |
| 17 | +|-----|---------|-------------| |
| 18 | +| `https://www.foxdeploy.com/` | Main Jekyll blog | [`1redone.github.io`](https://github.com/1RedOne/1redone.github.io) | |
| 19 | +| `https://www.foxdeploy.com/AdoPipelineView/` | Deployed SPA | [`AdoPipelineView`](https://github.com/1RedOne/AdoPipelineView) | |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## 📦 Where is the SPA code? |
| 24 | + |
| 25 | +The SPA source code is **NOT inside the blog repo** (`1redone.github.io`) — instead, it is located in its own repository: |
| 26 | + |
| 27 | +> [`1RedOne/AdoPipelineView`](https://github.com/1RedOne/AdoPipelineView) |
| 28 | +
|
| 29 | +This repo builds a single-page app (`index.html`, etc.) and publishes it to GitHub Pages using either: |
| 30 | + |
| 31 | +- The `gh-pages` branch (recommended), OR |
| 32 | +- The `/docs` folder, OR |
| 33 | +- GitHub Actions with Pages deployment (e.g., `pages-build-deployment`) |
| 34 | + |
| 35 | +You can confirm it is published successfully at: |
| 36 | + |
| 37 | +>https://github.com/1RedOne/AdoPipelineView/settings/pages |
| 38 | +
|
| 39 | + |
| 40 | +--- |
| 41 | + |
| 42 | +## 🔍 Why is this split across two repos? |
| 43 | + |
| 44 | +Keeping the SPA separate helps with: |
| 45 | +- Clean dev workflows (the SPA can use its own toolchain, like React, Vue, or Vite) |
| 46 | +- Independent deployments (no interference with Jekyll builds) |
| 47 | +- Smaller repos, faster CI |
| 48 | +- Easier separation of concerns |
| 49 | + |
| 50 | +The blog can safely link to the SPA without needing to embed or bundle it. |
| 51 | + |
| 52 | + |
| 53 | + |
| 54 | +## 🧪 How to test changes to the SPA |
| 55 | + |
| 56 | +If you need to make changes to the SPA: |
| 57 | + |
| 58 | +1. Go to [`1RedOne/AdoPipelineView`](https://github.com/1RedOne/AdoPipelineView) |
| 59 | +2. Edit the SPA source files (`index.html`, JS/CSS/etc.) |
| 60 | +3. Push to the branch configured for GitHub Pages (e.g., `main`, `gh-pages`, or `/docs`) |
| 61 | +4. GitHub Pages will auto-deploy to: |
| 62 | + |
| 63 | +### 🧭 How to Add Additional Single-Page Apps (SPAs) to FoxDeploy |
| 64 | + |
| 65 | +Want to host another standalone tool or SPA at `https://www.foxdeploy.com/YourNewTool/`? Here's the full process: |
| 66 | + |
| 67 | +--- |
| 68 | + |
| 69 | +#### ✅ Step-by-Step Instructions |
| 70 | + |
| 71 | +**Step 1: Create a New Repo** |
| 72 | +Make a new GitHub repository for your SPA. |
| 73 | +Give it a name like `CoolNewViewer`, `MyStaticTool`, etc. |
| 74 | +This keeps the app self-contained and versionable. |
| 75 | + |
| 76 | +--- |
| 77 | + |
| 78 | +**Step 2: Configure GitHub Pages for the SPA Repo** |
| 79 | +In the **new repo**: |
| 80 | + |
| 81 | +- Go to **Settings → Pages** |
| 82 | +- Set the **Source** to: |
| 83 | + - `gh-pages` branch (recommended), **or** |
| 84 | + - `/docs` folder (if using `main`) |
| 85 | +- Set the **custom path** to match your desired sub-URL |
| 86 | + → For example, `/CoolNewViewer/` will publish at: https://www.foxdeploy.com/CoolNewViewer/ |
| 87 | + |
| 88 | + |
| 89 | +--- |
| 90 | + |
| 91 | +**Step 3: Upload the `index.html` File** |
| 92 | +Make sure your repo contains at least: `index.html` |
| 93 | + |
| 94 | +Test your deployment by visiting the live link. You should see your SPA appear at the custom subfolder. |
| 95 | + |
| 96 | +--- |
| 97 | + |
| 98 | +**Step 4: Update Blog Navigation** |
| 99 | +In the **main blog repo** (`1redone.github.io`): |
| 100 | + |
| 101 | +- Open: `_data/navigation.yml` or wherever your nav is configured |
| 102 | +- Add a new entry pointing to your SPA subpath: |
| 103 | + ```yaml |
| 104 | + - title: Cool New Viewer |
| 105 | + url: /CoolNewViewer/ |
| 106 | + |
| 107 | +#### Step 5: Brag with a Blog Post |
| 108 | +Write a new post in your blog's _posts folder to: |
| 109 | + |
| 110 | +Announce the new tool 🎉 |
| 111 | + |
| 112 | +Explain what it does |
| 113 | + |
| 114 | +Link to https://www.foxdeploy.com/CoolNewViewer/ |
| 115 | + |
| 116 | +Boom — you're done. Your new app is live, linked, and documented. |
0 commit comments