DEV Community: SUGATA CHAKMA

How to Deploy a React + Vite App on GitHub Pages: A Beginner-Friendly Guide 🚀

SUGATA CHAKMA — Sat, 10 Oct 2026 17:31:20 +0000

Have you built your first React project using Vite and want to share it with the world?

You can deploy your project for free using GitHub Pages. You don't need to purchase hosting or configure a server. With a few configuration changes and some Git commands, you can publish your project online.

In this tutorial, I'll walk you through the complete process of deploying a React + Vite application to GitHub Pages using the gh-pages package.

Whether you're building your first portfolio, landing page, or mini project, this guide is for you!

📌 What You'll Learn

By the end of this tutorial, you'll know how to:

Create a GitHub repository for your React project.
Push your local project to GitHub using Git.
Install and configure the gh-pages package.
Update your Vite configuration for GitHub Pages.
Deploy your application and troubleshoot common problems.

🛠️ Prerequisites

Before getting started, make sure you have:

Node.js and npm installed.
A GitHub account.
Git installed.
A React + Vite project created and running locally.
Visual Studio Code or another code editor.

If you haven't created your React + Vite project yet, you can start with:

npm create vite@latest my-website -- --template react
cd my-website
npm install
npm run dev

Open the local URL shown in your terminal to check that your application works.

Let's deploy it!

Step 1: Install the `gh-pages` Package

First, open your project folder in VS Code.

Open the integrated terminal and run:

npm install --save-dev gh-pages

The gh-pages package helps publish your built website to a branch named gh-pages in your GitHub repository.

We use a production build because GitHub Pages needs the generated website files, not the Vite development server.

Step 2: Create a GitHub Repository

Now we need a GitHub repository to store our project.

Open GitHub.
Click the New repository option.
Enter a repository name, for example, my-website.
Choose Public for this tutorial.
Create the repository.

For the simplest first-time setup, create an empty repository without automatically adding a README, license, or .gitignore file. This avoids an unnecessary Git history conflict when pushing your existing local project.

Keep your GitHub username and repository name available. You'll need them in the next steps.

Step 3: Push Your Project to GitHub

Return to the VS Code terminal and make sure you're inside your React project folder.

If Git has not been initialized in this folder yet, run:

git init
git add .
git commit -m "Initial commit"
git branch -M main

Now connect your local project to your GitHub repository.

Replace YOUR_USERNAME with your GitHub username:

git remote add origin https://github.com/YOUR_USERNAME/my-website.git
git push -u origin main

For example, if your GitHub username is SugataDev, the remote URL would be:

git remote add origin https://github.com/SugataDev/my-website.git

Important: Run git remote add origin only if your project doesn't already have an origin remote. If it does, check it using:

git remote -v

After pushing, refresh your GitHub repository. You should see your React + Vite project files online.

Step 4: Configure the Deployment Scripts

Open your package.json file in VS Code.

Find the existing "scripts" section and add these two scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d dist"

For a typical Vite project, the scripts section may look like this:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

Don't replace your entire package.json file. Keep your existing dependencies and scripts; simply add predeploy and deploy to the scripts object.

Let's understand what these commands do.

predeploy automatically runs before the deployment command and builds the application.
npm run build generates the production-ready files.
dist is the directory where Vite places those files by default.
gh-pages -d dist publishes the contents of the dist directory to the gh-pages branch.

This means you don't have to build the project manually every time before deploying. The predeploy script handles that step automatically.

Step 5: Update the Vite Configuration

This is one of the most important steps.

When a Vite application is deployed to a GitHub repository URL, its assets need to use the correct base path. Otherwise, your website might load without its CSS, JavaScript, or images.

Open your vite.config.js file.

For a repository named my-website, configure it like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/my-website/",
});

If your project uses vite.config.ts, make the equivalent change there instead.

Notice this line:

base: "/my-website/",

The value must match your repository name, including the leading and trailing slashes.

For example, if your repository is named portfolio, use:

base: "/portfolio/",

This configuration is appropriate for a project deployed at:

https://YOUR_USERNAME.github.io/my-website/

If you're deploying to a user or organization site at https://YOUR_USERNAME.github.io/, the base path is usually / instead.

You can read more in the official Vite deployment guide.

Step 6: Deploy Your Application

Now everything is ready.

Open the VS Code terminal and run:

npm run deploy

Here's what happens behind the scenes:

