Portfolio - lesson 5 | HackIndia Skills

Key point

One thing matters

A reviewer should be able to open your project without cloning it.

Your goal today is one working live link in your README. If the project can be deployed, do not submit only a local setup.

Pick a host

Use the simplest host that matches your stack. GitHub Pages is a safe default for static HTML, CSS, and JavaScript projects from a GitHub repository.

For framework projects, Netlify and Vercel are common Git-connected options. Vercel has a free Hobby plan for personal projects and developers. Netlify can deploy from Git providers after you import an existing project.

Your to-do

GitHub Pages path

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Use this for static HTML, CSS, and JavaScript projects.
Open your repository on GitHub.
Go to Settings > Pages.
Choose Deploy from a branch.
Select the branch and folder, then Save.

0 of 5 done

Your to-do

Netlify path

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Sign up or log in to Netlify.
Click Add new project.
Choose Import an existing project.
Choose your Git provider and authorize repository access.
Set publish settings, then Publish.

0 of 5 done

Example

Vite React example

For a Vite React app, test the production build before you deploy. This catches broken imports, missing packages, and build errors early.

If you use environment variables such as import.meta.env.VITE_API_URL, add them in the host dashboard. Do not depend on a local .env file in production.

# local check
npm install
npm run build

# common Vite publish settings
# Build command: npm run build
# Publish directory: dist

# .env before deployment
VITE_API_URL=http://localhost:3000
VITE_APP_NAME=Campus Notes

# .env after deployment on your host
VITE_API_URL=https://campus-notes-api.onrender.com
VITE_APP_NAME=Campus Notes

Common mistake

Common breaks

The most common break is a project that works on your laptop but not online. Usually the host is missing env vars, the app still calls localhost, or the build output folder is wrong.

A live website cannot call http://localhost:3000 for other people. Point it to the deployed API URL, or explain the limitation clearly in your README.

Tip

Test like a reviewer

Open the link in an incognito or private window. Then open it on your phone using mobile data or a different Wi-Fi.

Check the first screen, main buttons, one form, route reloads, and API data. If a React Router page shows 404 on refresh on Netlify, add this file.

# public/_redirects for React Router on Netlify
/*    /index.html   200

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Run npm install and npm run build in your project folder.
Choose GitHub Pages, Netlify, or Vercel based on your project.
Add required environment variables in the host dashboard.
Open the live link on phone and desktop.
Paste the working demo URL into your README.

0 of 5 done

Deploy it free and test the link

One thing matters

Pick a host

GitHub Pages path

Netlify path

Vite React example

Common breaks

Test like a reviewer

Do this now

Quick check