Search code examples
githubgithub-pages

How to host a webpage if the index.html is in “public” folder

I have tried to host a static web page that is developed using vuejs. But i have my index.html is in the /public folder.

At first, when GitHub gave me the URL, that was just loading the content from readme.md, I supposed it was because I didn't have any index.html in the root folder.

https://aakashbashyal21.github.io/JobListing/

Later I created a dummy index.html in the root directory to redirect to the public folder by adding:

<meta
  http-equiv="refresh"
  content="0; url=https://aakashbashyal21.github.io/joblisting/public/index.html"
/>

But after adding the index.html now it gives me an error as Site, not found.

I have set my repository as:

enter image description here

Is there any option to host a webpage if the index.html is in the “public” folder? Alternatively is there any other option for doing that without doing any re-direction?

Solution

  • Thanks VonC for pointing me in the right direction with the solution, finally I was able to solve these issues. So, I wanted to document the solution with the step I did to figure out this issue.

    Step 1. Firstly, I created a vue.config.js in the project root directory and Set the correct publicPath in vue.config.js.

    Explanation extracted from https://cli.vuejs.org/guide/deployment.html#github-pages

    If you are deploying to https://<USERNAME>.github.io/, you can omit publicPath as it defaults to "/". If you are deploying to https://<USERNAME>.github.io/<REPO>/, (i.e. your repository is at https://github.com/<USERNAME>/<REPO>), set publicPath to "/<REPO>/".

    For example, if your repo name is "my-project", your vue.config.js should look like this:

    // vue.config.js file to be place in the root of your repository

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

    Step 2: Build my project using npm build

    Step 4: Removed the dist directory from the project’s .gitignore file

    Step 3: Run git add dist

    Step 4: Run git commit -m 'adding dist subtree'

    Step 5: Use subtree push to send it to the gh-pages branch on GitHub. git subtree push --prefix dist origin gh-pages Source: https://gist.github.com/cobyism/4730490

    Credits:

    1. https://levelup.gitconnected.com/how-to-deploy-your-vue-app-to-github-pages-897136799e19