WhatMouse - React + Vite + TypeScript

This is a React application built with Vite and TypeScript, configured for deployment to GitHub Pages with a custom domain.

Features

• ⚡️ Vite - Lightning fast frontend tooling
• ⚛️ React - A JavaScript library for building user interfaces
• 🔤 TypeScript - JavaScript with syntax for types
• 📄 GitHub Pages - Hosted directly from your GitHub repository

Getting Started

Prerequisites

• Node.js (v18 or newer)
• npm (v9 or newer)

Installation

1. Clone this repository

   git clone https://github.com/jamieskella/whatmouse.github.io.git
   cd whatmouse.github.io

2. Install dependencies

   npm install

Development

Start the development server:

npm run dev

This will start the development server at http://localhost:5173.

Building for Production

Build the project for production:

npm run build

Preview the production build locally:

npm run preview

Deployment to GitHub Pages with Custom Domain

This project is configured for deployment to GitHub Pages with a custom domain.

Manual Deployment

1. The repository is already set up as jamieskella/whatmouse.github.io

2. Push your code to the repository

   git add .
   git commit -m "Update site"
   git push

3. Deploy to GitHub Pages

   npm run deploy

4. Your site will be available at your custom domain: https://whatmouse.xyz

Note: The CNAME file in the public directory ensures your custom domain configuration persists between deployments.

Automated Deployment with GitHub Actions

This project includes a GitHub Actions workflow that automatically builds and deploys the site whenever changes are pushed to the main branch.

1. Push your changes to the main branch

   git add .
   git commit -m "Update site"
   git push origin main

2. GitHub Actions will automatically:

   • Build the project
   • Deploy it to the gh-pages branch
   • Make it available at your custom domain: https://whatmouse.xyz

You can view the deployment status in the "Actions" tab of your GitHub repository.

Project Structure

whatmouse.github.io/
├── .github/            # GitHub configuration
│   └── workflows/      # GitHub Actions workflows
│       └── deploy.yml  # Automated deployment workflow
├── public/             # Static assets
│   ├── vite.svg        # Vite logo
│   └── CNAME           # Custom domain configuration
├── src/                # Source files
│   ├── assets/         # Assets used in the application
│   ├── App.css         # Application styles
│   ├── App.tsx         # Main application component
│   ├── index.css       # Global styles
│   ├── main.tsx        # Application entry point
│   └── vite-env.d.ts   # Vite environment type declarations
├── .gitignore          # Git ignore file
├── index.html          # HTML entry point
├── package.json        # Project dependencies and scripts
├── tsconfig.json       # TypeScript configuration
└── vite.config.ts      # Vite configuration

Customization

• The base property in vite.config.ts is set to '/' for the custom domain
• Modify the components in the src directory to build your application
• Add additional dependencies as needed for your project

License

This project is licensed under the MIT License - see the LICENSE file for details.