Discussion on: Deploy to Github Pages like a pro with Github Actions

[Brent McSharry]

Thank you for posting this great article. Just a few additional notes you might even want to put in the article.
1) I am fairly sure github pages has no way of implementing History mode, so it is important that if you are using the Vue router, it is set like so

export default new Router({
  mode: 'hash',

2) For the script to deploy to github pages from the local machine, I would advise checking if there are uncommitted changes first with something like

    try {
        await execa("git", ["update-index", "--refresh"]); 
        const { stdout } = await execa("git", ["diff-index", "HEAD"]);
        if (stdout) {
            console.log("Please stash or commit changes first!");
            process.exit(1);
        }
   }

3) It might be worth putting the final git commands in a finally block so you always end up back on master. Also note below the rm command is replaced by rimraf - rm is platform specific (and certainly will not work on Windows) and rimraf deals with this for us.

   const rmrf = promisify(rimraf);
    let exitCode = 0;
    try {
        await execa("git", ["checkout", "--orphan", "gh-pages"]);
        console.log("Building...");
        await execa("yarn", ["run", "build-modern"]);
        // Understand if it's dist or build folder
        const folderName = existsSync("dist") ? "dist" : "build";
        await execa("git", ["--work-tree", folderName, "add", "--all"]);
        await execa("git", ["--work-tree", folderName, "commit", "-m", "gh-pages"]);
        console.log("Pushing to gh-pages...");
        await execa("git", ["push", "origin", "HEAD:gh-pages", "--force"]);
        await rmrf(folderName, { glob: false })
        console.log("Successfully deployed");
    } catch (e) {
        console.log(e.message);
        exitCode = 1;
    } finally {
        await promises.writeFile(configFilePath, originPublicPath, fileOpts);
        await execa("git", ["checkout", "-f", "master"]);
        await execa("git", ["branch", "-D", "gh-pages"]);
    }
    process.exit(exitCode);

[MI Shajib]

Thank you very much. It helped me very much.

[Roland Doda]

Glad to read that it helped you 🎉.
If you are using vue.js though I have created a vue-cli plugin which automates everything and it's literally a zero-config solution. Check it out -> github.com/Rolanddoda/vue-cli-plug....
I have in mind some improvements to do there but haven't found the time yet.

[Roland Doda]

Hi Brent and thank you for this comment.

As I said in the end of the article, I want to keep the script very minimal so anyone understands it and can modify it. There is so many things to add to that script and to the whole article itself, but I wanted to go with simplicity.

Here are my answers to your notes:

1) There is a way to get the History mode work with github pages. See -> github.com/Rolanddoda/vue-router-g...
However, going with hash mode, is something that you can easily do, but it's out of the scope of this article on automating deployment to github pages by using github actions. (I would had to talk about vue router history mode and hash mode).

2) It's worth noting that the script will run in github actions environment after you have pushed on master. So no need to check for uncommitted changes.

3) For the same reason as on the second note, no need to add a finally block and also the rm command will run in ubuntu as I've defined in the github actions workflow.

Again, there are so many things to add on that article but I want to keep it simple so anyone can easily extend it. I hope I have helped people on how to take advantage of github actions and github pages.

Thanks for taking the time to comment Brent,
With Respect, Roland.