Deploying Your Vite Apps to Github Pages is a Breeze with Vite Github Pages Deployer
Tags: vite, vue, githubpages, githubactions
Published: 2023-06-18 12:57:59

Hello hello!

If you're a developer using Vite for your Vue.js or React projects, and you're considering GitHub Pages for deploying your applications, then you've stumbled upon a gem. Today, I'm introducing you to a fresh open-source tool that is about to make your deployment process a piece of cake: Meet the Vite Github Pages Deployer!

## What is Vite Github Pages Deployer?
[Vite Github Pages Deployer](https://github.com/skywarth/vite-github-pages-deployer) is an innovative open-source tool designed to significantly streamline the deployment of your Vite applications to Github Pages. 

Deploying via Github Actions feature is a beta feature, but provides an incredible new perspective on the deployment of your application! 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eetlsdghst02v8qz5uqs.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9ne9hj9i97g4jk6992w.png)



Vite Github Pages Deployer harnesses the power of GitHub Actions and Artifacts, providing a seamless, customizable deployment process that takes away the stress of manual deployments.

Key features of Vite Github Pages Deployer include:

- Zero manual/auto commits of the `dist` folder or pushing to a branch.
- Seamless deployments to Github Pages leveraging actions and artifacts.
- A high degree of customization with optional build paths.
Clear error notifications and debug modes for hassle-free troubleshooting.


## Usage Example
Here's a quick sneak peek into how effortlessly you can incorporate this into your workflow:

```
name: Vite Github Pages Deploy

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    environment:
      name: demo
      url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Vite Github Pages Deployer
        uses: skywarth/vite-github-pages-deployer@master
        id: deploy_to_pages

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84w21vta5bcoc9gi6wak.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8zz5wo3nfp2siga336z.png)





## A Must-Have For Vue.js and React Projects
Whether you're whipping up a Vue.js application with Vite for a super speedy development experience, or a React project utilizing Vite's out-of-the-box React fast refresh and JSX support, Vite Github Pages Deployer will become your go-to deployment tool.

## Where can it be utilized?
You need the [Vite Github Pages Deployer](https://github.com/marketplace/actions/vite-github-pages-deployer) if:

- You're creating a Vite application with Vue.js or React and want an uncomplicated, efficient deployment process to Github Pages.
- You're seeking an automated, reliable solution to save you from the monotony of manual deployments.
- You're developing open-source projects and would like to showcase it free-of-charge.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mlv0kpo61vnmwtuf8m4.png)



## Give it a go!
Embark on a simplified journey with Vite Github Pages Deployer and discover how it can revolutionize your deployment process, transforming it into an effortless task. Check out the [demo project](https://github.com/skywarth/country-routing-algorithm-demo-vue) to witness it in action.

As always, contributions of any kind is welcome. Reviews, suggestions, PRs and issues are appreciated. 

And lastly, if you find Vite Github Pages Deployer beneficial, show your support by giving a ⭐ to the repository. 

Enjoy!