Deploy vite app to GitHub pages for Free

 

Deploy Vite App to GitHub Pages using GitHub

Hey guys! This article will show How to Deploy the vite app to GitHub pages for free. We created many projects. But we didn't deploy our projects to GitHub. Now it's time to learn how to deploy our projects to GitHub pages. You can also see our previous article on Build a Tic-Tac-Toe Game using React with source code. We cleared various topics and problems in this article. You can also see the topics given below.

Topic clear in this article:-

• What is GitHub pages?
• How to create a GitHub repository.
• How to deploy code to the GitHub repository.
• How to deploy or publish the vite app to GitHub pages.
• How to find deployed or published websites to GitHub pages.

Now without any further delay let's get started.

To deploy on GitHub pages, you should have a GitHub account. If you do not have an account, create one. We will learn it from scratch. So you don't have to worry about GitHub. First of all, let's take a look at GitHub pages.

What is GitHub pages?

GitHub Pages is a static site hosting service. It generally takes the HTML, CSS, and JavaScript files from the GitHub repository, builds them, and publishes the website. It is about simple HTML, CSS, and JavaScript files but now GitHub Pages can run almost every type of file like react, tailwindcss, nodejs, next js, etc.

Now let's get started.

Creating Vite app with React

First, we create a react app using the vite (a builder tool). If you don't know how to create it, you can check our previous article on how to build a react app using Vite js and tailwind CSS.

After creating the vite app install gh-pages it to your current folder. You can also paste the given code to your terminal to install gh-pages:-

npm install gh-pages

How to create a GitHub repository

• Now go to the GitHub home page and sign in or sign up. After successful login, you will see a home page like this.

• Now click on the "New" button to create a new repository. Then a new page will arrive like this.

• Enter the repository name and click on the button "create repository". 
• After this, you will see a new page. It contains a set of instructions for deploying source code to the created repository. You can copy the code given on the page as shown below and paste the code into the terminal one by one.

• Now go to your vite app and open the terminal in it.

Deploy app on GitHub

Follow the instructions given below to deploy the vite app to GitHub. These instructions are also given by GitHub.  

Pushing code to GitHub repository using terminal

Paste the code one by one to your terminal opened in the "vite app"

1. git init

2. git add .

3. git commit -m "my commit"

4. git branch -M main

5. git remote add origin https://github.com/username/repo-name.git

   In this URL, change the highlighted text. In place of the username, enter your GitHub username. At the place of repo-name, enter your repository name like git remote add origin https://github.com/dikshant-singh510/vite-app.git

6. git push -u origin main

After entering all commands in the terminal. You can see your code in the GitHub repository.

Now it's time to deploy the repository to GitHub pages.

Posts suggested for you :

• How to build Google Keep Clone with react JS
• Dynamic React image gallery using tailwind
• Create your own decision maker in JavaScript

Deploying the Vite app to GitHub pages

To deploy it correctly, we make some changes to our vite app.

1. Create a file name deploy.sh in your vite application. And past the code given below into the deploy.sh file.

   #!/usr/bin/env sh
   
   # abort on errors
   set -e
   
   # build
   npm run build
   
   # navigate into the build output directory
   cd dist
   
   # place .nojekyll to bypass Jekyll processing
   echo > .nojekyll
   
   # if you are deploying to a custom domain
   # echo 'www.example.com' > CNAME
   
   git init
   git checkout -B main
   git add -A
   git commit -m 'deploy'
   
   # if you are deploying to https://USERNAME.github.io
   # git push -f git@github.com:USERNAME/USERNAME.github.io.git main
   
   # if you are deploying to https://USERNAME.github.io/REPO
   git push -f git@github.com:username/repo-name.git main:gh-pages
   
   cd -
   

   Change the highlighted text in the file. You can replace your username and repository name with the highlighted text like git push -f git@github.com:dikshant-singh510/vite-app.git main:gh-pages.

2. Now go to vite.config.js file. Add a base URL to it. This URL is the base URL of your repository name. In my case it is /vite-app/. 

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [react()],
     base:'/repo-name/'
   })
   

3. Go to the pacakge.json file. And add a code in the script object.

   {
     "name": "vite-app",
     "private": true,
     "version": "0.0.0",
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "preview": "vite preview",
       "deploy":"gh-pages -d dist"
     },
     "dependencies": {
       "gh-pages": "^4.0.0",
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     },
     "devDependencies": {
       "@types/react": "^18.0.24",
       "@types/react-dom": "^18.0.8",
       "@vitejs/plugin-react": "^2.2.0",
       "vite": "^3.2.3"
     }
   }
   

4. Our work is done. Now add changes to the GitHub repository by entering these commands one by one.

   git add .
   git commit -m "applying changes"
   git push
   

5. Now run the given command on your terminal.

   npm run build

6. After running this command, a dist folder is created in your vite app.
7. Our work is done. It's time to publish it on GitHub pages. Run the command given below in your terminal.

   npm run deploy

That's how we did it.

How to find the deployed website on GitHub pages

• Go to your repository in GitHub.
• Go to settings in your repository.
• Scroll down.
• You will find Pages in the left section.
• Click on Pages.
• Now you can see a link to your site.

That's it.

Conclusion

Now you learned how to deploy vite app to GitHub pages for free. In this article, we learned from scratch. I am sure you learned something new from the article "deploy vite app to GitHub pages for free". If you do so. Tell us in the comment section. If you have any queries feel free to contact us. You can also request articles on any topic or project. Just tell us we do our best.

Thank You!