HOW TO: Mantain 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

deploy-site-to-master-on-github-pages.md

Deploy both the source and built site to Github Pages

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.

Why this is useful?

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!

Modify the stencil.config.ts file

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',
      ]
    })
  ]
};

Run the initialize-stencil-ghpages-repo.sh script in order to successfully initialize your repo

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 the scripts section of the package.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 .."

deploy-site-to-master.sh

#!/bin/bash

# This should be your build command, the one that builds up the site
npm run build
# We change to the 'www' directory. If we do right now 'git branch' it should point to the 'master' branch
cd www
# We do a commit and push the deployed site to the 'master' branch
git add --all
git commit -m "deployed site to master"
git push --set-upstream origin master
# Switch back to the main folder of the repo. If we do right now 'git branch' it should point to the 'source' branch
cd ..

initialize-stencil-ghpages-repo.sh

#!/bin/bash

git init
git add .
git commit -m "first commit"
# Change the branch 'master' name to 'source'. In the 'source' branch is where we will deploy the source code of the site 
# (not the deployed one, this one goes in the 'master' branch')
git branch -m source
# Create an orphan branch called 'master', we will use this branch in order to push our deployed site
git checkout --orphan master
# Empty the 'master' branch and do an empty commit
git reset --hard
rm -rf *
#rm -rf .stencil
git add --all
git commit --allow-empty -m "init master branch"
git remote add origin https://github.com/Dellos7/dellos7.github.io.git # Here it goes your repo url
# Switch back to the 'source branch'
git checkout source
# Create an empty www folder. WARNING: from the time being you should avoid removing the 'www' folder
rm -rf www
mkdir www
# Install the dependencies (the checkout will have removed the 'node_modules' folder)
npm i
# Add a new worktree in the 'www' folder onto the 'master' branch
git worktree add www master