The predeploy script runs.
Vite builds the React application.
The production files are created inside the dist directory.
The gh-pages package publishes those files to the gh-pages branch.

Wait for the command to finish successfully. You should see a message indicating that the content has been published.

If you encounter an error, read the terminal output carefully before continuing.

Step 7: Enable GitHub Pages

Now go back to your repository on GitHub.

Follow these steps:

Open your repository.
Click Settings.
Navigate to Pages in the sidebar.
Under Build and deployment, set the source to Deploy from a branch.
Choose gh-pages as the publishing branch.
Select /(root) as the folder.
Click Save.

Make sure you select the gh-pages branch, not main, because the deployment command published the built website to gh-pages.

GitHub Pages will then publish the website. You can monitor deployment activity in the repository's Actions tab.

For more details, see the official GitHub Pages documentation.

Step 8: Visit Your Live Website 🎉

After GitHub finishes publishing your site, open the Pages section in your repository settings.

GitHub should display your website URL. For this example, it will look like:

https://YOUR_USERNAME.github.io/my-website/

Open the link in your browser.

Congratulations! Your React + Vite project is now available online.

You can share this URL with friends, include it in your portfolio, or add it to your GitHub profile.

🔄 How to Update Your Website Later

One of the best parts of this workflow is that you can deploy future changes with the same command.

First, edit your project and test it locally:

npm run dev

Then commit and push your source-code changes:

git add .
git commit -m "Update website"
git push origin main

Finally, publish the updated production build:

npm run deploy

The deployment command builds the latest version and updates the gh-pages branch.

Remember that pushing to main alone does not automatically run this particular gh-pages deployment setup. You need to run npm run deploy unless you configure a separate automated workflow.

🐛 Common GitHub Pages Deployment Problems

Let's look at a few problems you might encounter during deployment.

1. My website is blank

A blank page can happen when asset paths are incorrect.

Solution: Check the base property in vite.config.js. For a repository named my-website, it should be:

base: "/my-website/",

Then deploy again:

npm run deploy

2. CSS, JavaScript, or images are not loading

This may happen when your assets are being requested from the wrong URL.

Solution: Verify your Vite base path and use appropriate asset references. Check your browser's Developer Tools console and Network tab for 404 errors.

3. The GitHub Pages link returns a 404 error

Check that the correct branch and folder are selected in Settings → Pages.

For this tutorial, the source should be:

Branch: gh-pages
Folder: /(root)

Also, confirm that the deployment command completed successfully and that the gh-pages branch exists.

4. I get an error when adding the remote repository

If Git says that origin already exists, you don't need to add it again.

Check the current remote:

git remote -v

If it points to the wrong repository, update it using:

git remote set-url origin https://github.com/YOUR_USERNAME/my-website.git

Then try pushing again.

5. My website works on the homepage but not on refreshed routes

If you're using React Router, directly refreshing a nested route may return a 404 because GitHub Pages is static hosting.

You may need a routing fallback or a different routing strategy. For simple projects, consider using HashRouter. For more complex applications, review your routing and hosting requirements before deployment.

⚡ Bonus Tip: GitHub Pages Is Not the Only Option

GitHub Pages is an excellent choice for static websites, portfolios, and small front-end projects.

You can also deploy React + Vite projects through services such as Vercel, which can build and deploy your application directly from a connected GitHub repository.

Vite's official deployment guide also describes a GitHub Actions workflow approach, which is useful when you want deployment to happen automatically whenever you push changes to your main branch.

The right hosting platform depends on your project's needs.

✅ Final Thoughts

Deploying a React + Vite project for the first time might seem difficult, but the process becomes much easier once you understand each step.

The basic workflow is:

Create a GitHub repository → Push your code → Install gh-pages → Configure Vite → Run npm run deploy → Enable GitHub Pages.

That's it! Your local React project can now become a live website that anyone can visit.

If you're learning React, try deploying one of your mini projects first. It's a practical way to improve your Git, GitHub, and deployment skills while building your portfolio.

Have you deployed a React project to GitHub Pages before? Share your experience or any deployment problems in the comments. Let's learn together!

🔗 Useful Resources

How to Deploy a React + Vite Project to GitHub Pages and Vercel (Beginner-Friendly Guide)

SUGATA CHAKMA — Fri, 09 Oct 2026 18:20:27 +0000

If you're learning React, building your first project is only half the journey. The next step is deploying it so other people can access your website through a live URL.

In this guide, I'll explain how to deploy a React + Vite project to both GitHub Pages and Vercel using VS Code, Git, and GitHub Actions.

