OlaDigitalHub Builder

Build and maintain the complete OlaDigitalHub HR Analytics business site.

Overview

OlaDigitalHub is a multi-page static website (HTML/CSS/JS) deployed to GitHub Pages.
It showcases and sells HR analytics digital products: Power BI dashboards, SQL toolkits,
Excel templates, and interview scorecards. Integrated with Payhip for checkout,
MailerLite for email capture, and GA4 for analytics.

Site URL: https://olajumokemedunoye.github.io/OlaDigitalHub/
Repository: https://github.com/olajumokemedunoye/OlaDigitalHub

Three Core Workflows

1. Site Build/Update — Build the complete site or add new pages
2. Data Product Creation — Generate HR analytics assets customers purchase
3. Maintenance & Ops — Update integrations, tracking, content, deployments

Quick Start: Build the Full Site

To build the complete production-ready site from scratch:

1. Create folder structure (see Folder Structure below)
2. Copy base template files from assets/website-template/
3. Implement all pages using specs in references/site-pages.md
4. Configure integrations per references/integrations.md
5. Add analytics tracking per references/analytics-tracking.md
6. Generate data products per references/data-products.md
7. Apply SEO metadata per references/seo-social.md
8. Test locally, commit, and push to GitHub
9. Verify GitHub Pages deployment

Folder Structure

OlaDigitalHub/
│
├── index.html                 # Homepage
├── about.html                 # About page
├── contact.html               # Contact page
├── resources.html             # Resource library
├── bundles.html               # Bundle offers
├── thank-you.html             # Post-purchase thank you
├── privacy.html               # Privacy policy
├── terms.html                 # Terms & conditions
├── faq.html                   # FAQ page
│
├── products/                  # Individual product pages
│   ├── hr-analytics-dashboard.html
│   ├── power-bi-hr-dashboard.html
│   ├── sql-hr-toolkit.html
│   ├── workforce-planning-template.html
│   ├── interview-scorecard.html
│   └── employee-attrition-dashboard.html
│
├── checkout/                  # Checkout routing pages
│   ├── dashboard.html
│   ├── toolkit.html
│   ├── template.html
│   └── bundle.html
│
├── css/
│   ├── style.css              # Main stylesheet
│   ├── responsive.css         # Mobile breakpoints
│   └── products.css           # Product page styles
│
├── js/
│   ├── app.js                 # Main app logic
│   ├── analytics.js           # GA4 + conversion tracking
│   ├── checkout.js            # Payhip integration
│   └── newsletter.js          # MailerLite integration
│
├── images/                    # Product images, hero images
├── assets/                    # Downloadable files (PDFs, templates)
└── data-products/             # Source files for saleable products
    ├── sql-hr-toolkit/        # SQL scripts
    ├── workforce-templates/   # Excel templates
    └── scorecards/            # Interview scorecard templates

Site Capabilities

Capability	Pages	Details
Core site	10 static pages	Home, About, Contact, Resources, Bundles, Thank You, Privacy, Terms, FAQ
Product showcase	6 product pages	Detailed product pages with specs, previews, and CTAs
Checkout flow	4 checkout pages	Payhip-integrated purchase routing per product type
Resource library	Downloadables	Free + paid resource downloads with gating
Email capture	MailerLite	Newsletter signup, lead magnets, form integration
Analytics	GA4 full tracking	8+ conversion events, funnel tracking
SEO	All pages	Meta tags, Open Graph, structured data, sitemap

Integration IDs (Never change)

Service	ID/Value
GitHub Pages base URL	https://olajumokemedunoye.github.io/OlaDigitalHub/
Payhip Store	https://payhip.com/OlaDigitalHub
MailerLite Form ID	43424606
GA4 Measurement ID	G-7EPNFPRV03

Workflow 1: Site Build/Update

Use when building from scratch or adding/updating pages.

New Page Workflow

1. Read references/site-pages.md for page templates and specs
2. Create .html file with proper structure:
   • Load css/style.css, css/responsive.css
   • Load js/app.js, js/analytics.js
   • Include shared navigation and footer
   • Add GA4 gtag script
   • Add MailerLite form (if lead capture page)
3. Add page-specific meta tags per references/seo-social.md
4. Add page to global navigation in all other pages
5. Add conversion tracking events per references/analytics-tracking.md
6. Test responsive layout, update css/responsive.css if needed
7. Commit and deploy

New Product Workflow

1. Read references/data-products.md for product content specs
2. Read references/site-pages.md for product page template
3. Create product page in products/ folder
4. Add product card to homepage and resources page
5. Create corresponding checkout page in checkout/
6. Add Payhip buy link per references/integrations.md
7. Add analytics events for product view, add-to-cart, purchase
8. Add to sitemap and update internal links

Workflow 2: Data Product Creation

Use when creating the HR analytics assets that customers purchase.

Data Product Types

Product	Format	Deliverable
HR Analytics Dashboard	Power BI + guide	.pbix + PDF documentation
SQL HR Toolkit	SQL scripts	.sql files + documentation
Workforce Planning Template	Excel	.xlsx with formulas + guide
Interview Scorecard	Excel + PDF	Template + scoring guide
Employee Attrition Dashboard	Power BI + Excel	.pbix + analysis template

Creation Steps

1. Read references/data-products.md for detailed specs per product type
2. Generate the analytical assets (SQL scripts, Excel models, Power BI layouts)
3. Create accompanying documentation (PDF guides)
4. Package deliverables into downloadable format
5. Upload to Payhip and get product links
6. Update product pages with actual download/buy links

Workflow 3: Maintenance & Operations

Use for ongoing updates, tracking fixes, deployments.

Adding Conversion Events

1. Read references/analytics-tracking.md for event definitions
2. Add event trigger in js/analytics.js
3. Call gtag('event', ...) at appropriate user action
4. Verify in GA4 DebugView before deploying

Updating Integrations

1. Read references/integrations.md for integration patterns
2. Update embed codes (Payhip buttons, MailerLite forms)
3. Test integration in isolation
4. Deploy and verify end-to-end

SEO Updates

1. Read references/seo-social.md for tag patterns
2. Update <title>, <meta name="description">, Open Graph tags
3. Update JSON-LD structured data if needed
4. Regenerate sitemap.xml

Reference Files

Load these as needed for detailed specs:

File	Use When
references/site-pages.md	Building or editing any page
references/integrations.md	Configuring Payhip, MailerLite, or GA4
references/analytics-tracking.md	Adding or fixing conversion tracking
references/data-products.md	Creating HR analytics deliverables
references/seo-social.md	SEO, meta tags, social sharing

Asset Templates

Pre-built starter files for the site are in assets/website-template/:

Asset	Path	Contains
Base page template	assets/website-template/page-template.html	HTML boilerplate with nav, footer, GA4
Main stylesheet	assets/website-template/css/style.css	Complete design system
Responsive styles	assets/website-template/css/responsive.css	Mobile breakpoints
Product styles	assets/website-template/css/products.css	Product card + page layouts
App logic	assets/website-template/js/app.js	Navigation, mobile menu, utils
Analytics module	assets/website-template/js/analytics.js	GA4 initialization + event helpers
Checkout module	assets/website-template/js/checkout.js	Payhip button integration
Newsletter module	assets/website-template/js/newsletter.js	MailerLite form handling

Deployment

1. Ensure all files are in the repository root (not in subfolder)
2. Commit all changes: git add . && git commit -m "message"
3. Push to main: git push origin main
4. GitHub Pages auto-deploys from main branch
5. Verify at https://olajumokemedunoye.github.io/OlaDigitalHub/
6. Check GA4 real-time reports for traffic