Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Publishing a static website for portfolio or information is cool.We can do it for free using github pages.
This guide will walk you through the process of deploying a Vue.js 3 application built with Vite to GitHub Pages.
In this article first I will deploy a Vuejs project to to github pages. And in the next Part I will automate the deployment process using github actions.
Prerequisites
I won't talk much about about basic initialization as you already know what to do! I am skipping the basics, make sure to initialize them such as:
Lets jump into the project configuration part
Step 1: Configure Your Project for GitHub Pages
When deploying to GitHub Pages, we need to specify the base URL for our application. GitHub Pages serves the site from a subpath based on the repository name(which we created at the beginning), so it's important to adjust the base configuration.
Open vite.config.js and add the base configuration. Replace <your-repository-name> with your actual repository name.
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '/<your-repository-name>/', // Add this
...
//rest you the code
})
You may leave the rest of your code alone, and in production, your links will be automatically prefixed with /<your-repository-name>/.
Let's suppose our repository name is Portfolio. In that case, our project prefix is: /Portfolio/.
This is how our vite.config.js will look like:
Run the build command to prepare the app for deployment:
npm run build
This will generate the optimized static files inside the dist/ folder in your project.
Step 3: Deploy to GitHub Pages
Let's assume that you already push your local repository to the Github(if not, do it now using git push -u origin main).
We need to push all contents of the dist folder to a gh-pages branch of your project. We can do it yourself in the same way you push code to github. Or, lets just follow these commands to push them efficiently.
git subtree push --prefix dist origin gh-pages
This command will push your files & folders from /dist folder to a new or existing gh-pages branch.
Check yor git repository's branch list, you will see a new branch named gh-pages if you executed it for the first time.
It will automatically update the settings, Your site should now be live at:
https://<username>.github.io/<your-repository-name>/
In my case, as my repository name is Portfolio & my username(check your's at profile setting page) is ishmamabir, my url is:
We have successfully published our vuejs3 project to our github pages!
Now I can access this website from anywhere and any device
Alternative to Step 3 !! Install the gh-pages node module
To easily deploy the dist/ folder to GitHub Pages, you can use the gh-pages package. Its easy, shortcut and reduces the hassle of Step 3
5.1: Install gh-pages
Install gh-pages as a dev dependency:
npm install gh-pages --save-dev
5.2: Update package.json with Deploy Script
dd the deploy script to package.json to deploy the app to GitHub Pages:
{
"scripts": {
... //previous lines
"deploy": "vite build && gh-pages -d dist"
}
}
alternatively you can also add this. any one will work fine.
{
"scripts": {
... //previous lines
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
}
your package.json will look like this.
5.3: Run the Deploy Command
Finally, deploy the built project to GitHub Pages by running:
npm run deploy
This will automatically push the contents of the dist/ folder to the gh-pages branch of your repository. You have to do nothing after this, and your changes will be visible to the github page.
Now, You can also do it !
This guide will walk you through the process of deploying a Vue.js 3 application built with Vite to GitHub Pages.
In this article first I will deploy a Vuejs project to to github pages. And in the next Part I will automate the deployment process using github actions.
Prerequisites
- GitHub Account - We need a GitHub account to create a repository.
- Vue.js 3 Project - A Vue.js 3 project created using .
- Git - Installed and configured locally.
I won't talk much about about basic initialization as you already know what to do! I am skipping the basics, make sure to initialize them such as:
- create vue project using vite(npm create vite@latest)
- git repository (from git init to git push)
Lets jump into the project configuration part
Step 1: Configure Your Project for GitHub Pages
When deploying to GitHub Pages, we need to specify the base URL for our application. GitHub Pages serves the site from a subpath based on the repository name(which we created at the beginning), so it's important to adjust the base configuration.
Open vite.config.js and add the base configuration. Replace <your-repository-name> with your actual repository name.
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '/<your-repository-name>/', // Add this
...
//rest you the code
})
You may leave the rest of your code alone, and in production, your links will be automatically prefixed with /<your-repository-name>/.
Let's suppose our repository name is Portfolio. In that case, our project prefix is: /Portfolio/.
This is how our vite.config.js will look like:
Step 2: Build the Project
Run the build command to prepare the app for deployment:
npm run build
This will generate the optimized static files inside the dist/ folder in your project.
Step 3: Deploy to GitHub Pages
Let's assume that you already push your local repository to the Github(if not, do it now using git push -u origin main).
We need to push all contents of the dist folder to a gh-pages branch of your project. We can do it yourself in the same way you push code to github. Or, lets just follow these commands to push them efficiently.
git subtree push --prefix dist origin gh-pages
This command will push your files & folders from /dist folder to a new or existing gh-pages branch.
Check yor git repository's branch list, you will see a new branch named gh-pages if you executed it for the first time.
Step 4: Enable GitHub Pages in the Repository Settings
- Go to your GitHub repository.
- Navigate to Settings > Pages.
- In the Source section,select 'Deploy from a branch', then select the 'gh-pages' branch.
It will automatically update the settings, Your site should now be live at:
https://<username>.github.io/<your-repository-name>/
In my case, as my repository name is Portfolio & my username(check your's at profile setting page) is ishmamabir, my url is:
We have successfully published our vuejs3 project to our github pages!
Now I can access this website from anywhere and any device
Alternative to Step 3 !! Install the gh-pages node module
To easily deploy the dist/ folder to GitHub Pages, you can use the gh-pages package. Its easy, shortcut and reduces the hassle of Step 3
5.1: Install gh-pages
Install gh-pages as a dev dependency:
npm install gh-pages --save-dev
5.2: Update package.json with Deploy Script
dd the deploy script to package.json to deploy the app to GitHub Pages:
{
"scripts": {
... //previous lines
"deploy": "vite build && gh-pages -d dist"
}
}
alternatively you can also add this. any one will work fine.
{
"scripts": {
... //previous lines
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
}
your package.json will look like this.
5.3: Run the Deploy Command
Finally, deploy the built project to GitHub Pages by running:
npm run deploy
This will automatically push the contents of the dist/ folder to the gh-pages branch of your repository. You have to do nothing after this, and your changes will be visible to the github page.
This is how easily i deployed my portfolio to the github pages.
Now, You can also do it !