Deploying a Vite app on GitHub Pages using GitHub Actions with GitHub Secrets

First of all --

I'll assume that you already have a Vite React App created in a GitHub repository. In this article, I will use my portfolio as an example.

Step 1 --

Set the correct base in vite.config.js file:

Example: In my vite.config.js, I added my GitHub repository name (that is, "portfolio") as the base.

Step 2 --

Create an .env file in your project root and add your secrets using the "VITE_" prefix:

Example: If you need a secret "OPEN_AI_KEY", you should add the secret to the .env file as "VITE_OPEN_AI_KEY".

Step 3 --

Add the secret to your code using "import.meta.env.":

Example: If I need to add my "VITE_OPEN_AI_KEY" to my code, I'll add "import.meta.env.VITE_OPEN_AI_KEY" as in the example below:

Step 4 --

Create a GitHub Actions Secret:

• Access your GitHub project repository;
• Click "Settings" >
• Select "Actions" on "Secrets and variables" dropdown >
• Click "New repository secret".

• Type the secret name >
• Type the secret value itself >
• Click "Add Secret".

In my case, the secret name is "VITE_OPEN_AI_KEY" and the value is "My OpenAI Key Value":

Step 5 --

Setup GitHub Pages:

• Access your GitHub project repository;
• Click "Settings" >
• Click "Pages" on menu >
• Select GitHub Actions on Build and Deployment Source.

Step 6 --

Create your deploy.yml file on GitHub:

⚠️ This file is important because it will trigger GitHub Actions to use GitHub Secrets, build, and deploy your project on GitHub Pages every time you commit a change to your repository.

• Access your GitHub project repository;
• Click "Pages" on menu >
• Click "create your own" link.

A page to create your own workflow will open. On this page...

• Name the new workflow as "deploy.yml".
• Remove all generic workflow content;

Before proceeding, ensure your GitHub workflow is empty and named "deploy.yml":

Open the "Deploying a Static Site" Vite Guide on https://vitejs.dev/guide/static-deploy and look for GitHub Pages session.

• Copy the workflow.

• Paste it on GitHub where we are creating our own workflow.

• Add all your secrets above "jobs" on the workflow, using the following template as a reference:

#Allow repo secrets
env:
  VITE_SECRET_1: ${{ secrets.VITE_SECRET_1 }}
  VITE_SECRET_3: ${{ secrets.VITE_SECRET_3 }}
  VITE_SECRET_3: ${{ secrets.VITE_SECRET_3 }}

• In my portfolio, I only have the "VITE_OPEN_AI_API_KEY" secret, so I added the following code to my workflow:

#Allow repo secrets
env:
  VITE_OPEN_AI_API_KEY: ${{ secrets.VITE_OPEN_AI_API_KEY }}

• The result is shown in the image below;
• Click on "Commit changes"

• If you wish, you can modify the "Commit message", otherwise, leave it as it is;
• Click "Commit changes".

• Your workflow was successfully created!

Step 7 --

Commit a change:

As soon as you commit a change, GitHub Actions will automatically identify, build, and deploy your project with your secrets in your GitHub Pages.

• You can verify all deployments on the "Actions" tab in your GitHub repository:

🎉 Congratulations! --

✉️ Feel free to contact me in case of questions!

Comments

[Akseli Palmer]

Hey Douglas. This helped me a lot.

I ran into an issue when I was on step 6. Name the new workflow as "deploy"..

I actually had to change the file name to include ".yml" in order for it to work. So after renaming, the file was named "deploy.yml"

I think it would be helpful to have an extra instruction to verify that the file is named correctly.

Thanks again for creating this awesome post!
Other than that small hiccup, it was incredibly easy and straightforward to follow.

[Douglas Toledo]

Thanks, I just adjusted the post with your seggestion.

[Legend id Id]

Quick question: If we are just injecting environment variables and then simply building the app(In workflow context), won't the build have environment variables in it? or someway won't the environment variables be accessible? Is that something to be concerned off?

[Douglas Toledo]

You're absolutely right, this is a valid concern!
In the article, I exposed my OPEN_AI_API_KEY environment variable after the project build. To address the issue, I created a custom backend to securely handle and hide this sensitive information.

Thank you for pointing this out! I’ll make sure to update the article to emphasize this concern.

This tutorial is best suited for cases where no sensitive information is at risk of being exposed — perhaps for handling basics and general configuration variables.

[Hemant Govekar]

Thanks for this article. Will definitely try👍