Publishing Vite application on GitHub Pages with Vite + GitHub

Vite is a modern build tool for front-end development that offers fast development and optimized building for production. In this tutorial, we will cover how to publish a Vite application to GitHub Pages, a free and easy way to host your static websites.

Prerequisites:

• Node.js installed on your machine
• Basic knowledge of HTML, CSS, and JavaScript
• Familiarity with Vite and GitHub

Step 1: Create a Vite application
First, we need to create a new Vite application. Open your terminal and run the following command:

npm init @vitejs/app my-app --template vue

Replace my-app with the name of your application and vue with the template you want to use (e.g., React or JavaScript). This command will create a new Vite project using the specified template.

Step 2: Test your application
Navigate to the newly created directory and start the development server using the following command:

cd my-app
npm run dev

This will start a development server at http://localhost:3000 where you can preview your Vite application. Make sure everything is working as expected before proceeding to the next step.

Step 3: Build your application
Once you are satisfied with your application, it’s time to build it for production. Run the following command in your terminal:

npm run build

This will create a dist folder in your project directory containing the optimized build of your Vite application.

Step 4: Set up GitHub Pages
Now, we need to create a new GitHub repository for our application and enable GitHub Pages to host it. Follow these steps:

1. Go to https://github.com and sign in to your account.
2. Click on the "+" button in the top-right corner and select "New repository".
3. Enter a repository name, description, and make it public.
4. Click on the "Create repository" button.
5. In your repository, go to the "Settings" tab.
6. Scroll down to the "GitHub Pages" section.
7. Under "Source", select the main branch and the /(root) directory.
8. Click on the Save button.

Step 5: Publish your application
Now, it’s time to publish your Vite application to GitHub Pages. Follow these steps:

1. Commit and push your changes to the GitHub repository:

git add .
git commit -m "Initial commit"
git push origin main

1. Go back to your GitHub repository and refresh the page.
2. Click on the "Settings" tab.
3. Scroll down to the "GitHub Pages" section.
4. You will see the URL where your Vite application is hosted (e.g., https://your-username.github.io/my-app/).
5. Visit the provided URL in your browser to see your Vite application live on GitHub Pages.

Congratulations! You have successfully published your Vite application to GitHub Pages. You can now share the link with others to showcase your work. Remember to update your GitHub repository with any future changes and rebuild your application before re-publishing it to GitHub Pages.