Whether you're building a portfolio, a landing page, or a small web application, this guide will help you get started.

🚀 What We'll Learn

By the end of this tutorial, you'll know how to:

Upload a React project to GitHub.
Configure Vite for deployment.
Deploy a website using GitHub Pages.
Deploy the same project using Vercel.
Automatically update your website when you push new code.
Troubleshoot common deployment errors.

🛠️ Prerequisites

Before getting started, make sure you have installed:

Node.js
Git
Visual Studio Code
A GitHub account
A Vercel account

You should also have a React project created with Vite.

Step 1: Create a React + Vite Project

If you don't already have a project, open your terminal and run:

npm create vite@latest my-react-app -- --template react

Navigate into the project directory:

cd my-react-app

Install the dependencies:

npm install

Start the development server:

npm run dev

Open the local URL shown in your terminal, usually http://localhost:5173/.

If everything works correctly, you're ready to deploy!

Step 2: Upload Your Project to GitHub

First, create a new repository on GitHub.

Open GitHub.
Click New repository.
Name it my-react-app.
Create the repository.

Now open your project in VS Code and run:

git init
git branch -M main
git add .
git commit -m "Initial commit"

Connect your local project to your GitHub repository:

git remote add origin https://github.com/YOUR-USERNAME/my-react-app.git

Replace YOUR-USERNAME with your GitHub username.

Push your code:

git push -u origin main

Your project should now appear on GitHub.

Tip: Never commit secrets, API keys, or your .env file to a public repository. Make sure your .gitignore excludes sensitive files.

Step 3: Configure Vite for GitHub Pages

GitHub Pages usually serves project websites from a repository-specific path, such as:

https://YOUR-USERNAME.github.io/my-react-app/

Vercel, on the other hand, normally serves your project from the root of its assigned domain.

To support both platforms, open vite.config.js and configure the base path:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: process.env.GITHUB_ACTIONS
    ? '/my-react-app/'
    : '/',
})

Replace my-react-app with your actual GitHub repository name.

This configuration uses the repository path during GitHub Actions builds and / for local development and Vercel builds.

If your existing Vite configuration contains additional plugins or settings, keep them.

Step 4: Deploy to GitHub Pages Using GitHub Actions

GitHub Pages can host static websites for free. With GitHub Actions, you can automate the build and deployment process.

Create the workflow file

Inside your project, create this directory and file:

.github/workflows/deploy.yml

Add the following workflow:

name: Deploy React App to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload build output
        uses: actions/upload-pages-artifact@v4
        with:
          path: dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

This workflow builds your React project and publishes the generated dist folder.

Important: This example assumes your project uses npm and has a committed package-lock.json file.

Enable GitHub Pages

Open your GitHub repository.
Go to Settings → Pages.
Under Build and deployment, select GitHub Actions as the source.

Push the workflow file to GitHub:

git add .
git commit -m "Configure GitHub Pages deployment"
git push

Open the Actions tab and wait for the workflow to finish successfully.

Your website should be available at:

https://YOUR-USERNAME.github.io/my-react-app/

The first deployment may take a few minutes.

Step 5: Deploy the Same Project to Vercel

Vercel is another excellent option for React applications. One of its biggest advantages is automatic deployment whenever you push changes to your connected GitHub repository.

Import your repository

Visit Vercel.
Sign in with your GitHub account.
Click Add New → Project.
Import your my-react-app repository.

Check the project settings:

Setting	Value
Framework Preset	Vite
Root Directory	`./`
Build Command	`npm run build`
Output Directory	`dist`

Keep the default install command if Vercel detects your package manager correctly.

Click Deploy and wait for the build to finish.

Vercel will provide a public URL similar to:

https://my-react-app.vercel.app

Your actual URL may be different.

That's it! Your React application is now deployed on Vercel.

Step 6: Update Both Websites Automatically

One of the best parts of this setup is that you don't need to upload your files manually every time you make a change.

After editing your code in VS Code, run:

git add .
git commit -m "Update website"
git push

Once you push your changes:

GitHub Actions rebuilds and deploys the GitHub Pages version.
Vercel detects the push and creates a new deployment.

You can check the status of both deployments from their respective dashboards.

Step 7: Fix Common Deployment Errors

Here are some problems beginners often encounter.

1. My GitHub Pages website shows a blank screen

Possible cause: An incorrect Vite base path.

