DEV Community

skywarth
skywarth

Posted on

Deploying Your Vite Apps to Github Pages is a Breeze with Vite Github Pages Deployer

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 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

Image description

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

Enter fullscreen mode Exit fullscreen mode

Image description

Image description

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 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

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 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!

Top comments (0)