GitHub Pages Tutorial

1Create a GitHub Account

Navigate to GitHub.com

• Go to github.com
• Click the "Sign up" button in the top-right corner

Create Your Account

• Enter your full name
• Use your .edu email address (this is crucial for educator benefits)
• Create a strong password
• Choose a username (this will be part of your website URL)
• Complete the verification process

Verify Your Email

• Check your .edu email inbox
• Click the verification link from GitHub
• This step is essential for educator benefits

2Apply for GitHub Education Benefits

Access Education Benefits

1. Log into your GitHub account
2. Click your profile picture in the top-right corner
3. Select "Settings" from the dropdown menu

Navigate to Education Benefits

1. In the left sidebar, look for "Billing and licensing" (for newer accounts) or "Billing and plans" (for older accounts)
2. Click on the billing section
3. Look for "Education benefits" or "GitHub Education"

Start Your Application

1. Click "Start an application" or "Apply for benefits"
2. Select your role: "Teacher" or "Student" (choose based on your actual role)

Complete the Application

• School Information: Enter your institution's name
• Email Verification: Confirm your .edu email address
• Documentation: Upload proof of academic affiliation such as:
  • Faculty ID
  • Employment verification letter
  • Student ID (if you're a student)
  • Official enrollment documentation

Submit and Wait

1. Review all information carefully
2. Click "Submit application"
3. Processing time: Usually 2-5 business days
4. You'll receive an email when approved
5. Benefits activate within 72 hours of approval

3Create a New Repository

Start a New Repository

1. From your GitHub dashboard, click the green "New" button or the "+" icon
2. Select "New repository"

Repository Settings

• Repository name: Choose a descriptive name (e.g., "my-website", "portfolio", "ai-project")
  • For a personal website: use yourusername.github.io
  • For a project website: use any descriptive name
• Description: Write a brief description of your project
• Visibility: Select "Public" (required for free GitHub Pages)
• Initialize repository: Check ☑️ "Add a README file"
• Click "Create repository"

4Prepare Your Files

Before uploading, ensure your HTML files are properly prepared:

1. Main HTML file: Must be named index.html (this is your homepage)
2. Standalone HTML files: Your AI-generated HTML files should contain embedded CSS and JavaScript within the same file
3. File structure should look like:

your-project/
├── index.html (main page with embedded CSS/JS)
├── ai_project1.html (your first AI-generated project)
├── ai_project2.html (your second AI-generated project)
├── about.html (additional pages if needed)
├── contact.html (additional pages if needed)
└── images/ (optional - only if you have separate image files)
    ├── photo1.jpg
    └── photo2.png

File name requirements:

• No spaces in file names (use hyphens or underscores)
• Use lowercase letters when possible
• Avoid special characters
• Your main file MUST be named index.html

5Upload Files via GitHub Web Interface

Access Your Repository

1. Navigate to your repository on GitHub
2. You should see the README.md file you created

Start Upload Process

1. Click "Add file" button
2. Select "Upload files" from the dropdown

Upload Your Files

• Drag and drop your entire project folder into the browser window
• OR click "choose your files" to browse and select files
• GitHub will automatically maintain your folder structure

Commit Your Changes

1. Scroll down to "Commit changes" section
2. Commit message: Write a descriptive message like "Add initial website files"
3. Description (optional): Add more details about what you're uploading
4. Select "Commit directly to the main branch"
5. Click "Commit changes"

6Creating and Editing Your index.html File

Creating index.html Directly on GitHub

If you don't have an index.html file yet, you can create it directly on GitHub:

1. In your repository, click "Add file"
2. Select "Create new file"
3. Name the file index.html
4. Add your HTML content in the editor (see example below)
5. Scroll down and commit the file

Basic HTML Template with Embedded CSS and JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AI-Generated Website</title>
    <style>
        /* Your CSS styles go here */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to My Website</h1>
        <p>This is my AI-generated website hosted on GitHub Pages!</p>
        <button onclick="showMessage()">Click Me!</button>
        <div id="message"></div>
    </div>

    <script>
        // Your JavaScript code goes here
        function showMessage() {
            document.getElementById('message').innerHTML = 
                '<p>Hello from embedded JavaScript!</p>';
        }
    </script>
</body>
</html>

Editing Existing HTML Files

To edit an existing HTML file on GitHub:

1. Navigate to the file in your repository
2. Click the pencil icon (✏️) to edit
3. Make your changes in the editor
4. Preview your changes using the "Preview" tab if available
5. Scroll down to commit your changes
6. Add a descriptive commit message like "Update homepage content"
7. Click "Commit changes"

7Enable GitHub Pages

Access Repository Settings

1. In your repository, click the "Settings" tab (far right in the repository menu)

Navigate to Pages Section

1. Scroll down the left sidebar
2. Click "Pages" under the "Code and automation" section

Configure Publishing Source

1. Under "Build and deployment"
2. Source: Select "Deploy from a branch" from the dropdown
3. Branch: Select "main" (or "master" if that's your default branch)
4. Folder: Select "/ (root)" unless your files are in a specific folder
5. Click "Save"

8Access Your Published Website

Wait for Deployment

• GitHub Pages takes 5-10 minutes to build and deploy
• You'll see a green checkmark when it's ready

Find Your Website URL

1. Return to the "Pages" section in Settings
2. You'll see: "Your site is live at https://username.github.io/repository-name"
3. Click the link to view your website

Bookmark Your Site

• Personal site (if repository named username.github.io): https://username.github.io
• Project site: https://username.github.io/repository-name

9Making Updates

Edit Files Directly on GitHub

1. Navigate to any file in your repository
2. Click the pencil icon to edit
3. Make your changes
4. Scroll down and commit changes

Upload New Files

• Use the same upload process from Step 5
• New files will be added, existing files will be updated

Automatic Deployment

• Changes are automatically deployed to your live website
• Updates typically appear within 5-10 minutes

10Managing Repository

View Your Website

• Your website is always accessible at your GitHub Pages URL
• Share this URL with others to showcase your work

Repository Management

• Star your repository to bookmark it
• Watch to get notifications about changes
• Fork to create copies for experimentation