Deploying to GitHub Pages

Relevant source files

The following files were used as context for generating this wiki page:

• vite.config.js
• package.json
• index.html
• src/main.jsx
• src/App.jsx

Introduction

The moekyawang-portfolio-v2 project is a modern React application built using the Vite build tool. The deployment process involves transforming the development source code into optimized static assets that can be hosted on GitHub Pages. This system relies on Vite's build pipeline to handle assets like 3D Spline scenes, Framer Motion animations, and Tailwind CSS styles.

The project structure is designed as a Single Page Application (SPA), utilizing a root HTML file and a JavaScript entry point to mount the React component tree. Understanding the build configuration and dependency requirements is essential for a successful deployment to a static hosting environment.
Sources: package.json:1-30, index.html:1-15

Build Pipeline and Configuration

The deployment relies on the Vite build system defined in the project configuration. Vite handles the compilation of JSX and the bundling of assets.

Build Scripts

The package.json file defines the primary scripts used for preparing the application for deployment:

Script	Command	Purpose
dev	vite	Starts the local development server on port 3000.
build	vite build	Generates the static production bundle in the dist folder.
preview	vite preview	Serves the production build locally for verification.

Sources: package.json:7-11, vite.config.js:4-9

Build Configuration

The vite.config.js file utilizes the @vitejs/plugin-react to process React components. For GitHub Pages deployment, the application is configured as a module-based project.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})

Sources: vite.config.js:1-9

Application Entry and Asset Flow

The deployment process must account for how the application is bootstrapped and how external assets (like 3D scenes) are resolved.

Bootstrapping Process

The static site begins at index.html, which contains a div with the ID root. This serves as the injection point for the React application. The script entry point is /src/main.jsx, which is loaded as a module.

The diagram shows the initialization flow from the entry HTML through the React component hierarchy to external asset loading.
Sources: index.html:11-12, src/main.jsx:1-12, src/App.jsx:1-29

Dependency Management

To ensure the deployed site functions correctly, the following key dependencies must be bundled during the build process:

• React & React-DOM: Core UI library.
• @splinetool/react-spline: Renders the 3D hero scene from an external URL (https://prod.spline.design/...).
• Lenis & GSAP: Handles smooth scrolling and high-performance animations.
• Framer Motion: Manages transition effects and entrance animations.
  Sources: package.json:13-22, src/components/3D-Hero/Hero3D.jsx:11-14

Static Asset Requirements

For a successful GitHub Pages deployment, specific static files and configurations must be present in the build output:

1. Favicon: The index.html references /favicon.ico, which must be available in the public directory.
2. CSS: The globals.css file includes Tailwind directives and custom scroll behaviors (Lenis) that are minified during the build.
3. Module Support: The environment must support <script type="module"> as used in the entry point.

Sources: index.html:5, src/styles/globals.css:1-55, src/main.jsx:4

Summary

Deploying the moekyawang-portfolio-v2 project to GitHub Pages involves executing the vite build command to generate a static distribution. The process integrates complex assets including 3D Spline scenes and smooth-scroll libraries into a cohesive bundle initiated by index.html. By following the defined Vite scripts and ensuring all dependencies in package.json are resolved, the application can be successfully hosted as a high-performance static portfolio.