Check that your repository name matches the path in vite.config.js:

base: process.env.GITHUB_ACTIONS
  ? '/my-react-app/'
  : '/',

Also check the browser console for missing JavaScript or CSS files.

2. GitHub Actions fails at `npm ci`

This usually means your lockfile is missing or doesn't match your dependencies.

Run locally:

npm install
npm run build

Commit the updated lockfile:

git add package.json package-lock.json
git commit -m "Update dependencies"
git push

3. My Vercel deployment fails

Open the failed deployment in Vercel and inspect its build logs.

Check the following:

Is the root directory correct?
Does npm run build work locally?
Is the output directory set to dist?
Are all required dependencies listed in package.json?

4. My website doesn't show the latest changes

First, confirm that the latest deployment succeeded.

Then hard-refresh the browser using Ctrl + Shift + R.

If the problem continues, inspect the latest deployment logs and verify that the correct GitHub branch is connected.

5. My React Router page returns a 404

If your application uses BrowserRouter, refreshing a nested route can fail when the host doesn't redirect unknown paths to index.html.

Vercel can handle this with an SPA fallback rewrite. GitHub Pages requires a different approach, such as hash-based routing or an appropriate fallback strategy.

GitHub Pages vs. Vercel: Which Should You Choose?

Both platforms can host a static React + Vite project, but they have different strengths.

Feature	GitHub Pages	Vercel
Free static hosting	Yes	Yes
Custom domain	Yes	Yes
Automatic deployment	With GitHub Actions	Built in with Git integration
Build configuration	GitHub Actions workflow	Project settings
Best suited for	Static sites and learning CI/CD	React apps and streamlined deployments

For beginners, I recommend using Vercel as your primary hosting platform because setup and ongoing deployments are straightforward.

GitHub Pages is also worth learning because it helps you understand GitHub Actions and deployment workflows.

Remember that GitHub Pages is for static sites. A full MERN application that requires an Express backend and MongoDB needs separate backend and database hosting.

Final Thoughts

Deploying a React + Vite project is an important step in becoming a frontend developer.

You don't need complicated infrastructure to publish your first application. With GitHub, GitHub Pages, and Vercel, you can manage your source code and publish a working website using tools you'll use in real development projects.

Start small, learn the deployment process, and keep improving your projects.

Now it's your turn! Have you deployed a React project before? Which platform do you prefer: GitHub Pages or Vercel?

Share your experience in the comments!

Useful Resources

React #Vite #GitHub #Vercel #WebDevelopment #Beginners

🚀 Git Cheat Sheet Every Developer Should Bookmark (Learn Git Faster)

SUGATA CHAKMA — Fri, 17 Jul 2026 19:00:00 +0000

"Git isn't hard. Remembering the commands is."

If you've ever found yourself Googling:

How do I create a new branch?
What's the difference between *git fetch** and git pull?*
How do I undo my last commit without breaking everything?
How do I get back a file I accidentally deleted?

You're definitely not alone.

I used to jump between Stack Overflow, documentation, and terminal tabs every time I needed Git. After a while, I realized something important:

You don't need to memorize Git—you need a practical workflow and a few commands you use every day.

So in this post, I'm sharing a clean Git cheat sheet with the most useful commands for real-world development. Whether you're working on a side project, collaborating with a team, or shipping features to production, this will help you move faster and with more confidence.

Why Git Matters

Git is a distributed version control system that helps developers:

Track code changes
Collaborate with teammates
Restore previous versions
Experiment safely on branches
Recover from mistakes
Ship code with confidence

Whether you're a student, freelancer, or software engineer, Git is one of the most important tools in your workflow.

1. Setting Up Git (One-Time Setup)

Before creating repositories, configure your identity.

git config --global user.name "Your GitHub UserName"
git config --global user.email "your@email.com"
git config --global color.ui auto

This tells Git who is making each commit and enables colorful terminal output for better readability.

You can also check your current configuration anytime:

git config --list

If you want to see only one setting:

git config user.name

2. Starting a Repository

There are two common ways to begin.

Initialize a new project

git init

Clone an existing repository

git clone <repository-url>

Use git init when starting from scratch.

Use git clone when contributing to an existing project.

If you want to see the remote URL of a cloned repo:

git remote -v

3. The Daily Git Workflow

This is the cycle you'll repeat every day.

Check what's changed

git status

This is usually the first command I run before doing anything else.

Stage your changes

git add filename

or stage everything:

git add .

