Publishing to gh-pages

[jywarren]

Hi @stephaniequintana i'm documenting my steps here. I started in my own fork, https://github.com/jywarren/infragram/, and aiming to publish the latest https://github.com/publiclab/infragram/ main branch, and i'll comment the lines below to explain as I go.

gitpod /workspace/infragram (main) $ git checkout gh-pages # start in the gh-pages branch
Updating files: 100% (24056/24056), done.
branch 'gh-pages' set up to track 'upstream/gh-pages'.
Switched to a new branch 'gh-pages'
gitpod /workspace/infragram (gh-pages) $ git merge main # merge in the main branch on top of the gh-pages branch 
Auto-merging README.md
Auto-merging index.html
CONFLICT (content): Merge conflict in index.html # OK, here 3 files conflicted, which is OK. they are small conflicts and easy to manually fix
Auto-merging package-lock.json
CONFLICT (content): Merge conflict in package-lock.json
Auto-merging package.json
CONFLICT (content): Merge conflict in package.json
Automatic merge failed; fix conflicts and then commit the result.
gitpod /workspace/infragram (gh-pages|MERGING) $ vi package.json # here i removed the older dependencies
gitpod /workspace/infragram (gh-pages|MERGING) $ vi index.html # here was just a single line difference, i confirmed which was more recent and went with that
gitpod /workspace/infragram (gh-pages|MERGING) $ npm install # here it'll generate an updated package-lock.json from our deconflicted package.json
gitpod /workspace/infragram (gh-pages|MERGING) $ git status # just checking; this also showed many npm modules added + removed which is OK as our dependencies have changed
gitpod /workspace/infragram (gh-pages|MERGING) $ git add package* index.html # adding all 3 files
gitpod /workspace/infragram (gh-pages|MERGING) $ git merge --continue # picking back up on the merge we're still in the middle of
gitpod /workspace/infragram (gh-pages) $ git log # confirming that the new commits are now in the history
gitpod /workspace/infragram (gh-pages) $ git push -f https://github.com/jywarren/infragram.git  HEAD:gh-pages # ok, force pushing this up to my fork's gh-pages remote branch
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 16 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 29.43 KiB | 4.20 MiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
remote: 
remote: Create a pull request for 'gh-pages' on GitHub by visiting:
remote:      https://github.com/jywarren/infragram/pull/new/gh-pages
remote: 
To https://github.com/jywarren/infragram.git
 * [new branch]      HEAD -> gh-pages

OK, so now I think i'm in the same position you were -- https://jywarren.github.io/infragram/index2.html doesn't load any of the node_modules folder.

[jywarren]

OK, wait... this is a mystery... so first i noticed that right now, neither https://github.com/stefq2/infragram/tree/gh-pages and https://github.com/stephaniequintana/infragram/tree/gh-pages have the latest commits (like json changes). So I'm just referencing my own published gh-pages at https://jywarren.github.io/infragram/

So the mystery is - https://jywarren.github.io/infragram/index2.html doesn't load node_modules - for example it shows an error for

However, https://jywarren.github.io/infragram/ DOES WORK 😱 and does load node_modules -- even after i hard refreshed and cleared cache, and checked https://github.com/jywarren/infragram/settings/pages, so it's not a mistake. The bootstrap file loaded fine for example:

https://jywarren.github.io/infragram/node_modules/bootstrap/dist/js/bootstrap.min.js

OK, so I'm just looking closer... i had assumed we had an issue affecting all node_modules, but actually... the only two errors I see are:

1. https://jywarren.github.io/infragram/dist/infragram2.js
2. https://jywarren.github.io/infragram/node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js

So I think i had just assumed wrong. The issue is that bootstrap5, added via package.json, wasn't actually added into the gh-pages branch. We need to manually add it since the node_modules folder is ignored (see /.gitignore file) since usually, outside gh-pages, we don't actually git track it. I forgot that step. So now in my own branch, i'm going to do:

$ git add -f node_modules # actually just add/remove ALL updates to this directory
$ git commit -m 'adding bootstrap 5 files'

