Deploying Your Vite Apps to Github Pages is a Breeze with Vite Github Pages Deployer
skywarth
Posted on June 18, 2023
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!
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
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.
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!
Posted on June 18, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.