If you want to stage only parts of a file interactively:

git add -p

That one is especially useful when you want to split a big file into smaller, cleaner commits.

Review your changes

git diff

See staged changes:

git diff --staged

If you want a compact history view while reviewing work:

git log --oneline --graph --decorate --all

Save your work

git commit -m "Add login validation"

Think of a commit as taking a snapshot of your project.

A few helpful commit tips:

Keep messages short and clear
Use present tense
Make one commit per logical change

Example:

git commit -m "Fix navbar alignment on mobile"

If you forgot to add a file after committing, you can amend the last commit:

git commit --amend

4. Working with Branches

Branches let you experiment without touching the main project.

Create a branch:

git branch feature/login

Switch branches:

git checkout feature/login

A more modern way to switch branches:

git switch feature/login

Create and switch in one step:

git switch -c feature/login

View branches:

git branch

View all branches, including remote ones:

git branch -a

Rename a branch:

git branch -m new-branch-name

Delete a branch after merging:

git branch -d feature/login

Merge your work:

git merge feature/login

This keeps new features isolated until they're ready.

If you want to bring in just one commit from another branch, use:

git cherry-pick <commit-sha>

That command is incredibly useful when you need a specific fix without merging an entire branch.

5. Syncing with GitHub

After committing locally, you'll eventually want to push your code online.

Add a remote:

git remote add origin <GitHub-repo-url>

Upload commits:

git push origin main

If this is your first push on a new branch:

git push -u origin feature/login/main/branch

Download updates and merge them:

git pull

Fetch without merging:

git fetch origin

A simple way to remember:

Fetch = Download
Pull = Download + Merge
Push = Upload

If you want to inspect the remote branches after fetching:

git branch -r

6. Inspecting History

Need to know who changed what?

git log

A cleaner log view:

git log --oneline

Follow changes to a file:

git log --follow filename

Inspect a commit:

git show SHA

Compare branches:

git diff branchA...branchB

See which files changed in a commit:

git show --stat SHA

These commands are lifesavers when debugging or reviewing code.

7. Save Work for Later with Stash

Imagine you're halfway through a feature when your manager says:

"Can you quickly fix this production bug?"

Instead of committing unfinished work:

git stash

You can also save with a message:

git stash push -m "WIP: login form"

Return later:

git stash pop

Apply stash without removing it:

git stash apply

View saved work:

git stash list

Inspect a stash:

git stash show -p

Delete a stash:

git stash drop

Clear all stashes:

git stash clear

Think of stash as Git's temporary locker.

8. Moving, Restoring, or Deleting Files

Rename a file:

git mv old.js new.js

Delete a file:

git rm file.js

If you want to restore a file you changed:

git restore filename

Restore a file from staging:

git restore --staged filename

These commands are especially helpful when you accidentally edit or remove something you didn't mean to touch.

9. Undoing Changes Safely

Sometimes you need to fix mistakes.

Undo the last commit but keep your changes staged:

git reset --soft HEAD~1

Undo the last commit and keep changes in your working directory:

git reset --mixed HEAD~1

Completely remove the last commit and changes:

git reset --hard HEAD~1

⚠️ Be careful with --hard. It can permanently remove uncommitted work.

If you want to undo a commit safely on a shared branch, use:

git revert <commit-sha>

Unlike reset, revert creates a new commit that reverses the changes. This is usually the safer option for team projects.

10. Rewriting History (Use Carefully)

Sometimes you need to clean up your branch before merging.

git rebase main

Interactive rebase is great for cleaning up commits:

git rebase -i HEAD~3

This lets you squash, reorder, or edit recent commits.

⚠️ These commands are powerful. Avoid using them on shared branches unless you fully understand the consequences.

If something goes wrong, Git often keeps a record of where you were:

git reflog

This command can save you when you think you've lost work.

11. Ignore Files You Don't Want to Commit

Create a .gitignore file.

Example:

node_modules/
.env
logs/
*.log
dist/

Git will ignore matching files, keeping your repository clean.

You can also ignore files globally on your machine if needed, but for most projects, a local .gitignore is enough.

12. Cleaning Up Untracked Files

Sometimes your project gets cluttered with generated or temporary files.

Preview what would be removed:

git clean -n

Remove untracked files:

git clean -f

Remove untracked files and directories:

git clean -fd

⚠️ Use this carefully. Once deleted, those files are gone unless they were tracked or stashed.

13. Tags and Releases

When you're ready to mark a release, tags are very useful.

