Deploying Vite project to GitHub Pages
Vite is a tool that helps in faster and more efficient web development. A project created using the Vite tool is known as a Vite project. When we make a Vite project, we set up all the necessary configurations and files.
GitHub Pages is a feature on GitHub that helps in the creation of static websites using our GitHub repository. These websites are open and accessible by all users on GitHub.
In this Answer, we will discuss how to deploy our Vite project to GitHub pages.
Setting up git on our Vite project
We run the following commands to set up git on our Vite project using our terminal:
We use the following command to set up Git infrastructure on our project:
git init
We use the following command to add all files and changes in our current directory to our Git repository.
git add .
We use the following command to create a new commit in our Git repository with a descriptive message enclosed in the double quotations.
git commit -m "add: initial files"
We use the following command to rename our default branch as
main.
git branch -M main
We use the following command to add a remote repository with the URL provided. This remote repository acts as a main focus for sharing our project.
git remote add origin https://github.com/username/projectname.git
Here username is the user name of our Git profile while projectname is the name we have defined for our Vite project.
Lastly, we use the following command to push all the local commits to our remote repository. Now a connection is established between our local and remote repository.
git push -u origin main
Deployment setup
After transferring our project to the GitHub repository we move to the deployment setup process.
We set the
baseURL of our project in ourvite.config.tsfile. Hereprojectnameis the name of our repository.
We create a create a
.githubfolder. In this folder, we make a folder named asworkflowswhich keeps all our workflows to be implemented on our GitHub repository. This folder contains ourymlfile named asdeploy.yml. This allows us to deploy our projects on GitHub automatically. We add the following code to thedeploy.ymlto set all the steps used by GitHub to setup our workflow.
name: Deployon:push:branches:- mainjobs:build:name: Buildruns-on: ubuntu-lateststeps:- name: Checkout repouses: actions/checkout@v3- name: Setup Nodeuses: actions/setup-node@v3- name: Install dependenciesuses: bahmutov/npm-install@v1- name: Build projectrun: npm run build- name: Upload production-ready build filesuses: actions/upload-artifact@v3with:name: production-filespath: ./distdeploy:name: Deployneeds: buildruns-on: ubuntu-latestif: github.ref == 'refs/heads/main'steps:- name: Download artifactuses: actions/download-artifact@v3with:name: production-filespath: ./dist- name: Deploy to GitHub Pagesuses: peaceiris/actions-gh-pages@v3with:github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./dist
We use the following command to add all modified and new files in our current directory to the Git staging area.
git add .
By running the following command, we create a commit with a descriptive message in double quotations.
git commit -m "add: deploy workflow"
We push our changes to remote repository using this command.
git push
Setup on GitHub
After running all the commands above, we can see our directory files on our GitHub.
Now we have to ensure that our workflows permissions are set. We go to Settings > Actions > General > and scroll to the Workflow permissions options and adjust the following setting:
Then we go to the Actions setting and check if our workflows have executed successfully. If not, we re-run the job. Our succeeded workflow will look like this:
Next, we go to Settings > Pages, and in the branch option, we set our repository branch to
gh-pages.
We go the Settings > Pages where can find our site link.
We click on the site, and we get the following output:
To study further the project we have created, we can explore the following project link on GitHub:
Conclusion
Deploying a Vite project to GitHub Pages offers a convenient way to showcase and share our web application or static site publicly. By following a few simple steps, we can easily configure and automate the deployment process, ensuring our project is accessible to users on the GitHub Pages platform.
Free Resources
