Link to these slides: https://bit.ly/shell-git-nav

 

Lift the curtain of the graphical user interface. . .

Intro to Shell and Git

. . .and experience your computer by command line!

The trouble with the Graphical User Interface

How could something so ordinary be so unhelpful?

Getting Lost in the Graphical User Interface: Recents on my Mac

Totally confused in the Windows GUI: Which "Documents" am I using?

??

Totally confused in the Windows GUI: Which "Documents" am I using?

Navigating files in a Chromebook?

Text

?

Saving everything in the Downloads directory?

Source: Amin Shariati, “Adding a Splash of Style to Your Workspace: The OS Folder Icons Tale” Medium (July 25, 2023)

But everyone's navigation troubles are a little different...

...depending on cloud storage configuration, how you've had to work with files in the past

We all get lost in the GUI...

Coding requires keeping your folders and files together and being able to navigate them.

a zen house, perfectly ordered

Mindful File Management

See "Zen and the art of file and folder organization" How-To-Geek (2010)...or

better yet...

...learn command line!

a proper place for everything, and everything in its proper place

You can call it:

  • command line
  • terminal
  • shell

 

It offers:

  • freedom from the GUI
  • precise and mindful file management

Command line

 

Helps to mindfully manage files and directories so we can easily do things like:

  • Copy them
  • Move them
  • Edit them
  • Run them
  • Share them
  • Restore earlier versions

Our shells are different, but some speak the same language

Windows:

Our shells are different, but some speak the same language

Mac / Linux (+ Linux on Chromebooks)

  • git is installed as part of the "terminal" or shell on posix systems
  • You may need to install XCode developer tools in the shell

So...why are we using git?

Git offers a precise method of version control, and this is especially important for coders and web developers.

Check out the following articles for details:

Plus, we'll be using it with GitHub, a service applies git to share code and build websites!

Windows users: Before proceeding...

  • Open it and you will see a colorful Git Bash Shell that looks like mine above

Mac / Linux users: Before proceeding...

  • Find your Terminal and open it
  • At the prompt, type in:
    git --version
     
  • If it comes out like my Terminal below, and shows you the version of git you have, great! You're ready to go.
     
  • If it does NOT look like this, read the message and follow the instructions carefully to install what you need (probably XCode / developer tools)
     
  • You want to run neofetch, too? Find the installation instructions for Macs, only you need to install Homebrew on Mac first.

Can you install git on a Chromebook?

Let's start trying some shell commands!

We're all using the "posix-compatible" shells now, so we will speak mostly the same language

So, we'll start with some basic shell commands for navigating your system and getting info about your files

Then we'll move to the special git commands that handle version control:

  • add files for "staging",
  • commit them to update their "snapshot",
  • and pull / push them to shared repositories in the cloud.

Shell commands for  navigation and intel

Finding, moving, searching, getting info on your directories and files in the shell

cd

cd [space]

cd directoryName

cd ..

pwd

ls

ls -lh

change directory (go walking the directory tree up or down)

print working directory
(show me the full filepath location where I am right now)

list files and directories below me
("look see")

cd [space] takes you to the "home" directory of your computer. Try it, and then enter pwd to see where it takes you.

cd directoryName goes down a level into the directory you indicate

cd .. climbs UP to the parent directory

ls -lh adds a special flag to return lots of information about last-access dates and file sizes and more.

mkdir directory

 mkdir myNewDirectory

touch file

"make directory": Use this as a convenient way to create and name a new directory. Remember: do NOT put spaces in your directory or file names!  

Spaces in folder and filenames makes it very difficult to navigate or share them!

Use this to create a new file. It will be empty until you edit it to add new content. You could, for example, start a new file named newFile.xml, open it in oXygen and edit it. 

touch newFile.xml

grep

 grep -n "slime" Slime.xml

grep -r "string" .

grep "string" file.xml

cat

grep literally means "global regular expression print". It means, go searching for a string in a file or a directory.

You can ignore case with -i.

You can plug in regex patterns with -E or egrep

literally, "concatenate", or just show all the contents of a file

 cat Slime.xml

 grep -E rec.p Slime.xml

wc

 wc Slime.xml

"word count". Gives you four columns:
numbers of lines, number of words, number of characters, filename
 

Piping commands: take the result of one command and feed it to the next

ls | wc -l

that reads:
ls "pipe" wc -"el"

This is handy way to count the files in a directory!  ls sends a list of your files to the wc function, which counts their lines, giving you a file count.

Moving, renaming, copying files with shell commands

mv

cp

These commands can rename a file, or move it to a new location. Indicate the source file and the destination directory. If renaming indicate the new name.ext
mv deletes the original. cp copies without deleting the original

