Vercel Deployment
Relevant source files
The following files were used as context for generating this wiki page:
Vercel serves as the primary deployment and hosting platform for the pcstyle.dev portfolio. The deployment architecture leverages Vercel's Edge Runtime for high-performance API delivery and integrates with a custom CLI tool to automate the synchronization of project metadata from local development environments to the live site.
Sources: README.md:10, api/index.ts:18
Deployment Architecture
The system utilizes a Git-based deployment workflow. The projects-cli tool manages local project data and triggers deployments by committing changes to the repository, which Vercel subsequently detects and builds.
API Edge Runtime
The backend is implemented using the Hono framework and configured specifically for the Vercel Edge Runtime. This allows for low-latency responses by executing code closer to the user.
The diagram above illustrates the flow from local project management to the Vercel Edge Network.
Sources: api/index.ts:18-20, projects-cli/src/lib/deploy.ts:4-24
Automated Deployment via CLI
The autoDeploy function is the core mechanism for synchronizing local changes with the Vercel production environment. It automates the Git workflow required to trigger a Vercel deployment.
Deployment Process
- Confirmation: The user is prompted to confirm the deployment via an interactive prompt.
- Staging: All changes in the repository are staged using
git add -A. - Commit: A commit is created with a provided message (e.g., "add project: [Name]").
- Push: Changes are pushed to the remote repository, which triggers the Vercel build process.
| Step | Action | Command/Function |
|---|---|---|
| 1 | User Confirmation | confirm({ message: 'commit and push to deploy?' }) |
| 2 | Stage Changes | git add -A |
| 3 | Commit Changes | git commit -m "[message]" |
| 4 | Push to Remote | git push |
Sources: projects-cli/src/lib/deploy.ts:5-24, projects-cli/src/commands/add.ts:121-125
CLI Integration Points
Deployment is automatically suggested following several CLI operations:
- Adding Projects: Triggered after a project is analyzed by Gemini and synced to
projects.json. - Updating Projects: Triggered after field updates or Gemini-based auto-updates.
- Status Changes: Triggered when a project's status is modified.
Sources: projects-cli/src/commands/add.ts:125, projects-cli/src/commands/update.ts:107, projects-cli/src/commands/update.ts:145
API Configuration and Environment
The Vercel deployment relies on specific environment variables and runtime configurations defined in the API entry point.
Environment Requirements
The Edge API requires several environment variables to function correctly, particularly for statistics integration.
| Variable | Description |
|---|---|
WAKATIME_API_KEY | Used to fetch coding activity summaries. |
GITHUB_TOKEN | Used for GraphQL and REST API authentication. |
GITHUB_USERNAME | Identifies the user for GitHub stats. |
Sources: api/index.ts:25-30
Runtime Optimization
The API uses Hono's Vercel handler and exports a configuration object to ensure it runs on the Edge Network rather than standard serverless functions.
// api/index.ts
import { handle } from 'hono/vercel'
export const config = { runtime: 'edge' }
// ... routes ...
export default handle(app)
Sources: api/index.ts:2-20, api/index.ts:316
Summary
Vercel Deployment for pcstyle.dev is an integrated process that combines Edge Runtime performance with CLI-driven automation. By utilizing the autoDeploy utility, the project ensures that any metadata updates or project additions are immediately reflected on the live site through a reliable Git-triggered build pipeline.