PocketMC Website

The official landing page for PocketMC, built with Vite, React, TypeScript, and Tailwind CSS.

🚀 Run Locally

1. Clone the repository:

   git clone https://github.com/PocketMC/pocket-mc-website.git
   cd pocket-mc-website
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

🌐 Deployment (GitHub Pages)

This project is automatically deployed to GitHub Pages using a GitHub Actions workflow (.github/workflows/deploy-pages.yml) whenever changes are pushed to the master branch.

Important Deployment Configurations

If you fork or host this repository yourself, ensure the following are configured to prevent blank screens, broken assets, or routing failures:

• Vite Base Path: By default, Vite assumes your app lives at the root of a domain. Because GitHub Pages hosts repositories in a subpath (e.g., username.github.io/pocket-mc-website/), the workflow injects the VITE_BASE_PATH environment variable during the build step. If you use a custom domain, this path should be set back to /.
• Asset Imports: Static assets (like logos) should be placed in src/ and imported as modules in your React components, rather than hardcoding absolute / paths in the public/ directory. This ensures Vite correctly maps their paths during the build.
• SPA Routing Fix: GitHub Pages does not natively support Single Page Application (SPA) routing. To prevent 404 errors when a user refreshes a page on a specific route, the build workflow automatically duplicates index.html to 404.html.

One-Time GitHub Setup

To enable the automatic deployment pipeline in a new repository:

1. Go to Settings → Pages in your GitHub repository.
2. Under Build and deployment, set the Source to Deploy from a branch.
3. Set the Branch to gh-pages and the folder to / (root).
4. Ensure GitHub Actions has read/write permissions in Settings → Actions → General → Workflow permissions.