Local Testing Guide

Local Testing Guide

Prerequisites

Ensure you have Ruby and Bundler installed:

ruby --version  # Should be 2.5.0 or higher
gem install bundler

Install Dependencies

# Using the unified script
./scripts/local-deploy.sh install

# Or manually
bundle install

Start Local Server

# Option 1: Using the unified script (recommended)
./scripts/local-deploy.sh serve

# Option 2: Direct Jekyll command
bundle exec jekyll serve --livereload

# Option 3: With drafts visible
bundle exec jekyll serve --livereload --drafts

The site will be available at: http://localhost:4000

Testing Checklist

1. Hero Animation

• Visit homepage
• “Your Health, Your Data” should type out letter by letter
• Text should have rainbow gradient animation
• Should use cursive League Script font

2. Dark Mode

• Click sun/moon icon in header
• Hero section background should be black in dark mode
• All text should remain readable
• Rainbow gradients should still be visible

3. Footer

• Check “sh®” text is in cursive with rainbow gradient
• Newsletter form should be visible
• Copyright and links should display correctly

4. Newsletter Subscription

• Enter email in footer form
• Click Subscribe
• Button should change to “Success! ✨”
• Confetti animation should fill the screen
• Success notification should appear at top
• Email field should clear

5. About Page

• Navigate to http://localhost:4000/about/
• Page should load without 404 error
• Content should display correctly

6. RSS Feed

• Visit http://localhost:4000/feed.xml
• Should see valid XML content
• No Jekyll/Liquid errors

Common Issues

Port Already in Use

# Find process using port 4000
lsof -i :4000

# Kill the process
kill -9 [PID]

Jekyll Build Errors

# Clean and rebuild
./scripts/local-deploy.sh clean
./scripts/local-deploy.sh build

# Or manually
bundle exec jekyll clean
bundle exec jekyll build --verbose

Missing Dependencies

# Update Gemfile.lock
bundle update

About Page 404

If the about page shows 404:

1. Check that about.md exists
2. Ensure permalink is /about/
3. Try accessing with trailing slash: http://localhost:4000/about/
4. Clear Jekyll cache: bundle exec jekyll clean

Testing Newsletter Features

Since Web3Forms only sends emails, test the UI behavior:

1. Visual Feedback:
   • Submit button changes
   • Confetti animation plays
   • Success message appears
2. Form Behavior:
   • Form clears after submission
   • Button re-enables after 3 seconds
   • Multiple submissions work
3. Error Handling:
   • Invalid email shows error
   • Empty email shows error
   • Network errors handled gracefully

Browser Testing

Test in multiple browsers:

• Chrome
• Safari
• Firefox
• Edge
• Mobile browsers

Performance Check

# Check build time
time bundle exec jekyll build

# Check for large assets
find assets -type f -size +1M

# Validate HTML
bundle exec htmlproofer ./_site

Before Pushing to Production

1. Run full test suite:

   ./scripts/local-deploy.sh test
   

2. Check for console errors in browser DevTools

3. Verify all images load correctly

4. Test all links work

5. Validate responsive design on mobile

Deployment Preview

To see exactly how it will look on GitHub Pages:

# Build with production settings
JEKYLL_ENV=production bundle exec jekyll build

# Serve the built site
cd _site && python -m http.server 8000

Visit http://localhost:8000 to see production build.