This extra commit will exist only on the gh-pages branch, because that's the only place we need to host external npm includes like bootstrap. All other places will rely on npm install to install them during setup. It adds a TON of files, which is one reason we don't track these on the main branch. And actually i should have thought of this when we saw them all in git status above... since they were marked in red that means they haven't been included in any commits. So they were never sent up to the gh-pages remote branch.

What about infragram2.js? Oh, actually i see it wasn't included in b43a0f4 - in #426. So @stephaniequintana i think you need to add that in a new PR, sorry we missed that!

[jywarren]

OK, now watching https://github.com/jywarren/infragram/settings/pages and it's blue... and on refresh it's green and all published.

And it works!!! https://jywarren.github.io/infragram/index2.html

OK, so you can follow the steps above if you like, OR you can just git pull https://github.com/jywarren/infragram.git gh-pages from your gh-pages branch... I think that'll work? You might need to git checkout gh-pages and git reset --hard 42db8b1c86a3c31c6e1d0d3cebfab494377d9828 first to rewind your gh-pages before @TildaDares's commits. But it might just work without that.

Sorry for missing the step of force-adding your node modules folder to gh-pages! It's been a while since I did this!!! It's also super exciting to see this working now!!!! Great work!!

[stephaniequintana]

Thank you, @jywarren

I took the shortcut you offered above and reset then pulled from your gh-pages branch.
My own gh-pages branch now points to the same commit as yours and bootstrap 5 is listed in the node modules folder, but the neither the main nor the v2_functions_connect branch are loading the modules for
https://stephaniequintana.github.io/infragram/ or for
https://stephaniequintana.github.io/infragram/index2.html

Although each time I switch the :root branch it takes a while to turn from blue to green, neither are building correctly. I went through each step, but must cannot discern what I've missed - I'm hoping since it's fresh on your mind you may be able to (?)

[jywarren]

Hmm, are you building it from the gh-pages branch? That's the branch with the modules, so it should be the root.

…

On Sat, Jul 2, 2022, 3:43 PM Stephanie Quintana ***@***.***> wrote: Thank you, @jywarren <https://github.com/jywarren> I took the shortcut you offered above and reset then pulled from your gh-pages branch. My own gh-pages branch now points to the same commit as yours and bootstrap 5 is listed in the node modules folder, but the neither the main nor the v2_functions_connect branch are loading the modules for https://stephaniequintana.github.io/infragram/ or for https://stephaniequintana.github.io/infragram/index2.html Although each time I switch the :root branch it takes a while to turn from blue to green, neither are building correctly. I went through each step, but must cannot discern what I've missed - I'm hoping since it's fresh on your mind you may be able to (?) — Reply to this email directly, view it on GitHub <#429 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J4NLZDQINAAXWCJK2DVSA2P7ANCNFSM52OX3XSA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[stephaniequintana]

By :root, I'm referring to:

Here, I've always selected the branch I want published and assumed that the gh-pages branch was reference for the build.

Is this what you mean, that I need to change this :root to the gh-pages branch? Curious.

[jywarren]

Yes that's right! GitHub pages is weird but the trigger to build is supposed to be pushing to the selected branch; the ability to choose the root is supposed to be just a configuration you do once and leave as is. Choose gh-pages as the source!

…

On Sat, Jul 2, 2022, 3:54 PM Stephanie Quintana ***@***.***> wrote: By :root, I'm referring to: [image: Screen Shot 2022-07-02 at 7 49 50 AM] <https://user-images.githubusercontent.com/81270711/177001528-03ab8e6b-6904-46ed-8858-85cdf5587fc3.png> Here, I've always selected the branch I want published and assumed that the gh-pages branch was reference for the build. Is this what you mean, that I need to change this :root to the gh-pages branch? Curious. — Reply to this email directly, view it on GitHub <#429 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J6EX5MLIYUZ4NIQHMDVSA3XLANCNFSM52OX3XSA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[jywarren]

Then, what is built and served is the gh-pages branch itself.

…

