This gist shows an example of how to mantain both the source (stenciljs example) and the built files of your site in the 'source' and 'master' branch, respectively, in order to deploy the site to Github Pages.
I wanted to deploy my personal site to my dellos7.github.io
Github repo. However, in order to publish the site with Github Pages from your main Github pages repo (this is, <whatever>.github.io
), it is a must from GH Pages to deploy it from the master
branch.. So it is very difficult to easily mantain both the source and the built files for your site (I am talking about the www
folder) in the same repo if you want to deploy it with GH Pages.
So with this method you are able to (thanks to git worktrees):
- Have a
source
branch where you will push the source code of your site (in this example, the source files and folders of the site generated with Stencil). - Have a
master
branch where you will push the built files and folders of your site in order to be able to deploy them in GH Pages. This is actually a second git worktree.
So there we go!
So if you are in a Stencil site, you will have to modify the stencil.config.ts
file.
In the outputTargets
config on the www
folder (type: 'www'
), set the property empty: false
. This is necessary because otherwise stencil will remove the www
folder after each build and the git worktree won't behave as it should.
export const config: Config = {
globalStyle: 'src/global/app.scss',
globalScript: 'src/global/app.ts',
outputTargets: [
{
type: 'www',
empty: false
}
],
plugins: [
sass({
injectGlobalPaths: [
'src/global/app.scss',
]
})
]
};
curl https://gist.githubusercontent.com/Dellos7/379586274556e2a0e8c3fd738fa94524/raw/2480e26d01482fadc3dfeaef645e3e90d31ab320/initialize-stencil-ghpages-repo.sh --output initialize-stencil-ghpages-repo.sh
chmod +x initialize-stencil-ghpages-repo.sh
./initialize-stencil-ghpages-repo.sh
Run the deploy-site-to-master.sh
script in order to successfully deploy your built site to the master
branch
curl https://gist.githubusercontent.com/Dellos7/379586274556e2a0e8c3fd738fa94524/raw/2480e26d01482fadc3dfeaef645e3e90d31ab320/deploy-site-to-master.sh --output deploy-site-to-master.sh
chmod +x deploy-site-to-master.sh
./deploy-site-to-master.sh
It is also useful to set up a script to your
package.json
in order to launch the deploy command. Just set a new script under thescripts
section of thepackage.json
with this content:"deploy": "npm run build && cd www && git add --all && git commit -m \"deployed site to master\" && git push --set-upstream origin master && cd .."