Add gh-pages deployment: static React site via CDN + Babel, no build step required

[Copilot]

User can't run npm run build (phone-only access). The compiled site never existed, so GitHub Pages had nothing to serve.

Changes

• .github/workflows/deploy-gh-pages.yml — Workflow triggered on push to main or workflow_dispatch that:

  • Transforms Select-product-page.jsx into a self-contained index.html via Python regex (strips ES module import/export, substitutes const { useState } = React;)
  • Deploys output to gh-pages branch via peaceiris/actions-gh-pages@v3.9.3
  • CDN deps pinned: react@17.0.2, react-dom@17.0.2, @babel/standalone@7.23.10

• docs/index.html — Pre-built equivalent of the workflow output; immediately serveable via GitHub Pages "main branch /docs folder" option without waiting for a merge + workflow run

Activation

Via workflow (after merge): Settings → Pages → Source: gh-pages branch
Immediately (no merge): Settings → Pages → Source: main / /docs

How the transform works

# Strips ES module syntax so the component runs against CDN React globals
component_code = re.sub(
    r'''import\s*\{\s*useState\s*\}\s*from\s*['"]react['"];?''',
    'const { useState } = React;',
    content
)
component_code = re.sub(r'\bexport\s+default\s+function\s+', 'function ', component_code)
# Then inlined into <script type="text/babel"> — Babel standalone handles JSX in-browser

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• unpkg.com
  • Triggering command: /usr/bin/python3 python3 - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Create a gh-pages branch with a complete static HTML/React site that displays the Hormone Experts product page. This will enable GitHub Pages deployment without requiring npm build on a phone. The gh-pages branch should contain all necessary files to serve the Select-product-page component as a working website.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: Hiw do i run the cmds in a temeinal drom my ohoen?

Assistant: Ah, you're on your phone! That changes things. You can't run terminal commands from a phone directly.

Here's What You Need To Do:

You need a computer (Windows, Mac, or Linux) to:

1. Install Node.js
2. Run npm install
3. Run npm run build
4. Push files to GitHub

---

Do You Have a Computer Available?

• Yes, I have a laptop/desktop → I can walk you through it step-by-step
• No computer → We can use an alternative method

---

Alternative (If You Don't Have a Computer):

If you only have a phone, we can use GitHub Actions (automatic deployment) instead. This means GitHub will build and deploy your site automatically without you needing to run commands.

Which applies to you?

1. You have a computer available?
2. You only have a phone?

Let me know and I'll give you the right instructions! 📱💻

User: You only have a phone?

Assistant: Got it - you only have a phone! No problem, we can fix this.

Option 1: Use a Friend's/Family's Computer

Do you have access to someone else's computer? If so, I can walk you through the process step-by-step once you're on it.

---

Option 2: Use GitHub Actions (Automatic Deployment)

This is the easiest for phone users. GitHub will automatically build and deploy your site for you - no terminal needed!

Here's what to do on your phone:

Step 1: Go to Your Repository

Open: https://github.com/stev4501/Hormone-experts

Step 2: Create a GitHub Actions Workflow File

1. Click the "Add file" button (top right)
2. Click "Create new file"
3. In the filename box, type: .github/workflows/deploy.yml
4. In the file content box, paste this:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

5. Scroll down and click "Commit new file"

---

Step 3: Done!

GitHub will automatically build your app and deploy it. Wait 5 minutes, then visit:

https://stev4501.github.io/Hormone-experts/

Your site will be live! 🎉

---

Which option works better for you?

• Option 1: Borrow a computer?
• Option 2: Use GitHub Actions (easier on phone)?

Let me know!

User: Option 2: Use GitHub Actions

Assistant: Perfect! Let's set up GitHub Actions on your phone. Here's the exact steps:

---

STEP 1: Go to Your Repository

Open this link on your phone:

https://github.com/stev4501/Hormone-experts

---

STEP 2: Create the Workflow File

1. Look for the "Add file" button (top right, next to the green Code button)
2. Tap it and select "Create new file"

---

STEP 3: Enter the File Path

In the filename field, type exactly:

.github/workflows/deploy.yml

---

STEP 4: Paste the Code

In the file content area, paste this entire code:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

---

STEP 5: Commit the File

1. Scroll down to the bottom
2. Tap the green "Commit new file" button
3. A popup will appear - just tap "Commit" again

---

STEP 6: Wait & Check

1. Wait 5-10 minutes (GitHub is building your site)
2. Then visit this link:

https://stev4501.github.io/Hormone-experts/

Your site will be live! 🎉

---

Need Help?

If you get stuck on any step, let me know which one and I'll help! 📱

User: Is there prebuild workflow i can select?

Assistant: Great question! Yes, let me check if GitHub has a pre-built template.

On the "Create new file" page, look for:

1. "Choose a template" button or dropdown (usually appears after you type the filename)
2. Search for "Node.js" or "React" workflow templates

If you see templates available:

• Look for one called "Node.js" or "Deploy to GitHub Pages"
• Select it and it will auto-f...

This pull request was created from Copilot chat.

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.