On Sat, Jul 2, 2022, 4:01 PM Jeffrey Yoo Warren ***@***.***> wrote: Yes that's right! GitHub pages is weird but the trigger to build is supposed to be pushing to the selected branch; the ability to choose the root is supposed to be just a configuration you do once and leave as is. Choose gh-pages as the source! On Sat, Jul 2, 2022, 3:54 PM Stephanie Quintana ***@***.***> wrote: > By :root, I'm referring to: > > [image: Screen Shot 2022-07-02 at 7 49 50 AM] > <https://user-images.githubusercontent.com/81270711/177001528-03ab8e6b-6904-46ed-8858-85cdf5587fc3.png> > > Here, I've always selected the branch I want published and assumed that > the gh-pages branch was reference for the build. > > Is this what you mean, that I need to change this :root to the gh-pages > branch? Curious. > > — > Reply to this email directly, view it on GitHub > <#429 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAAF6J6EX5MLIYUZ4NIQHMDVSA3XLANCNFSM52OX3XSA> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[stephaniequintana]

Ok. WOW! That worked... odd.

Now I'm just confused about how I show/build/display a specific branch. RN it's building the main branch, but how do I share the changes from another branch, like my v2_functions_connect branch? Again, in the past this is where I referenced the branch I wanted built...

[jywarren]

Wait, why is it building the main branch? Well, you can push new commits on top of the gh-pages branch, and sometimes you need to rewind it first if there are conflicts. I think maybe it'll be useful to try to talk through the mental model for how this works, maybe on our Tuesday call? It's a weird system so seeing what it does step by step from what your branches look like will help!

…

On Sat, Jul 2, 2022, 4:06 PM Stephanie Quintana ***@***.***> wrote: Ok. WOW! That worked... odd. Now I'm just confused about how I show/build/display a specific branch. RN it's building the main branch, but how do I share the changes from another branch, like my v2_functions_connect branch? Again, in the past this is where I referenced the branch I wanted built... — Reply to this email directly, view it on GitHub <#429 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J3BISIODNL36VS2AXTVSA5E5ANCNFSM52OX3XSA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[stephaniequintana]

I haven't done that in the past, but it makes perfect sense. Again: curious.
I've definitely learned something today - so THANK YOU for that and I very much appreciate the time you spent on this. Have a great weekend and safe travels 🛸

edit:
sry, it took a while for my thoughts to catch up w/me...

Wait, why is it building the main branch?

I misspoke. It's building the gh-pages branch which are referencing the same files that are in the main branch (I assume b/c before I pulled from your gh-pages branch you had merged with main(?)). At any rate, I do understand what is happening now - pretty sure of that 😄
It is also clear that I misunderstood what specifically was happening "in the past" when I changed the branch to be published. I am no longer "curious" 👍 Thanks again!

[jywarren]

In general I leave the root pointed at gh-pages, the default, and to republish I just push new commits to gh-pages, which triggers republishing.

…

On Sat, Jul 2, 2022, 3:46 PM Jeffrey Yoo Warren ***@***.***> wrote: Hmm, are you building it from the gh-pages branch? That's the branch with the modules, so it should be the root. On Sat, Jul 2, 2022, 3:43 PM Stephanie Quintana ***@***.***> wrote: > Thank you, @jywarren <https://github.com/jywarren> > > I took the shortcut you offered above and reset then pulled from your > gh-pages branch. > My own gh-pages branch now points to the same commit as yours and > bootstrap 5 is listed in the node modules folder, but the neither the main > nor the v2_functions_connect branch are loading the modules for > https://stephaniequintana.github.io/infragram/ or for > https://stephaniequintana.github.io/infragram/index2.html > > Although each time I switch the :root branch it takes a while to turn > from blue to green, neither are building correctly. I went through each > step, but must cannot discern what I've missed - I'm hoping since it's > fresh on your mind you may be able to (?) > > — > Reply to this email directly, view it on GitHub > <#429 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAAF6J4NLZDQINAAXWCJK2DVSA2P7ANCNFSM52OX3XSA> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >