🚀 How to Deploy Your Vue.js App to GitHub Pages (Free Hosting Tutorial)

Are you ready to take your Vue.js project live — without paying a single cent on hosting? Whether you're building a portfolio, a frontend prototype, or a mini web app, GitHub Pages offers a fast and free solution to host your Vue.js project.

In this guide, we’ll walk you through how to deploy a Vue.js app to GitHub Pages, including essential setup, deployment steps, troubleshooting, and best practices — even if you're a beginner.

---

 Why Choose GitHub Pages for Your Vue App?

GitHub Pages is a free static site hosting service powered by GitHub. It allows you to host HTML, CSS, and JavaScript files directly from your repository.

Here’s why it's a perfect match for Vue.js apps:

• Free: No hosting fees or credit card required.

• Easy to Use: Simple configuration and fast deployment.

• Git-Powered: Automatically links to your GitHub repository.

• Great for SPAs: Works well with Vue apps that don’t require server-side rendering.

• Ideal for Beginners: No need for complex hosting setups or deployment pipelines.

If you're building something like a portfolio site, landing page, or a Vue-powered documentation app, GitHub Pages is an excellent option.

---

Prefer to Watch Instead?

I’ve created a complete YouTube video that shows everything step-by-step — from initializing your Vue.js project to going live on GitHub Pages.

👉 Watch it here: How to Deploy Vue.js to GitHub Pages

📺 Make sure to Like and Subscribe if you find it helpful!

---

 What You’ll Learn in This Guide

By the end of this tutorial, you’ll understand:

• How to prepare your Vue app for deployment

• How to use the gh-pages package to push your app live

• How to configure package.json and vue.config.js correctly

• How to fix common issues like 404s and routing problems

---

 Step-by-Step Deployment Instructions

Step 1: Build Your Vue Project

Run the following command to create a production-ready version of your app:

npm run build

This will generate a dist/ folder with all the compiled static files needed for deployment.

---

Step 2: Install gh-pages

The gh-pages package allows you to deploy static files to GitHub Pages effortlessly.

npm install --save-dev gh-pages

---

 Step 3: Configure Your package.json

Add the following lines to your package.json file:

"homepage": "https://your-username.github.io/your-repo",
"scripts": {
  "build": "vue-cli-service build",
  "deploy": "gh-pages -d dist"
}

Note:

• Replace your-username and your-repo with your actual GitHub username and repo name.

• The homepage value helps Vue generate correct relative paths during the build process.

---

Step 4: Create or Update vue.config.js

If it doesn't already exist, create a vue.config.js file in the root of your project and add:

module.exports = {
  publicPath: './'
}
This tells Vue to use relative paths when building the app, which is necessary for GitHub Pages to render the app correctly.

---

Step 5: Push to GitHub & Deploy

Make sure your local project is pushed to GitHub:

git add .
git commit -m "Prepare for GitHub Pages deployment"
git push origin main

Then, deploy your app with:

npm run deploy

🎉 That’s it! Your app will be live at:

https://your-username.github.io/your-repo/

---

 Common Issues and How to Fix Them

404 or Blank Page After Deployment

Fixes:

• Ensure your publicPath in vue.config.js is set correctly to './' or '/your-repo/'.

• Make sure npm run build was run before npm run deploy.

• Confirm that your gh-pages branch exists and contains the built files.

• Wait a few minutes; GitHub Pages can take some time to go live.

---

 Best Practices and Tips

• Use README.md: Add a README to your repo for documentation or links.

• Use a .gitignore: Keep your repo clean and exclude node_modules, dist, etc.

• Enable GitHub Pages: Double-check it's enabled under your repo settings > Pages.

• Branch setup: You can configure GitHub Pages to serve from the gh-pages branch or /docs folder — but gh-pages + gh-pages package is easiest for Vue apps.

• Auto-deploy with GitHub Actions (Advanced): You can automate deployment on every push using GitHub Actions CI/CD.

---

 Useful Resources

• Vue.js Deployment Docs

• GitHub Pages Documentation

• gh-pages npm Package

 Have Questions or Need Help?

Feel free to:

• Comment on the YouTube tutorial

• Reach out via the contact form on this blog

• Drop your GitHub repo link and I can take a quick look!

---

Final Thoughts

Deploying your Vue.js app to GitHub Pages is one of the easiest and most cost-effective ways to get your work online. It’s perfect for demos, learning projects, and portfolios.

Now that you know how to:

• Build and prepare your app for deployment

• Configure the right settings

• Troubleshoot common issues

…you’re well-equipped to share your Vue project with the world!

---

 If You Found This Helpful

•  Like & Subscribe on YouTube

•  Share this article with fellow Vue developers

• Bookmark it for your next project

Thanks for reading, and happy coding! 🙌

---

Vue.js GitHub Pages Deployment, Free Vue Hosting, How to Deploy Vue.js, Vue CLI GitHub, Vue gh-pages, Host Vue App Free, Vue.js Portfolio Hosting, Frontend Deployment 2025, Vue Static Website, Vue Single Page App Deploy

---

#VueJS #GitHubPages #FrontendDevelopment #WebDevelopment #FreeHosting #LaeTechBank #VueDeploy