Introducing Vite Github Pages Deployer: A Better Way to Showcase Your Vite Projects

4 min readJun 23, 2023

Building and deploying a project to showcase your work can be a hassle — but it doesn’t have to be. Have you ever wished you could bypass the usual grunt work of deployment, especially those time-consuming “commit, push, repeat” steps? Introducing the Vite Github Pages Deployer, a Github Action that streamlines the deployment process for Vite-based projects. It’s like magic, but better: it’s code.

What is Vite Github Pages Deployer?

It’s a Github Action specifically designed to effortlessly deploy your Vite applications to Github Pages, in just a matter of minutes! This is the tool you’ve been waiting for if you’re tired of committing your dist folder and pushing to a “untracked deployment branch” every time you want to deploy. Vite Github Pages Deployer handles all this and more, saving you time and keeping your commits clean.

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

GitHub Pages via Actions, released circa July 27, 2022

Who is it for?

This action is perfect for any developer who uses Vite as their project builder. Are you building your React or Vue project with Vite? You’re in luck! This is the only action on the Github marketplace that uses Github Actions to deploy Vite projects to Github Pages, putting it in a league of its own. Whether you’re a React or Vue developer or any other Vite user, this action has got you covered.

Features and Flexibilities

Forget about giving out your personal access tokens or creating a separate ‘deploy’ branch on git. The Vite Github Pages Deployer action doesn’t need any of that. It’s a no-nonsense, clean deployment machine, built to make your life easier. And boy, does it deliver on that promise.

Here’s a snapshot of what you can do:

Control your build output directory with the build_path parameter.
Pick the package manager you prefer — npm or yarn. Just set your preference in the package_manager input, and the action takes care of the rest. This preference will be utilized during dependency installation and building process.
Want to keep an eye on your environment variables during the deployment? The debug_mode parameter lets you do just that.
Tweak your public base path by setting the public_base_path parameter, especially useful when deploying to Github Pages.

How to Use

TL;DR

The usage is as straightforward as it gets. Just use the following code in your workflow:

- name: Vite Github Pages Deployer
  uses: skywarth/vite-github-pages-deployer@v1.1.0

Full example:

But it’s better to understand the full extend of it, to benefit from it as much as possible:

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@v1.1.0
        id: deploy_to_pages

And you’re good to go! There are additional parameters available to tweak the process to your liking. Check out the project’s readme for all the details.

Time for Some Action!

This action is ready to make deploying your Vite projects to Github Pages a breeze. Just sit back, let the action do its magic, and watch your application go live. It’s just like cooking instant noodles, but instead of noodles, you get a deployed web application. And instead of waiting for the water to boil, you just watch the action cook the results.

Sounds like a pretty good deal, right? So why wait? Go ahead, give Vite Github Pages Deployer a try and see how it revolutionizes your deployment process. And if you find it useful, don’t forget to give it a star, it keeps the engine running.

Here’s to clean, simple, and personalized deployments with Vite GitHub Pages Deployer. Because, why complicate when you can simplify?

Github Marketplace

Github Repository

Demo