This guide will help you deploy your portfolio website to various hosting platforms.
# Initialize git repository (if not already done)
git init
# Add all files
git add .
# Commit changes
git commit -m "Initial commit: Portfolio website"
# Add remote origin (replace with your GitHub repo URL)
git remote add origin https://github.com/yourusername/your-repo-name.git
# Push to GitHub
git push -u origin main- Go to your GitHub repository
- Click on "Settings" tab
- Scroll down to "Pages" section
- Select "Deploy from a branch"
- Choose "main" branch and "/ (root)" folder
- Click "Save"
For GitHub Pages, you'll need to set environment variables in your build process or use a different approach since GitHub Pages doesn't support server-side environment variables.
# Build the project
npm run build
# Deploy the dist folder to Netlify- Go to your Netlify dashboard
- Select your site
- Go to "Site settings" > "Environment variables"
- Add your EmailJS variables:
VITE_EMAILJS_PUBLIC_KEYVITE_EMAILJS_SERVICE_IDVITE_EMAILJS_TEMPLATE_ID
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel- Go to your Vercel dashboard
- Select your project
- Go to "Settings" > "Environment Variables"
- Add your EmailJS variables
- Environment Variables: Make sure to set your EmailJS credentials in your hosting platform
- Build Command: Use
npm run buildto create the production build - Output Directory: The build output is in the
distfolder - HTTPS: Most hosting platforms provide HTTPS by default, which is required for EmailJS
- Contact Form Not Working: Check that environment variables are properly set
- Build Errors: Ensure all dependencies are installed with
npm install - Styling Issues: Verify that Tailwind CSS is properly configured