Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Publishing to gh-pages #429

Open
jywarren opened this issue Jul 2, 2022 · 11 comments
Open

Publishing to gh-pages #429

jywarren opened this issue Jul 2, 2022 · 11 comments

Comments

@jywarren
Copy link
Member

jywarren commented Jul 2, 2022

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
Copy link
Member Author

jywarren commented Jul 2, 2022 •
edited
Loading

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
Copy link
Member Author

jywarren commented Jul 2, 2022

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

image

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
Copy link
Collaborator

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
Copy link
Member Author

jywarren commented Jul 2, 2022 via email

@stephaniequintana
Copy link
Collaborator

By :root, I'm referring to:

Screen Shot 2022-07-02 at 7 49 50 AM

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
Copy link
Member Author

jywarren commented Jul 2, 2022 via email

@jywarren
Copy link
Member Author

jywarren commented Jul 2, 2022 via email

@stephaniequintana
Copy link
Collaborator

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
Copy link
Member Author

jywarren commented Jul 2, 2022 via email

@stephaniequintana
Copy link
Collaborator

stephaniequintana commented Jul 2, 2022 •
edited
Loading

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
Copy link
Member Author

jywarren commented Oct 11, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jywarren @stephaniequintana