Similar to my
How Do I Get My Create-React-App Portfolio on Github Working, the documentation on how to edit it on the Github Platform and on my local machine and get the changes/edits to show up on the live version didn't exist.
Brian Mock (@wavebeem on twitter) took the time to work with me to figure out how to get my edits to show up.
It took a lot of time to figure out the right commands - it was a joint effort trying to figure them out as we both read through git documentation and create-react-app documentation to try and piece together this puzzle and I wanted to write it out because I don't want anyone to struggle like I did and contemplate chucking their laptop out a window.
There are two sections - jump to which one you need!
Making Your Changes/Edits on the Github Platform
Making Your Changes/Edits on Your Local Machine
_____
Making Your Changes/Edits on the Github Platform
*after making your edits*
Step 1: Open up your project folder that's on Github on your local machine in terminal
The path to my folder: documents -> Github -> saharafathelbab.github.io
The commands to get to my directory:
cd documents
cd Github
cd my-repository-folder-name-here.
Now you should be in your project folder
Step 2: Check you are in the right branch
Automatically, you should be on the branch that includes package-lock.json, package.json, public folder, README.md, src folder.
How do you check what branch you are in?
On mac - click your finder icon on your dock, and go through the path to get to your project folder. As I mentioned above, the path to my project folder is: documents -> Github -> saharafathelbab.github.io.
In your project folder, if you do not see package-lock.json, package.json, public folder, README.md, src folder then you are on the wrong branch. [You may see asset-manifest.json, favicon.ico, index.html, logo192.png, logo512, manifest.json, robots.txt, static folder instead)
How to change the branch you're on:
In terminal the command you type is:
git checkout latest*
*latest: the name of my branch that includes package-lock.json, package.json, public folder, README.md, src folder. To learn more of why that is:
How Do I Get My Create-React-App Portfolio on Github Working
After you run that command, click back to your folder you got to via finder - it should now show package-lock.json, package.json, public folder, README.md, src folder signifying that is the branch you are currently on.
Step 3: We need to pull our edits we made on GitHub to our local machine
In terminal the command is:
git pull
After you run this command, you will see a mini summary of what file you edited.
You may see an Untracked file warning with .DS_Store however that's okay! It is there! Git is playing games (on a real note - check your .gitignore file and you should see .DS_Store under #misc in the event Git is in fact not playing games).
Step 4: We need to install gh-pages packages.
We only need to do this once - this installs the gh-pages packages.
In terminal, the command is:
npm install -D gh-pages
Step 5: We need to run npm install
In terminal, the command is:
npm install
You may remember doing this over on your local machine to view your project on localhost.
After this you may notice a few new additions in your folder via finder, what should be in there now: build folder, node_modules folder, package-lock.json, package.json, public folder, README.md, src folder.
Step 6: Run a command to check the status of the branch
As I mentioned above, your folder got some new additions! Now we have to commit all of that stuff to our actual GitHub folder online
In terminal the commands you type is:
git status
git add -A
git commit -m "some message"
git status
Shows you the status of your branch - if you've made any changes this is where git will show that you have some edits/file changes.
git add -A
Adds all new and updated files to the staging area
If I bring my analogy from my previous post -
How Do I Get My Create-React-App Portfolio on Github Working- to explain this:
You have a dozen packages you're delivering to this one house, and when you get to the house, you take the packages out of the truck and add all of them to the patio area i.e. the staging area
git commit -m "some message"
Commits the change with a short message on the change you made
Keeping up with the story above, you ring the door bell and someone answers the door. They need to sign their name on a device before you can hand them their packages they ordered.
the
-m means message and in quotations is the message relating to what you're planning to push onto GitHub.
When you run the last command, you should see something along the lines appear in terminal:
1 file changed, 1 insertion (+), 1 deletion (-)
Now let's push our edits (i.e our additions via running npm install) to our actual GitHub folder online
The terminal command is:
git push
Keeping up with the story above: The person signs their name and finally you can give them their packages to take in their home.
The "message" that you're typing shows up like this on Github:
Step 7: Run the commands to run build + send all changes from 'latest' branch into 'master'
As I mentioned before, the branch latest for me is the one that has build folder, node_modules folder, package-lock.json, package.json, public folder, README.md, src folder.
In terminal, the command you type is:
npm run build
npx gh-pages -- branch master -d build
AND TADA - you should be met with one single word in terminal: Published. You may need to go into chrome incognitio to see your changes immediately - takes a bit to show up on just regular!
Also, when you run
npm run build it may take a while!!! The same goes for
npx gh-pages -- branch master -d build it'll take a good few seconds!
Let's talk about that second command if you're wondering where it came from:
npx gh-pages -- branch master -d build sends all your changes from 'latest' into 'master'.
Now let's break it down further:
npx gh-pages - If you remember earlier, we ran the npm install -D gh-pages to install gh-pages packages. So that's us using gh-pages package.
branch master - The branch we are sending all our changes to is master.
-d build - directory, build folder. Remember earlier when we ran npm install we had a new addition of a build folder.
A mini tangent if you're curious by the phrasing "send all changes from 'latest' branch into 'master'":
As Brian was mentioning to me when I asked about sending all changes from 'latest' branch into 'master' - you can imagine "master" branch as having everything from "latest" branch public folder but on this top tier special level. The way I kept thinking of it was that if the public folder in latest should also be included in the master branch that would mean that there will be duplicates of index.html and logos as well but that is not the case! It is in it's own special league!
After this first-time-editing on your Github Platform, the next time you make an edit on the GitHub Platform and would like for it to show up live you just need to go through the following commands after you've made your edits:
Step 1: Open up your project folder that's on Github on your local machine in terminal
The path to my folder: documents -> Github -> saharafathelbab.github.io
The commands to get to my directory:
cd documents
cd Github
cd my-repository-folder-name-here
Now you should be in your project folder
Step 2: Pull your edits you made on GitHub onto your local machine
git pull
Step 3: Run the commands to run build + send all changes from 'latest' branch into 'master'
npm run build
npx gh-pages -- branch master -d build
AND TADA - you should be met with one single word in terminal: Published.
____________________________________
Making Your Changes/Edits on Your Local Machine
Step 1: Open up your project folder that's on Github on your local machine in terminal
The path to my folder: documents -> Github -> saharafathelbab.github.io
The commands to get to my directory:
cd documents
cd Github
cd my-repository-folder-name-here
Now you should be in your project folder
Step 2: Check you are in the right branch
Automatically, you should be on the branch that includes package-lock.json, package.json, public folder, README.md, src folder.
How do you check what branch you are in?
On mac - click your finder icon on your dock, and go through the path to get to your project folder. As I mentioned above, the path to my project folder is: documents -> Github -> saharafathelbab.github.io.
In your project folder, if you do not see package-lock.json, package.json, public folder, README.md, src folder then you are on the wrong branch. [You may see asset-manifest.json, favicon.ico, index.html, logo192.png, logo512, manifest.json, robots.txt, static folder instead)
How to change the branch you're on:
In terminal the command you type is:
git checkout latest*
latest*: the name of my branch that includes package-lock.json, package.json, public folder, README.md, src folder. To learn more of why that is:
How Do I Get My Create-React-App Portfolio on Github Working
After you run that command, click back to your folder you got to via finder - it should now show package-lock.json, package.json, public folder, README.md, src folder signifying that is the branch you are currently on.
Step 3: We need to install gh-pages packages.
We only need to do this once - this installs the gh-pages packages.
In terminal, the command is:
npm install -D gh-pages
Step 4: We need to run npm install
In terminal, the command is:
npm install
You may remember doing this over on your local machine to view your project on localhost.
After this you may notice a few new additions in your folder via finder, what should be in there now: build folder, node_modules folder, package-lock.json, package.json, public folder, README.md, src folder.
Step 5: Minimize your terminal window and Open your editor up (Atom, VSCode, whatever you coded in!) and open up your project folder that is currently in your Github folder
When you open your editor, click File -> Open and go through the path to get to your project folder. The path to my project folder is: documents -> Github -> my-project-folder
open my-project-folder in your editor and make your edits AND SAVE YOUR EDITS.
On mac: CMD + S
If you are trying to locate your react components + Main.js file: click the src folder and you'll see a list of all your react components and your Main.js file.
Step 6: Bring back your terminal window your minimized and check the status of your branch to see if git saw a change has been made
Once I saved my changes, in terminal I first ran the command:
git status
I use this as a double-check: This command shows you the status of your branch. If you've made any changes this is where git will show that you have some edits/file changes. I wanted to see if git saw an edit has been made; it did!
🎉
Step 7: Add all new and updated files to the staging area
The terminal command is:
git add -A
If I bring my analogy from my previous post -
How Do I Get My Create-React-App Portfolio on Github Working- to explain this:
You have a dozen packages you're delivering to this one house, and when you get to the house, you take the packages out of the truck and add all of them to the patio area i.e. the staging area
Step 7: Commit the change with a short message on the change you made
The terminal command is:
git commit -m "some message"
Keeping up with the story above, you ring the door bell and someone answers the door. They need to sign their name on a device before you can hand them their packages they ordered.
the
-m means message and in quotations is the message relating to what you're planning to push onto GitHub.
Step 8: Push all of our edits with the commit message onto Github
The terminal command is:
git push
Keeping up with the story above: The person signs their name and finally you can give them their packages to take in their home.
The "message" that you're typing shows up like this on Github:
Step 9: Run the commands to run build + send all changes from 'latest' branch into 'master'
In terminal, the command you type is:
npm run build
npx gh-pages -- branch master -d build
AND TADA - you should be met with one single word in terminal: Published. You may need to go into chrome incognitio to see your changes immediately - takes a bit to show up on just regular!
Also, when you run
npm run build it may take a while!!! The same goes for
npx gh-pages -- branch master -d build it'll take a good few seconds!
Let's talk about that second command if you're wondering where it came from:
npx gh-pages -- branch master -d build sends all your changes from 'latest' into 'master'.
npx gh-pages - If you remember earlier, we ran the npm install -D gh-pages to install gh-pages packages. So that's us using gh-pages package.
branch master - The branch we are sending all our changes to is master.
-d build - directory, build folder. Remember earlier when we ran npm install we had a new addition of a build folder.
A mini tangent if you're curious by the phrasing "send all changes from 'latest' branch into 'master'":
As Brian was mentioning to me when I asked about sending all changes from 'latest' branch into 'master' - you can imagine "master" branch as having everything from "latest" branch public folder but on this top tier special level. The way I kept thinking of it was that if the public folder in latest should also be included in the master branch that would mean that there will be duplicates of index.html and logos as well but that is not the case! It is in it's own special league!
After this first-time-editing on your local machine, the next time you make an edit on your local machine and would like for it to show up live you just need to go through the following commands after you've made your edits:
Step 1: Open up your project folder that's on Github on your local machine in terminal
The path to my folder: documents -> Github -> saharafathelbab.github.io
The commands to get to my directory:
cd documents
cd Github
cd my-repository-folder-name-here
Now you should be in your project folder.
Step 2: Check the status of your branch to see if git saw a change has been made
git status
Step 3: Add all new and updated files to the staging area
git add -A
Step 4: Commit the change with a short message on the change you made
git commit -m "some message"
Step 5: Push all of our edits with the commit message onto Github
git push
Step 6: Run the commands to run build + send all changes from 'latest' branch into 'master'
npm run build
npx gh-pages -- branch master -d build
AND TADA - you should be met with one single word in terminal: Published.
I hope this documentation was helpful to anyone who is out there googling how to make edits to your react.js portfolio - this is only my second documentation post so I hope I explained everything well!
