Part 4: Deploy VueJS project to GitHub pages for live version
Tags: vue, github, javascript, tutorial
Published: 2022-02-12 12:12:00

---
series: "Lightning fast build VueJS 3 project and deploy it free of charge to GitHub pages"
---

## Table Of Contents
* [Clone GitHub repository if you have jumped straight to the `Part 4` of this series](#chapter-0)
* [What is done so far?](#chapter-1)
* [Quick overview](#chapter-2)
* [Step 1: Create new git branch and checkout to it](#chapter-3)
* [Step 2: Remove `dist` folder from `gitignore` file](#chapter-4)
* [Step 3: Create `vue.config.js` file](#chapter-5)
* [Step 4: Alter file at `/src/router/index.js/`](#chapter-6)
* [Step 5: Build production version of the project](#chapter-7)
* [Step 6: Stage all changes](#chapter-8)
* [Step 7: Commit all changes](#chapter-9)
* [Step 8: Push `dist` folder to the `gh-pages` remote branch on GitHub](#chapter-10)
* [Step 9: Enjoy live version of website](#chapter-11)
* [IMPORTANT NOTICE](#chapter-12)

<a name="chapter-0"></a>
### Clone GitHub repository if you have jumped straight to the Part 4 of this series

If you haven't followed all parts of the tutorial, but jumped straight to this part you might consider to clone public GitHub repository with project finished and ready to be deployed to GitHub pages. There is a link to the [public GitHub repo](https://github.com/mindaugas-pro/list-with-products).

<a name="chapter-1"></a>
### What is done so far?
Hence, so far I have done: 

- created new empty project on GitHub. 

- cloned remote GitHub repository to my local computer.

- created new template `Vue 3` project on my local computer.

- pushed initial template `Vue 3` code from my local computer to the remote repository on GitHub.

- created a demo website with a list of products.

- pushed all code changes to the remote repository on GitHub.

<a name="chapter-2"></a>
### Quick overview

Now I am going to deploy `Vue 3` demo website `list-with-products` to GitHub Pages to make it available online.

I am going to create a new `git` repository on my local computer, because: 
1. I need to create `dist` folder and push (commit) it to the remote `gh-pages` branch on GitHub.
2. By default `dist` folder is included to `.gitignore` file to avoid poluting `master` branch.
3. I want my `master` branch to be clean and clear.

So, let's get started on the action!

<a name="chapter-3"></a>
### Step 1
Open a project with code editor. 
In your code editor's console type `git branch` to make sure that you are in `*master` or `*main` repository.
Create a new `git` branch with the name `dist` and checkout to it:

```
git checkout -b dist
```

<a name="chapter-4"></a>
### Step 2
Navigate to `gitignore` file and remove `dist` folder from the list:

![gitignore file remove dist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b186v2gc2p448pqz54j.png)

<a name="chapter-5"></a>
### Step 3
Create vue.config.js file in the `root` level of your project and paste following code:

```
module.exports = {
    publicPath: '/list-with-products/'
}
```
It should look like that:

![vue config file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yap5nbslryv008uwc2je.png)

<a name="chapter-6"></a>
### Step 4

Alter file at `/src/router/index.js/`, i.e. replace `line 19` with the following code:

```
history: createWebHistory('/list-with-products/'),
```
And there is a file to be altered at `line 19`:

{% gist https://gist.github.com/mindaugas-pro/361da0941d997b8275d64fdc9cbb7b9f %}

<a name="chapter-7"></a>
### Step 5
Build production version of the project:

```
npm run build
```
As you might noticed `dist` folder were created:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3k1wxlh9rnktpcnpnne.png)

<a name="chapter-8"></a>
### Step 6 
Stage all changes:

![stage all changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32sk6cf1hzbtcj2pc76p.png)

<a name="chapter-9"></a>
### Step 7
Commit all changes:

![commit message and commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igsooa7cra2aiho4mkzj.png)

<a name="chapter-10"></a>
### Step 8 
Push `dist` folder to the `gh-pages` remote branch on GitHub:

```
git subtree push --prefix dist origin gh-pages
```
<a name="chapter-11"></a>
### Step 9
Congrats! Your project now is live! You can inspect it by navigating to `Settings -> Pages`:

![is deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmmej81eoxfm7vpj2ttc.png)

<a name="chapter-12"></a>
### IMPORTANT NOTICE

Please be patient and wait several minutes if your website will not become available online after you will push a code to the `gh-pages` remote branch on GitHub. From my own experience I can say, that sometimes it might take up to 5 minutes for the website to become available online.