Tools Installation Hack

Shell Commands

Question: What shell commands are you using during the installation process? Describe their purpose.

cd: I use this to move between folders in the terminal.
- For example, cd project-directory lets me go into the folder where my project is saved.
git clone : This command downloads a GitHub project to my computer so I can work on it locally.
brew install: On a Mac, this command helps me install different software packages like Python or Node.js.
apt-get install: This is used on Linux to install software packages.

Question: How are the files from GitHub placed on your local machine?

I use git clone to download the files from GitHub onto my computer. **Question**: How do you navigate to those files?
I use the cd command to go into the folder where the files were downloaded, like cd portfolio_2025. Question: How are the files updated in GitHub?
After making changes, I will use the command, git push. And if I want to download the files to latest, then I’ll use git pull. Question: How do you navigate to those files?
After updating, I can view the changes on GitHub by going to the repository’s webpage. Question: How would you update your template of the portfolio_2025 repository? How would you make it more applicable to your specific course?
To make the portfolio_2025 repository fit my course, I’d fork the repository, clone it to my computer, personalize the content, and push the changes back to my GitHub fork.

Question: What is the difference between viewing GitHub Pages running on your localhost machine versus running on a deployed server?

Viewing on localhost means the site is only visible on my computer, useful for testing. A deployed server like GitHub Pages makes the site live, so anyone with the link can see it. Question: What is the localhost URL for your project? Can anyone else see what you see?
My localhost URL might be http://127.0.0.1:4100/student_2025/. Only I can see this since it’s on my machine. Question: What is the GitHub Pages URL for your project? Can anyone else see what you see?
The URL on GitHub Pages would be something like https://username.github.io/repository-name. Anyone with this URL can view the site.
- My deployed website URL is, https://jasonguan1012.github.io/JasonCSA_2025/.

Question: Is there a domain on your GitHub Pages?

By default, GitHub Pages gives a subdomain like username.github.io/repository-name. But I haven’t added a custom domain yet. Question: Is the URL for your GitHub Pages different from your neighbors’ URLs? Did you change the URL? If so, when?
The URL is unique to my project, but it follows the same pattern as other GitHub Pages URLs.
I haven’t changed it, but it’s definitely possible to do so by using a custom domain or either changing the repository name.

Question: Are the tools installed correctly?

Yes, I successfully installed tools like Git, Python, etc… Question: What basic commands did you use to check tool functionality?
I used commands like ‘git –version’ for Git, ‘python –version’ for Python, etc… Question: Did you encounter any issues? If so, how did you resolve them?
Yes I did encountered issues that I couldn’t make. It will give you a error message saying that MakeFile Error 30. At the end I was able to solve it by checking if I have every tools installed.

Tools Version Checks

Question: How did you commit, push, and pull changes using GitHub and VSCode?

In VSCode, I used ‘git push’ to commit my changes, then sync them to GitHub. If someone else made changes, I pulled those updates to my local machine by using the command, ‘git pull’. Question: What challenges did you face, and how did you overcome them?
I ran into a conflict when pulling updates because someone else changed the same file before.
I solved it by manually merging the changes and committing the merge.

Question: How did you create your HTML file, style it with CSS, and modify it with JavaScript?

I could just made a simple HTML file with a <div> container, and I styled it using CSS, adding things like background color and padding. Then I’lll wrote JavaScript to update the content inside the <div> based on user actions.
- For example: Clicking a button. Question: How did you ideate in Jupyter Notebooks?
In Jupyter Notebooks, I would brainstormed different ways to make the contents dynamic. I’ll be testing various JavaScript functions and styles before putting them into the actual project just to make sure that it meeting my expectations.

Question: How did you integrate your JavaScript code into your GitHub Pages project?

I will be adding the JavaScript code to the ‘index.md’ file in my GitHub Pages repository, and making sure it was correctly linked. Question: How did you verify the display on localhost and the deployed server?
I first tested the site on localhost to make sure that everything look good and function as expected. Then I’ll be pushing the changes to GitHub, checking the live site, and confirming that the dynamic content displayed correctly. Question: What challenges did you face, and how did you overcome them?
I think the most challenges that happened on me is that the JavaScript didn’t load properly on the deployed site at first. I fixed it by checking the console for errors and realizing that I had a bad script link…