Create a tag:

git tag v1.0.0

Create an annotated tag:

git tag -a v1.0.0 -m "First stable release"

List tags:

git tag

Push tags to GitHub:

git push origin v1.0.0

Or push all tags:

git push origin --tags

Tags are perfect for versioning releases and deployments.

My Favorite Git Workflow

Edit Code
      ↓
git status
      ↓
git add .
      ↓
git commit -m "Meaningful message"
      ↓
git pull
      ↓
Resolve conflicts (if any)
      ↓
git push origin main

Simple.

Repeat.

Ship.

Bonus: A Few Commands I Use All the Time

Here are some extra Git commands that are worth remembering:

git remote -v
git branch -a
git switch -c feature/new-ui
git add -p
git commit --amend
git revert <commit-sha>
git reflog
git stash push -m "WIP"
git clean -fd
git tag v1.0.0

If you learn just these, you'll already be ahead of many developers who only know the basics.

Final Thoughts

Git can feel overwhelming at first because there are so many commands.

The good news?

You only need about 15–20 commands to be productive every day.

Once these become muscle memory, Git transforms from something intimidating into one of the most powerful tools in your development workflow.

The real secret is not memorizing everything—it’s understanding the workflow:

check status
stage changes
commit often
branch for features
pull before pushing
stash when interrupted
revert safely when needed

That’s the rhythm of working with Git.

Quick Question 👇

What's the Git command you always forget?

Mine used to be:

git remote add origin https://github.com/SSH

Drop your answer in the comments—let's build a community cheat sheet together!

⭐ If this article helped you, consider leaving a ❤️ and sharing it with another developer who's learning Git.

DEV Community: SUGATA CHAKMA

How to Deploy a React + Vite App on GitHub Pages: A Beginner-Friendly Guide 🚀

📌 What You'll Learn

🛠️ Prerequisites

Step 1: Install the gh-pages Package

Step 2: Create a GitHub Repository

Step 3: Push Your Project to GitHub

Step 4: Configure the Deployment Scripts

Step 5: Update the Vite Configuration

Step 6: Deploy Your Application

Step 7: Enable GitHub Pages

Step 8: Visit Your Live Website 🎉

🔄 How to Update Your Website Later

🐛 Common GitHub Pages Deployment Problems

1. My website is blank

2. CSS, JavaScript, or images are not loading

3. The GitHub Pages link returns a 404 error

4. I get an error when adding the remote repository

5. My website works on the homepage but not on refreshed routes

⚡ Bonus Tip: GitHub Pages Is Not the Only Option

✅ Final Thoughts

🔗 Useful Resources

How to Deploy a React + Vite Project to GitHub Pages and Vercel (Beginner-Friendly Guide)

🚀 What We'll Learn

🛠️ Prerequisites

Step 1: Create a React + Vite Project

Step 2: Upload Your Project to GitHub

Step 3: Configure Vite for GitHub Pages

Step 4: Deploy to GitHub Pages Using GitHub Actions

Create the workflow file

Enable GitHub Pages

Step 5: Deploy the Same Project to Vercel

Import your repository

Step 6: Update Both Websites Automatically

Step 7: Fix Common Deployment Errors

1. My GitHub Pages website shows a blank screen

2. GitHub Actions fails at npm ci

3. My Vercel deployment fails

4. My website doesn't show the latest changes

5. My React Router page returns a 404

GitHub Pages vs. Vercel: Which Should You Choose?

Final Thoughts

Useful Resources

React #Vite #GitHub #Vercel #WebDevelopment #Beginners

🚀 Git Cheat Sheet Every Developer Should Bookmark (Learn Git Faster)

Why Git Matters

1. Setting Up Git (One-Time Setup)

2. Starting a Repository

Initialize a new project

Clone an existing repository

3. The Daily Git Workflow

Check what's changed

Stage your changes

Review your changes

Save your work

4. Working with Branches

5. Syncing with GitHub

6. Inspecting History

7. Save Work for Later with Stash

8. Moving, Restoring, or Deleting Files

9. Undoing Changes Safely

10. Rewriting History (Use Carefully)

11. Ignore Files You Don't Want to Commit

12. Cleaning Up Untracked Files

13. Tags and Releases

My Favorite Git Workflow

Bonus: A Few Commands I Use All the Time

Final Thoughts

Quick Question 👇

Step 1: Install the `gh-pages` Package

2. GitHub Actions fails at `npm ci`