hello-supa-page

Hello World Supabase + GitHub Pages app. Using GitHub Copilot

Features

• 🤖 Simple Hello World page
• 💬 AI Quote of the Day
• 😂 AI Joke
• 🎯 AI Fun Fact
• ⚡ Powered by Supabase + GitHub Pages

Setup

1. Configure GitHub Secrets

Go to your GitHub repository: Settings → Secrets and variables → Actions → New repository secret

Add the following secrets:

• SUPABASE_URL - your Supabase project URL
• SUPABASE_ANON_KEY - your Supabase anonymous key (safe for frontend use)

2. Enable GitHub Pages

1. Go to Settings → Pages
2. Under "Build and deployment", select Source: GitHub Actions

3. Supabase Database Setup (Optional)

If you want to use Supabase to store dynamic content, create a table called content with the following structure:

CREATE TABLE content (
  id SERIAL PRIMARY KEY,
  type TEXT NOT NULL,
  text TEXT NOT NULL
);

-- Insert sample data
INSERT INTO content (type, text) VALUES
  ('quote', 'The question of whether a computer can think is no more interesting than the question of whether a submarine can swim. - Edsger Dijkstra'),
  ('joke', 'Why do programmers prefer dark mode? Because light attracts bugs! 🐛'),
  ('funfact', 'The first computer bug was an actual bug! In 1947, a moth caused a malfunction in the Harvard Mark II computer.');

Note: The app will work with fallback content even without Supabase configuration.

4. Deploy

Push to the main branch to trigger the GitHub Actions workflow and deploy to GitHub Pages.

Local Development

Simply open index.html in a web browser. The app will use fallback content when Supabase credentials are not configured.

How It Works

1. The GitHub Actions workflow runs on every push to main
2. It replaces the Supabase placeholders with your actual credentials
3. Deploys the site to GitHub Pages
4. The JavaScript fetches content from Supabase (or uses fallback content)