Deploying to Vercel and GitHub Pages

The portfolio is a standard Create React App project and can be deployed to any static hosting provider. Two options are documented here: Vercel (zero-config, recommended) and GitHub Pages (built into the project via the gh-pages package). The live site is deployed at https://juanrojas.vercel.app.

Vercel
GitHub Pages

Vercel automatically detects Create React App projects and configures the build settings for you.

Import the repository

Go to vercel.com/new, sign in with GitHub, and select the juan-rojas-portafolio-web repository.

Confirm build settings

Vercel will pre-fill the following settings. Verify they are correct before deploying:

Setting	Value
Framework Preset	Create React App
Build Command	`npm run build`
Output Directory	`build`
Install Command	`npm install`

Add environment variables

If you are using the contact form, add your EmailJS credentials under Settings → Environment Variables:

REACT_APP_EMAILJS_SERVICE_ID
REACT_APP_EMAILJS_TEMPLATE_ID
REACT_APP_EMAILJS_PUBLIC_KEY

Deploy

Click Deploy. Vercel will build the project and provide a live URL. Every subsequent push to the main branch will trigger an automatic redeployment.

The project already includes gh-pages as a dependency and a deploy script in package.json.

Set the homepage field in package.json

GitHub Pages serves the site from a subpath (https://<username>.github.io/<repo-name>/). Open package.json and add or confirm the homepage field:

{
  "homepage": "https://JuanRojasDev.github.io/juan-rojas-portafolio-web",
  ...
}

This tells Create React App to use the correct base path for all asset URLs in the production build.

If you are deploying to a custom domain or a root-level GitHub Pages site (https://<username>.github.io/), set "homepage": "/" instead.

Run the deploy script

The predeploy script runs npm run build automatically before publishing. A single command handles both steps:

npm run deploy

This builds the app into the build/ directory, then pushes its contents to the gh-pages branch of the repository.

Enable GitHub Pages in repository settings

In your GitHub repository, go to Settings → Pages and set the source branch to gh-pages and the directory to / (root). The site will be live at the URL you set in homepage.

Client-side routing with react-router-dom requires additional configuration on GitHub Pages (a custom 404.html redirect). If you experience blank pages on direct URL access, consider using Vercel instead.

Build output

Both deployment methods use the same production build. Running npm run build produces an optimized static bundle in build/ with minified JavaScript, CSS, and hashed filenames for cache-busting.

Getting Started

Customization

Deployment

Build output

Build docs developers (and LLMs) love

Getting Started

Customization

Deployment

Documentation Index

​Build output

Build docs developers (and LLMs) love

Build output