{"componentChunkName":"component---src-templates-post-tsx","path":"/posts/2019/08/gh-pages/","result":{"data":{"markdownRemark":{"fields":{"slug":"/2019/08/gh-pages/"},"frontmatter":{"title":"Publish static websites to GitHub Pages (or any Git) cleanly with gh-pages","tag":["gh-pages","GitHub Pages","heroku"],"image":"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQFKi5a1hzYykg3TJiYcMvOJa2mjhRwSXxX2LCRPC-TfoUIc5TB"},"correctedDateEpoch":1565974800000,"html":"

This is as simple as npm run build && gh-pages -d dist, and there will be no pollution from build remnants. You can safely as /dist/ to .gitignore.

\n

The new branch called gh-pages will be created, with only built elements, no other code.

\n

See the package here https://www.npmjs.com/package/gh-pages

\n\n

To publish elsewhere, e.g. Heroku, it can be more complex. I resorted to a Node script, rather than CLI.

\n
const ghPages = require(\"gh-pages\");\nconst fs = require(\"fs\");\nconst {spawnSync} = require(\"child_process\");\nconst rimraf = require(\"rimraf\");\n\nrimraf.sync(\"node_modules/gh-pages/.cache\")\n\nspawnSync(\"npm\", [\"run\", \"build\"], {\n  stdio: \"inherit\"\n});\n\nfs.writeFileSync(\"public/index.php\", \"<?php header( 'Location: /index.html' ) ;  ?>\");\n\nghPages.publish(\"public\", {\n  branch: \"master\",\n  repo: \"https://git.heroku.com/<BLAHBLAH>.git\"\n}, (err) => {\n  if (err) {\n    console.error(err);\n    return;\n  }\n\n  console.log(\"Posted to https://<BLAHBLAH>.herokuapp.com\")\n});\n
\n

One of the reasons is that Heroku requires a buildpack. At least a PHP file (index.php) with <?php header( 'Location: /index.html' ) ; ?> is sufficient to trigger this.

\n

In reality, what I am using this for? -- https://zhdiary.herokuapp.com, with Cogear.js

"}},"pageContext":{"slug":"/2019/08/gh-pages/"}}}