Git Basics for a Personal Website
April 8, 2025 | Seoul, South Korea
When using Git I always think of the song "Kick, Push" by Lupe Fiasco, but in this post we will git push ;). If you want to make a personal website while getting some front end coding skills, learning Git is essential. So let's get started!
First sign up to make a free account with Github. Git can be used without a Github account, but for building a personal website from scratch (i.e., without Wix, Wordpress, Squarespace, etc.) it's absolutely necessary. Additionally, pushing your work to a remote Github server acts as a backup in case anything should happen to you local computer!
Next you will need to install Git on your computer, which is also free. Unfortunately for Windows users, this is where my post will be more helpful for Mac users. If on Windows or Linux please refer here for more instructions. So, if you have a Mac, I recommend installing Git via Homebrew, which is also free and also requires installation. To install Homebrew first search for the Terminal application and open a Terminal window. You will see a command prompt that looks like this.
nicole@Nicoles-MacBook-Pro ~ %
nicole@Nicoles-MacBook-Pro ~ % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install git
git --version, and you should see something like git version 2.39.5. If you made it this far you've won half the Git battle.
Now let's do a toy example to give you an idea of how Git works. First, set up a global author name and email in Git by running the following commands. Replace "Your Name" and "Your Email" with your own name and email.
git config --global user.name "Your Name"
git config --global user.email "Your Email"
cd, which stands for "change directory", to the folder you just made. For me it looks like:
cd /Users/nicole/Documents/test
nicole@Nicoles-MacBook-Pro test %
nicole@Nicoles-MacBook-Pro test % git init
echo "# Test project" > README.md
touch .gitignore
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/lupefiasco42/test.git
git branch -M main
git push -u origin main
git push! Congrats! You can now go back to Github.com and see that README.md and .gitignore show up on the repository page.
Now let's make a change to README.md by opening it in Mac's TextEdit application on your local computer. In TextEdit make a new line that says anything you want. I wrote "This is a toy example". Save the file with your new change and then close it. Now in your terminal you can run git status and you should see that your "README.md" file is listed under "Changes not staged for commit". So let's stage, commit, and push our recent changes to the remote github repo.
git add .
git commit -m "Update readme"
git push
git add . stages all modified or new files in your local git folder, but you can choose to stage only certain files. You can now refresh the Github.com repo page and see that README.md on the remote repo has been updated.
OK, let's make some more changes to README.md. Reopen README.md in TextEdit, and add a dollar sign after every word in the sentence you made previously, then save and close the file. The second line in my readme file looks like this now: "This $ is $ a $ toy $ example $". Now let's pretend you've decided you don't want to have these dollar signs, and it would be too cumbersome to remove them one by one. Whatever can you do??? Git to the rescue! Run the following command in your terminal.
git checkout -- README.md