host github pages from /dist folder in master branch

You can't do it this way.

GitHub pages can be hosted from either:

• the / folder in the master branch
• the / folder in the gh-pages branch
• the /docs folder in the master branch

But the user pages must be built from the / folder in the master branch.

TIP

Code on another branch than the master. After every push to this branch, build it in any CI/CD tool and push it back to the master branch.

Configuring a publishing source for GitHub Pages (very limited)

While you can select a folder as the source for gh-pages, you can only do so for the /docs directory at the parent level, and you still have to actually commit the built files in order to do so, which means you'll have to override the .gitignore and commit them twice

Automated Deploy Scripts

If you're using npm, there are a couple packages that handle publishing sub-directories to gh-pages. Install with option --save-dev to add it to your devDependencies:

• push-dir

  # install
  $ npm install push-dir --save-dev
  
  # usage
  $ push-dir --dir=dist --branch=gh-pages
  

• gh-pages

  # install
  $ npm install gh-pages --save-dev
  
  # usage
  $ gh-pages -d dist
  

In either case, if get a command line tool working for you and get it configured with the right options, you can alias it in your package.json like this:

"scripts": {
  "deploy": "npm run build && gh-pages -d dist"
}

Further Reading:

• Deploying a subfolder to GitHub Pages
• Deploy Vue to GitHub pages-the easy way!