'Deploying Git Hub Pages project where project (index.html) is not root folder

I have a github repository which I use gruntjs to build my static site. This builds all the files to a dist folder (that is a folder not in the root). So the index.html file and all the contents is in /dist folder

Currently I copy the content of dist folder to another github repository ( so contents is in root) so I can push out as a github page which is obviously bad due to manual prone errors.

Ideally I would just like to push my project containing the dist folder to gh-pages and somehow tell github to read from dist folder rather then root. Is this possible and how can I make it work.

Solution 1:^[1]

I'm not familiar with how GH pages work, but I suspect you could make the dist folder your git repository (and not the parent dir), that would allow you to push directly.

Solution 2:^[2]

One approach would be to use redirection. If your root is in some/other/folder, then you can create a top-level index.html like this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Redirecting</title>
        <meta http-equiv="REFRESH" content="0;url=some/other/folder">
    </head>
    <body>
        <center>
            Redirecting to the real root folder.
        </center>
    </body>
</html>

Obviously you don't have to include anything between the <body> and </body> tags.

The only downside is that the extra directory names will show up as part of the URL in the browser. But if the path is long, you can shorten it with a symbolic link.

Solution 3:^[3]

Option 1: Workaround

In GitHub Pages, you can choose the directory to be published in the settings:

Go to your repo -> Settings -> Pages -> Source

Then you should be able to select the branch and folder (more freely, e.g., you can choose the /docs-folder). Might only be a workaround, but you could try that.

Option 2: `push-dir`

Take a look at the npm package push-dir. You can install it with npm i -D push-dir (-D flag for --save-dev = only for development) and then, following the docs, you can run the command:

push-dir --dir=dist --branch=gh-pages

Of course, you could change the directory to build or another directory in your project, where your built files are. The branch specifies which branch to push to; that way, you can maintain the code on the master/main-branch, while the gh-pages-branch is deployed. The branch to deploy can be changed in the GitHub Pages settings (your repo -> Settings -> Pages -> Sources).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jan HanÄiÄ
Solution 2	Neil Steiner
Solution 3	STh

'Deploying Git Hub Pages project where project (index.html) is not root folder

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]