Github Pages is a great tool for publishing and hosting static websites directly from your Github repository. With Github Pages, you can easily showcase your projects, documentations, or personal websites to the world. In this article, we will explore how to publish a project built with Vite on Github Pages using Github Actions.
Vite is a build tool that aims to provide a faster and more efficient development experience for frontend developers. It leverages modern JavaScript features and esbuild for building production-ready code with lightning-fast speed. If you have a project built with Vite and want to showcase it to the world, Github Pages is a perfect choice for hosting it.
To get started, first, you need to create a new repository on Github for your Vite project. Once you have your project pushed to the repository, go to the “Settings” tab of your repository and scroll down to the “Github Pages” section. Here, you can choose the source branch for your Github Pages site. In most cases, you would want to use the “main” branch or “master” branch for the source.
After setting up the Github Pages source branch, the next step is to create a Github Actions workflow that will automatically build and deploy your Vite project to Github Pages whenever you push changes to the repository. Create a new file called “deploy.yml” in the “.github/workflows” directory of your repository and add the following code:
“`html
name: Deploy to Github Pages
on:
push:
branches:
– main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
– name: Checkout code
uses: actions/checkout@v2
– name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: 14
– name: Install dependencies
run: npm install
– name: Build
run: npm run build
– name: Deploy to Github Pages
uses: JamesIves/github-pages-deploy-action@3.7.1
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: dist
“`
In this workflow, we define a job that runs on every push to the main branch. The job consists of several steps, including checking out the code, setting up Node.js, installing dependencies, building the project, and then deploying the built assets to Github Pages using the “github-pages-deploy-action” action. Notice that we are using a Github secret (ACCESS_TOKEN) to authenticate the deployment to Github Pages. You can create a personal access token with the “public_repo” scope and add it as a secret in your repository settings.
With this Github Actions workflow in place, every time you push changes to your Vite project, Github Actions will automatically build and deploy the project to Github Pages, making it accessible to the world. This seamless integration allows you to focus on developing your project while letting Github Actions take care of the deployment process.
In conclusion, Github Pages is a powerful tool for showcasing and hosting static websites, and when combined with Github Actions, it becomes even more effortless to deploy and update your projects. By following the steps outlined in this article, you can easily publish your Vite project on Github Pages and share it with others. Happy coding!
