bosqueTriangle

GitHub Pages Deployment Guide

This project is designed to run as a static website on GitHub Pages, providing a professional interactive map interface for Bosque County parcel data.

Overview

Live Site: https://williambevans.github.io/bosqueTriangle/

The site features:

Quick Setup

1. Enable GitHub Pages

  1. Go to your repository on GitHub
  2. Click Settings → Pages
  3. Under “Build and deployment”:
    • Source: Deploy from a branch
    • Branch: main (or your default branch)
    • Folder: /docs
  4. Click Save

2. Generate Parcel Data

Run the scraper to create the data file:

# Test with small area first
python test_scraper.py

# Or run full scrape
python scraper.py

This creates docs/data/parcels.geojson which the website loads.

3. Deploy

# Add the generated data file
git add docs/data/parcels.geojson

# Commit changes
git commit -m "Add parcel data for GitHub Pages"

# Push to GitHub
git push origin main

4. Access Your Site

Within 1-2 minutes, your site will be live at:

https://[your-username].github.io/bosqueTriangle/

How It Works

Static Architecture

GitHub Pages serves static files only (no Python/Flask). The architecture:

docs/
├── index.html           # Main page (loads data client-side)
├── _config.yml          # GitHub Pages config
└── data/
    └── parcels.geojson  # Generated by scraper

Client-Side Loading

The HTML page (docs/index.html) loads parcel data via JavaScript:

fetch('data/parcels.geojson')
    .then(response => response.json())
    .then(geojson => displayParcels(geojson));

No server required - everything runs in the browser!

Demo Mode

If parcels.geojson doesn’t exist, the site shows demo data automatically. This allows you to:

Updating Data

Regular Updates

To refresh parcel data:

# Re-run scraper (updates docs/data/parcels.geojson)
python scraper.py

# Commit and push
git add docs/data/parcels.geojson
git commit -m "Update parcel data - $(date +%Y-%m-%d)"
git push

Automated Updates

You can automate this with GitHub Actions:

  1. Create .github/workflows/update-data.yml:
name: Update Parcel Data

on:
  schedule:
    - cron: '0 0 * * 0'  # Weekly on Sunday
  workflow_dispatch:      # Manual trigger

jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.9'

      - name: Install dependencies
        run: pip install -r requirements.txt

      - name: Run scraper
        run: python scraper.py

      - name: Commit changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add docs/data/parcels.geojson
          git commit -m "Auto-update parcel data" || exit 0
          git push

File Structure

Files Deployed to GitHub Pages

docs/
├── index.html          # 100% static, loads data client-side
├── _config.yml         # GitHub Pages configuration
└── data/
    ├── .gitkeep        # Keeps directory in git
    └── parcels.geojson # Generated by scraper (git tracked)

Development Files (Not Deployed)

scraper.py           # Generates docs/data/parcels.geojson
test_scraper.py      # Test version
web_server.py        # Local development only
web/index.html       # Old version (use docs/index.html)
output/              # Timestamped backups (not deployed)

Customization

Branding

Edit docs/index.html to customize:

// Line 33-36: Company name
<div class="logo">
    <div>H.H.H.</div>
    <div class="company">Holdings</div>
</div>

// Line 43: Subtitle
<div class="subtitle">CONFIDENTIAL INVESTMENT MEMORANDUM</div>

// Line 45-50: Title
<h1 class="title">
    Central Texas<br>
    <span class="highlight">Integrated</span><br>
    <span class="highlight">Energy</span> &<br>
    Commute Zone
</h1>

Styling

Color scheme defined in <style> section:

--background: #1a1a1a    /* Dark background */
--gold: #c4a661          /* Gold accents */
--gray: #808080          /* Secondary */

Contact Button

Update the “REQUEST DECK” button action:

// Line 370
function requestDeck() {
    alert('Contact: holdings@hhh.com for full investment memorandum');
}

Troubleshooting

Site Shows Demo Data

Issue: Progress bars show placeholder percentages instead of real data.

Solution: Generate parcel data:

python test_scraper.py
git add docs/data/parcels.geojson
git commit -m "Add parcel data"
git push

404 Error

Issue: GitHub Pages returns 404.

Solutions:

  1. Check Pages is enabled in Settings → Pages
  2. Verify branch is set to main and folder to /docs
  3. Wait 2-3 minutes for initial deployment
  4. Check docs/index.html exists in repository

Map Not Loading

Issue: Map tiles don’t appear.

Solutions:

  1. Check browser console for JavaScript errors
  2. Verify Leaflet CDN is accessible
  3. Test in different browser
  4. Check Content Security Policy settings

Data Not Updating

Issue: Site shows old data after pushing updates.

Solutions:

  1. Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
  2. Clear browser cache
  3. Wait 1-2 minutes for GitHub Pages to rebuild
  4. Check git commit included docs/data/parcels.geojson

Custom Domain

To use a custom domain (e.g., bosque.hhhholdings.com):

  1. Add CNAME file to docs/: 
    echo "bosque.hhhholdings.com" > docs/CNAME
  2. Configure DNS with your domain provider: 
    Type: CNAME
Name: bosque
Value: williambevans.github.io

  3. Enable HTTPS in Settings → Pages → Custom domain

  4. Update links in index.html to use your domain

Performance

GitHub Pages serves static files via CDN:

Perfect for investor presentations and public data visualization!

Security

Public Data Only

Private Deployment

For confidential data, consider:

  1. Private repository (GitHub Pro required)
  2. Password protection via JavaScript
  3. Self-hosted on private server
  4. Use Flask version (web_server.py) instead

Support

For issues with:

Built for H.H.H. Holdings - Professional static site deployment for real estate intelligence.