Skip to main content

​
Overview

This guide covers deploying your ItzHypeR Portfolio to various hosting platforms. We’ll focus on free, production-ready options that work excellently with Vite-based React applications.

​
Platform Comparison

PlatformBest ForBuild TimeCustom DomainFree Tier
VercelVite/React projectsFastYesGenerous
NetlifyStatic sitesFastYesGenerous
GitHub PagesOpen source projectsModerateYesFree
Cloudflare PagesGlobal performanceFastYesGenerous
Vercel is the recommended platform for Vite applications, offering excellent performance and zero-configuration deployments.
1

Create Vercel Account

  1. Go to vercel.com
  2. Sign up with GitHub, GitLab, or Bitbucket
  3. Authorize Vercel to access your repositories
2

Import Your Project

Click “Add New Project” and select your portfolio repository:
  • Vercel automatically detects it’s a Vite project
  • Build command: npm run build
  • Output directory: dist
  • Install command: npm install
3

Configure Environment Variables

If you’re using EmailJS or other services, add environment variables:
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key
Environment variables are found in Project Settings > Environment Variables
4

Deploy

Click “Deploy” and wait for the build to complete.Vercel will:
  • Install dependencies
  • Run the build command
  • Deploy to a production URL
  • Generate a preview URL for each commit
5

Verify Deployment

Once deployed, Vercel provides:
  • Production URL (e.g., your-portfolio.vercel.app)
  • Automatic HTTPS
  • Global CDN distribution
  • Automatic deployments on git push

​
Vercel CLI Deployment

Alternatively, deploy using the Vercel CLI: 
# Install Vercel CLI
npm install -g vercel

# Login to Vercel
vercel login

# Deploy to preview
vercel

# Deploy to production
vercel --prod

​
Deploy to Netlify

Netlify is another excellent option with a simple deployment process.
1

Create Netlify Account

  1. Go to netlify.com
  2. Sign up with GitHub, GitLab, or Bitbucket
  3. Authorize Netlify to access your repositories
2

Add New Site

Click “Add new site” > “Import an existing project”:Select your portfolio repository from your Git provider.
3

Configure Build Settings

Enter the following build settings:
Build command: npm run build
Publish directory: dist
Netlify automatically detects these settings for Vite projects
4

Add Environment Variables

Navigate to Site settings > Environment variables:
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key
5

Deploy

Click “Deploy site” and Netlify will:
  • Clone your repository
  • Install dependencies
  • Run the build
  • Deploy to a .netlify.app domain

​
Netlify CLI Deployment

Deploy using the Netlify CLI: 
# Install Netlify CLI
npm install -g netlify-cli

# Login to Netlify
netlify login

# Initialize and deploy
netlify init
netlify deploy --prod

​
Netlify Configuration File

Create a netlify.toml file in your project root:
netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[build.environment]
  NODE_VERSION = "18"
The redirect rule is important for client-side routing to work correctly!

​
Deploy to GitHub Pages

GitHub Pages is ideal for open-source projects and personal portfolios.
1

Install gh-pages Package

npm install --save-dev gh-pages
2

Update vite.config.js

Set the base path to your repository name:
vite.config.js
export default defineConfig({
  base: '/your-repo-name/',
  plugins: [react()],
})
3

Add Deploy Scripts

Add these scripts to package.json:
package.json
{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}
4

Deploy

Run the deploy command:
npm run deploy
This creates a gh-pages branch and pushes the build output to it.
5

Enable GitHub Pages

  1. Go to your repository settings
  2. Navigate to “Pages” section
  3. Select gh-pages branch as source
  4. Save and wait for deployment
Your site will be available at https://yourusername.github.io/your-repo-name/

​
Deploy to Cloudflare Pages

1

Create Cloudflare Account

  1. Go to cloudflare.com
  2. Sign up and verify your email
  3. Navigate to “Pages” in the dashboard
2

Connect Git Repository

Click “Create a project” > “Connect to Git”:Authorize Cloudflare and select your repository.
3

Configure Build

Enter build settings:
Framework preset: Vite
Build command: npm run build
Build output directory: dist
4

Deploy

Click “Save and Deploy” - Cloudflare will build and deploy your site with global CDN distribution.

​
Custom Domain Setup

​
For Vercel

1

Add Domain

Go to Project Settings > Domains and add your custom domain.
2

Configure DNS

Add these DNS records at your domain registrar:
Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com
3

Verify

Vercel automatically provisions SSL certificate and enables HTTPS.

​
For Netlify

1

Add Domain

Go to Site settings > Domain management > Add custom domain.
2

Configure DNS

Update your DNS records:
Type: A
Name: @
Value: 75.2.60.5

Type: CNAME
Name: www
Value: your-site.netlify.app
3

Enable HTTPS

Netlify automatically provisions a Let’s Encrypt certificate.
DNS propagation can take 24-48 hours. Use dnschecker.org to verify.

​
CI/CD Setup

​
Automatic Deployments

Both Vercel and Netlify automatically deploy when you push to your repository:
  • Production: Pushes to main/master branch
  • Preview: Pull requests get unique preview URLs
  • Rollback: Easy rollback to previous deployments

​
GitHub Actions Workflow

For more control, create a GitHub Actions workflow:
.github/workflows/deploy.yml
name: Deploy Portfolio

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
        env:
          VITE_EMAILJS_SERVICE_ID: ${{ secrets.EMAILJS_SERVICE_ID }}
          VITE_EMAILJS_TEMPLATE_ID: ${{ secrets.EMAILJS_TEMPLATE_ID }}
          VITE_EMAILJS_PUBLIC_KEY: ${{ secrets.EMAILJS_PUBLIC_KEY }}
      
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

​
Environment Variables in Hosting Platforms

​
Vercel

  1. Project Settings > Environment Variables
  2. Add variables for Production, Preview, and Development
  3. Variables are encrypted and injected at build time

​
Netlify

  1. Site settings > Environment variables
  2. Add key-value pairs
  3. Optional: Scope to specific branches

​
GitHub Actions

  1. Repository Settings > Secrets and variables > Actions
  2. Add secrets (encrypted) or variables (plain text)
  3. Reference with ${{ secrets.SECRET_NAME }}
Never commit .env files with sensitive data to version control!

​
Post-Deployment Checklist

  • Site loads correctly at production URL
  • All routes work (no 404 errors)
  • Images and assets load properly
  • Contact form sends emails (if applicable)
  • HTTPS is enabled
  • Custom domain is configured (if applicable)
  • SEO meta tags are present
  • Performance is good (use Lighthouse)
  • Mobile responsiveness works
  • Analytics are tracking (if configured)

​
Monitoring & Analytics

​
Vercel Analytics

Enable Vercel Analytics for performance insights: 
import { Analytics } from '@vercel/analytics/react'

function App() {
  return (
    <>
      <YourApp />
      <Analytics />
    </>
  )
}

​
Google Analytics

Add Google Analytics to track visitors:
index.html
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

​
Troubleshooting

​
404 Errors on Refresh

Add redirect rules for client-side routing: Vercel - Create vercel.json: 
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
Netlify - Create _redirects in public folder: 
/*  /index.html  200

​
Build Fails

  • Check build logs for specific errors
  • Verify Node.js version matches local environment
  • Ensure all dependencies are in package.json
  • Check environment variables are set correctly

​
Slow Performance

  • Enable CDN caching
  • Optimize images (WebP, lazy loading)
  • Implement code splitting
  • Use performance monitoring tools

​
Next Steps

Your portfolio is now live! Consider:

Build docs developers (and LLMs) love

Get started for freeTalk to us