From ca74bc2ab0b2e8b8952bd1ebf40c5ac4e62ec4fa Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 30 Jul 2025 08:37:31 +0000 Subject: [PATCH] Add GitHub Pages deployment and update project documentation Co-authored-by: lyons.mr --- .github/workflows/deploy.yml | 34 ++++ DEPLOYMENT.md | 56 ++++++ README.md | 36 +++- package-lock.json | 361 +++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 6 +- src/LoadingScreen.tsx | 2 +- 7 files changed, 488 insertions(+), 8 deletions(-) create mode 100644 .github/workflows/deploy.yml create mode 100644 DEPLOYMENT.md diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..73af5e4 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,34 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '18' + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v3 + if: github.ref == 'refs/heads/main' + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist \ No newline at end of file diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..3dfda8d --- /dev/null +++ b/DEPLOYMENT.md @@ -0,0 +1,56 @@ +# GitHub Pages Deployment Setup + +## Automatic Deployment + +This repository is configured for automatic deployment to GitHub Pages using GitHub Actions. Every push to the `main` branch will trigger a new deployment. + +## Repository Settings + +To enable GitHub Pages for this repository, follow these steps: + +1. Go to your repository on GitHub +2. Click on "Settings" tab +3. Scroll down to "Pages" in the left sidebar +4. Under "Source", select "Deploy from a branch" +5. Select "gh-pages" as the branch +6. Select "/ (root)" as the folder +7. Click "Save" + +## First Deployment + +After pushing the code with the GitHub Actions workflow: + +1. The workflow will run automatically on push to `main` +2. It will build the project and deploy to the `gh-pages` branch +3. GitHub Pages will serve the content from the `gh-pages` branch +4. Your app will be available at: https://mikelyons.github.io/study-game + +## Manual Deployment + +You can also deploy manually using: + +```bash +npm run deploy +``` + +This command will: +1. Build the project (`npm run build`) +2. Deploy the `dist` folder to the `gh-pages` branch using `gh-pages` package + +## Configuration Files + +The deployment setup includes: + +- **.github/workflows/deploy.yml** - GitHub Actions workflow for automatic deployment +- **vite.config.ts** - Vite configuration with correct base path (`/study-game`) +- **package.json** - Homepage URL and deploy scripts +- **README.md** - Updated with link to live app + +## Troubleshooting + +If the deployment fails: + +1. Check the Actions tab in your GitHub repository for error logs +2. Ensure the repository has GitHub Pages enabled +3. Verify that the `main` branch protection rules (if any) allow the workflow to run +4. Make sure the build completes successfully locally with `npm run build` \ No newline at end of file diff --git a/README.md b/README.md index 018817a..ea14cb2 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,45 @@ ## A React + TypeScript + Vite incremental game by @MikeLyons +🎮 **[Play the Game Here!](https://mikelyons.github.io/study-game)** 🎮 -### To run +### About -after cloning the repo +This is an incremental study game built with React, TypeScript, and Vite. Study hard and you too can be successful! -``` +### Development + +To run the project locally: + +```bash +# Clone the repository +git clone https://github.com/mikelyons/study-game.git +cd study-game + +# Install dependencies npm install + +# Start development server npm run dev ``` -**Study hard and you to can be successful!** +### Deployment + +This project is automatically deployed to GitHub Pages using GitHub Actions. Every push to the `main` branch triggers a new deployment. + +To deploy manually: +```bash +npm run deploy +``` + +For detailed deployment setup instructions, see [DEPLOYMENT.md](./DEPLOYMENT.md). + +### Technologies Used + +- **React 19** - UI library +- **TypeScript** - Type-safe JavaScript +- **Vite** - Fast build tool and dev server +- **GitHub Pages** - Hosting platform