DEV Community

Mindaugas Januška
Mindaugas Januška

Posted on

Part 4: Deploy VueJS project to GitHub pages for live version

Table Of Contents

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.

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.

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!

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
Enter fullscreen mode Exit fullscreen mode

Step 2

Navigate to gitignore file and remove dist folder from the list:

gitignore file remove dist

Step 3

Create vue.config.js file in the root level of your project and paste following code:

module.exports = {
    publicPath: '/list-with-products/'
}
Enter fullscreen mode Exit fullscreen mode

It should look like that:

vue config file

Step 4

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

history: createWebHistory('/list-with-products/'),
Enter fullscreen mode Exit fullscreen mode

And there is a file to be altered at line 19:

Step 5

Build production version of the project:

npm run build
Enter fullscreen mode Exit fullscreen mode

As you might noticed dist folder were created:

Image description

Step 6

Stage all changes:

stage all changes

Step 7

Commit all changes:

commit message and commit

Step 8

Push dist folder to the gh-pages remote branch on GitHub:

git subtree push --prefix dist origin gh-pages
Enter fullscreen mode Exit fullscreen mode

Step 9

Congrats! Your project now is live! You can inspect it by navigating to Settings -> Pages:

is deployed

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.

Top comments (0)