Renaming a file: Navigate to its directory, and use mv to change the name: 

eeb4@salamander textAnalysis-Hub % cp Class-Examples/XML/joeyClassPush.xml Sandbox/

Copies the file without deleting the original. Use the [tab] key to autocomplete to help you be sure a directory or filename is where you think it is. 

mv joeyClassPush.xml joeyExample.xml

Shell Commands Linked Resources

 

Find the file location on your computer to use with git and GitHub

Usually we do that in GitHub, and then clone it to a precise location on our local computers.

  • Find a good, visible folder on your computer that is not actively syncing to OneDrive or Google, and that's easy for you to locate.  We'll open your Git Bash (Windows) or Terminal/iTerm (Mac) in that location.
    • On Windows: Right-click on the folder, and click on  "Show More Options" (or something similar) that will reveal to you "Open Git Bash here": you'll see the colorful Git Bash icon. Select the Bash Shell
    • On Mac: Right-click on the folder in your Finder, and on the menu click on "Services", then choose "New Terminal Tab at Folder".

Remember the Zen house?

A proper place for everything, and everything in its proper place.

  • Likewise, find the perfect location on your computer to create a GitHub directory, to hold your git repos.
    • This must not be actively syncing to any cloud file storage service.
  • To create the directory in this perfect, peaceful location, use the command in your shell: 
    mkdir GitHub

Create your first repo on GitHub

We usually start this in GitHub on the web.

Log in and click the + near your profile, and select New repository

Give this a simple name (like for this class)

  • Make the repo be public, so you can share it.
  • You'll be prompted to add a README. Do it. That's designed to let people know what to find in your repo.

Clone the repo on your computer

  • Select the "code button" on the repo, and copy the HTTPS address
  • Open your shell at your GitHub folder
    • Use pwd to make sure you're at the GitHub folder
    • Enter git clone and right-click to paste in the HTTPS address, so it's like this:
      • git clone https://github.com/sjm7342/DIGIT110.git
    • Watch all the git activity in your shell!

Now it's time to learn how to change the state of your repo, to move and change files

Watch me first. . .

VIDEO: Watch me move a file, then push it to a remote repo on GitHub:

Git and GitHub: Basic Steps for Changing a Repo

Git Commands and File Repositories

git pull

 

Pull in anything new from remote before you start making changes!

pulls in new files committed to the branch you've checked out.

Scenario 1: Could  you have pushed something to your remote repo from a school computer or the web interface? Are you at home now? Pull in your changes!

 

Scenario 2: Did your teammates or Dr. B push something to your branch the remote class or project repo? Pull in their changes!

As you get ready to work...

Working at your repo: Overview 

  1. git pull
  2. Make your changes and save them to the repo
  3. git add -A  (This adds every change for tracking.
    To add only a specific file, use     git add filename.ext)
  4. git commit -m "your commit message" 
  5. git push

Working at your repo: detailed explanation

git pull

Usually you should git pull before you add, commit, and push anything new.
Exception to this: You have a change that you needed to commit but neglected. someone else added changes to the file. If you pulled in those changes, you'd lose your work. In this case, you should add the file first, with git add filename.ext

git status

This tells you the status of your local repo only, whether there is anything new to be added, committed, or pushed.

git remote show origin

Super useful command! git remote show origin provides information on the status of the remote repo on this branch by comparison with your local repo.

Working at your repo: detailed explanation (2)

git add -A

git add filename.ext

git commit -m "your commit message"

This "stages" your files or deletions in git's system to indicate that they are important and should not be overwritten when you do a git pull. You must git add your files before you can commit them. You can add every change with -A, or add only specific files.

You must remember to write a meaningful commit message (ideally short and clear). This will be logged in the git repo's history. Your message documents what this change is about. 

git push

Sends your commit to the remote repo's version of your branch.

Leveling up! After your first git push:

You're going to need a special Developer Token now

Why isn't my username and password enough?

 

Follow HowToGeek's super-helpful instructions on how to set up your Developer token. Follow instructions for your computer (Windows / Linux / Mac) on storing your credentials. Once you enter them and have your local git configuration properly set up, you won't ever need to enter a password again!

When you'll need this: 

You'll be prompted in your shell when you try to push to enter a special developer token and it can't just be your password.

Because hackers are everywhere, what's stored in GitHub repos can be sensitive, and GitHub provides enhanced security. Passwords are more easily hacked than long developer tokens.

Practice these commands for now until you get used to them!

 

Later on, we'll move to Level 2: Branching and Forking! 

 

 

Remember:

  • Use git mindfully and it will serve you well.
  • You will gain fluency with practice.
  • Working on a shared project using git gives you plenty of practice!