Deploy Vue app to GitHub Pages

🎯 Description

This repository was inspired by the vue-gh-pages repository. It is designed with the purpose is to serve as step-by-step tutorial for publishing a Vue project on the github.io domain using GitHub Pages.

GitHub Pages is a free service that provides a simple way to host your own website about yourself, your organization, or your project. It takes HTML, CSS and JavaScript files directly from a repository on GitHub, optionally runs the files through a build process, and publishes a website. Therefore, it is a static site hosting service and does not support server-side code such as PHP, Ruby or Python.

🔖 Tags versions

v1.x.x

• Executes a bash file through a NPM script command.
• Does not require the installation of additional NPM packages to work.
• To use it, you need to customize some data in multiple files.
• Provides a complete information about the files extracted, their weight and subsequent compression in the terminal.

v2.x.x

• Executes a JavaScript file with NodeJS through a NPM script command.
• Requires the installation of NPM packages to work.
• To use it, you need to customize one data in a single file.
• Provides a concise information about execution steps in the terminal, using colors and emojis for enhanced visibility.

v3.x.x

• Executes a JavaScript file with NodeJS triggered by an NPM script command, which runs automatically through a GitHub Actions workflow.
• Requires the installation of the NPM packages used in the version 2.x.x to work.
• To use it, you need to customize some data in multiple files.
• Displays steps information about the deployment process in the GitHub Actions log, rather than in the terminal.

🚀 Commands

Install dependencies

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Publish the code for production in GitHub Pages

npm run deploy:v1

npm run deploy:v2

🔗 References

• About GitHub Pages
• Changing the visibility of your GitHub Pages site
• Configuring a custom domain for your GitHub Pages site
• Pushing updates manually on GitHub Pages
• Cómo publicar una aplicación Vue en GitHub Pages
• How I Use GitHub Actions to Auto-deploy my Vue.js Site to GitHub Pages
• Deploy to Github Pages like a pro with Github Actions
• Deploying Vue Apps to Github Pages
• vue-gh-pages by Cristina Fernández Sanz