Skip to content

DEPLOYMENT_GUIDE.md

Latest commit

 

History

History
171 lines (123 loc) · 3.93 KB

DEPLOYMENT_GUIDE.md

File metadata and controls

171 lines (123 loc) · 3.93 KB

Step-by-Step Deployment Guide

🚀 Complete Guide: Upload to GitHub & Deploy to Vercel

PART 1: Upload to GitHub

Step 1: Check Git Status

Open PowerShell in your project folder and run:

git status

Step 2: Add All Files

Add all your project files to Git:

git add .

Step 3: Create First Commit

Commit your files with a message:

git commit -m "Initial commit: Portfolio website"

Step 4: Create GitHub Repository

  1. Go to GitHub: https://github.com/new
  2. Repository name: portfolio-website (or any name you prefer)
  3. Description: "Professional portfolio website for Data Analyst"
  4. Visibility: Choose Public (or Private if you prefer)
  5. DO NOT check "Initialize with README" (we already have files)
  6. Click "Create repository"

Step 5: Connect Local Repository to GitHub

After creating the repository, GitHub will show you commands. Use these:

git branch -M main
git remote add origin https://github.com/oness12/portfolio-website.git
git push -u origin main

Note: Replace portfolio-website with your actual repository name if different.

Step 6: Enter GitHub Credentials

  • If prompted, enter your GitHub username
  • For password, you'll need a Personal Access Token (see below)

GitHub Personal Access Token (if needed)

If Git asks for a password, you need a Personal Access Token:

  1. Go to: https://github.com/settings/tokens
  2. Click "Generate new token" → "Generate new token (classic)"
  3. Name it: "Portfolio Deployment"
  4. Select scopes: Check "repo" (full control)
  5. Click "Generate token"
  6. Copy the token (you won't see it again!)
  7. Use this token as your password when Git prompts you

PART 2: Deploy to Vercel

Step 1: Go to Vercel

Visit: https://vercel.com

Step 2: Sign Up / Sign In

  • Click "Sign Up"
  • Choose "Continue with GitHub"
  • Authorize Vercel to access your GitHub

Step 3: Import Project

  1. Click "Add New..." → "Project"
  2. Find your portfolio-website repository
  3. Click "Import"

Step 4: Configure Project

Vercel will auto-detect Next.js settings:

  • Framework Preset: Next.js (auto-detected)
  • Root Directory: ./ (leave as is)
  • Build Command: npm run build (auto-detected)
  • Output Directory: .next (auto-detected)

Click "Deploy"

Step 5: Wait for Deployment

  • Vercel will build your project (takes 1-3 minutes)
  • You'll see build logs in real-time
  • When done, you'll see: "Congratulations! Your project has been deployed."

Step 6: Access Your Live Website

  • Your site will be live at: https://your-project-name.vercel.app
  • You can customize the domain name in Vercel settings

PART 3: Future Updates

Whenever you make changes:

  1. Make your changes in your code
  2. Commit changes: 
    git add .
git commit -m "Description of changes"
git push
  3. Vercel auto-deploys: Your site will automatically update!

Quick Command Reference

# Check status
git status

# Add files
git add .

# Commit
git commit -m "Your message here"

# Push to GitHub
git push

# Pull latest changes (if working on multiple computers)
git pull

Troubleshooting

Problem: "Git push" fails

Solution: Make sure you've added the remote repository:

git remote -v

If empty, add it:

git remote add origin https://github.com/oness12/your-repo-name.git

Problem: "Permission denied"

Solution: Use Personal Access Token instead of password

Problem: Vercel build fails

Solution:

  • Check build logs in Vercel dashboard
  • Make sure all dependencies are in package.json
  • Ensure Node.js version is compatible (18+)

Need Help?

Good luck! 🎉