Git and GitHub exercises for beginners

18 Nov 2022 🔖 git tutorials vscode
💬 EN

Congratulations – you have a new job at Banana Stand Corporation!

The corporate blog lives at https://bananastand.example.com/blog and it’s your job, as a new HTML and CSS expert, to make the blog even more beautiful than it already is.

The shared Git repository containing a codebase full of .html and .css files that drive the way https://bananastand.example.com/blog looks is hosted on the internet at https://github.com/BananaStandCompany/website_corporate_blog/.

• Q: How do you successfully make the blog more beautiful without irritating colleagues who also use https://github.com/BananaStandCompany/website_corporate_blog/?
• A: Read on!

Install and authenticate GitHub Desktop

First things first, install a copy of GitHub Desktop onto your computer.

Run GitHub Desktop and sign it into the GitHub.com account that your new employer set up for you.

Create a brand new Git repository on your computer

Create a new folder on your computer: C:\example\hello-world-1\.

Inside of it, create 1 file called helloworld.txt, the contents of which read:

Hello, world!

Now in GitHub Desktop, click File > Add local repository.

Select the C:\example\hello-world-1\ folder into the “Local path prompt (either by typing it directly or with the popup available through the “Choose” button).

Note that the “Add repository” button isn’t available, and you’re prompted:

“This directory does not appear to be a Git repository. Would you like to create a repository here instead?”

I prefer File > Add local repository over File > New repository because then you don’t have to worry about whether you’ve already told Git to spy on C:\example\hello-world-1\ at some past date. You can just let GitHub Desktop figure it out for you when you always use File > Add local repository.

Go ahead and click the “create a repository” link in the prompt.

• GitHub Desktop will suggest a Name of hello-world-1. That’s just fine.
  • (I’ve played with changing it, and I can’t find any trace of the value I changed it to actually getting saved anyhere, anyway.)
• You can leave Description blank.
• GitHub Desktop will force Local path to C:\example\hello-world-1\ for you.
• You can leave Initialize this repository with a README blank and leave Git ignore and License set to “None.”

Click the “Create repository” button.

Admire your new repository on your computer

If you open C:\example\hello-world-1\ in Windows File Explorer and click the “View” tab up at the top and in its “Show/hide” panel make sure “Hidden items” is checked, you’ll notice that now there’s not just a helloworld.txt file in C:\example\hello-world-1\.

• GitHub Desktop also added a .gitattributes file to the folder.
  • (Honestly, I’ve never really seen this in very many codebases, and nothing’s going to break if you delete it because you’re just not into clutter. I delete .gitattributes right away.)
• GitHub Desktop added a hidden sub-folder named \.git\ to your folder.

Inspect your new repository’s Git Config file

Go ahead and open the file in this special sub-folder called C:\example\hello-world-1\.git\config using Notepad or some other text editor.

Its contents should look something like this:

[core]
	repositoryformatversion = 0
	filemode = false
	bare = false
	logallrefupdates = true
	symlinks = false
	ignorecase = true

OK, go ahead and close the file. I just wanted you to see it.

Play with Git commits

One of the things GitHub Desktop does for you, when setting up a folder like C:\example\hello-world-1\ as a Git-tracked repository, is “commit” all of the files you already had in C:\example\hello-world-1\ like helloworld.txt (as well as its “helpful” addition of .gitattributes) to a “main” branch of the hello-world-1 repository as a checkpoint worthy of comment.

I find that a bit annoying – I like that other tools let me decide what I’d like to consider worthy of being my first “commit.”

But anyway, if you look at the “History” tab of the left-hand panel of GitHub Desktop, you’ll see one that GitHub Desktop did for you and labeled with a comment of “Initial commit.” If you click on “Initial commit,” you’ll see that this “commit” makes note of changes to 2 files: the addition of a new .gitattributes file and the addition of a new helloworld.txt file. You can even click on those files within this history to see what contents within them were “new to Git” at the time that the “commit” was made.

If, like me, you deleted the .gitattributes file with Windows File Explorer, in the “Changes” tab of the left-hand panel of GitHub Desktop, you’ll also see the deletion of .gitattributes mentioned under a heading of “1 changed file.” If you were to leave the checkbox next to .gitattributes checked, enter a comment of your own in the little box reading “Delete .gitattributes” (I’ll write “I can make my own comments thank you“), and click the “Commit to main” button, the “Changes” tab would clear out to say “0 changed files” and the “History” tab would now show 2 commits – one labeled “Initial commit” showing the addition of 2 files and another labeled “I can make my own comments thank you” showing the deletion of 1 file.

Publish your new repository to GitHub.com

Now click the “Publish repository” button in GitHub Desktop – it’s the third button in the top-nav, next to “Current repository” and “Current branch” buttons.

• There’s no reason that the folder on your computer and the URL of your project on GitHub.com have to be named the same thing. Let’s play with giving them different names from each other. Change Name from hello-world-1 to public-hello-1.
• If you’d like to enter a Description now, that can be handy: let’s put: “This is my very first repository from scratch.”
• You can go ahead and un-check the Keep this code private box – nothing secret about “Hello World,” and you might as well show your family what you did.
• Leave the Organization picklist set to “None” for now. (Later on, when you start making brand new repositories that you’d like Banana Stand Corporation even after you move onwards and upwards, you can choose “BananaStandCompany” – but leave it at “None” while playing.)

Click the “Publish repository” button.

Admire your repository on the internet

Now click Repository > View on GitHub and note that your web browser opens the URL https://github.com/your-username/public-hello-1.

You’ll see that the publicly available copy of the repository on the internet has an “About” section saying “This is my very first repository from scratch.” It contains 1 “branch” named “main” with 2 “commits” in it, the most recent of which is “I can make my own comments thank you” (or perhaps just “Initial commit” if you’re not petty like me and didn’t do that), and has 1 file in it: helloworld.txt (or 2 if you didn’t pettily delete .gitattributes like me).

Note that next to helloworld.txt, even if your repository has a history of 2 commits, it just says “Initial commit” next to it, since you didn’t do anything notable to helloworld.txt during your “I can make my own comments thank you” commit.

If you click on helloworld.txt in your web browser, you can see that its contents are:

Hello, world!

Neat.

Inspect your repository’s Git config again

If you open it up with Notepad, the C:\example\hello-world-1\.git\config file now has more detail in it – it looks like this:

[core]
	repositoryformatversion = 0
	filemode = false
	bare = false
	logallrefupdates = true
	symlinks = false
	ignorecase = true
[remote "origin"]
	url = https://github.com/your-username/public-hello-1.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
	remote = origin
	merge = refs/heads/main

Once you know what you’re doing, you can actually edit these Git config files by hand in Notepad to point to various places on the internet, but it’s pretty slick to just let GitHub Desktop do it for you when you’re working with GitHub.com as the internet-based home of the shared copy of the repository.

Delete your new repository off your computer

Here’s a nifty trick: let’s simulate recovering from a hard drive crash.

(Or, more realistically, let’s simulate recovering so badly messing up the contents of C:\example\hello-world-1\ that you want to crawl into a corner and curl up in a little ball.)

Open C:\example\ in Windows Explorer and completely delete the entire hello-world-1 subfolder.

That’s right – just delete it.

Clone the repository from the internet back to your computer

If you open up GitHub Desktop, it’ll complain, “Can’t find public-hello-1. It was last seen at C:\example\hello-world-1.”

Click File > Clone repository, click the “URL” tab, and:

• Enter https://github.com/your-username/public-hello-1 into the Repository URL box.
• Enter C:\example\hello-world-1\ into the Local path box.

Click the Clone button.

Open C:\example\ in Windows Explorer – ta-daaaa, the hello-world-1 subfolder is back!

You can start fresh from the last agreed-upon shared checkpoint among your colleagues after a hard drive crash.

Phew!

An aside about branches

When you delete-and-reclone, the “Current branch” tab (2nd one from the top, GitHub Desktop) that you’re looking at on your computer is going to display whatever the “main” or “master” branch is of https://github.com/your-username/public-hello-1, no matter what “branch” you were working on before you deleted C:\example\hello-world-1\ off your hard drive.

Once you switch “Current branch” in GitHub Desktop to some other branch, this change will persist to Git itself, meaning all of your other “beautifying” software applications that sit on top of Git, like SourceTree, VSCode, and IntelliJ, should also show your latest choice of “branch” as the one that all changes to files in C:\example\hello-world-1\ are being tracked within by Git.

Likewise, if you use one of those other pieces of software to change the “branch” that C:\example\hello-world-1\ is being tracked against again, that other piece of software will tell the underlying Git software, and the change will also show up under “Current branch” in GitHub Desktop.

Inspect your repository Git config again

For the record, if you open it up with Notepad, the C:\example\hello-world-1\.git\config file now has more detail in it – it looks like this (note that there’s a reference to https://github.com/your-username/public-hello-1 in its contents).

[core]
	repositoryformatversion = 0
	filemode = false
	bare = false
	logallrefupdates = true
	symlinks = false
	ignorecase = true
[submodule]
	active = .
[remote "origin"]
	url = https://github.com/your-username/public-hello-1.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
	remote = origin
	merge = refs/heads/main

(I have no idea why GitHub Desktop threw a “submodule” thingy into the configuration upon clone but not upon publish. It’s probably not hurting anything, though, so whatever.)

Pat yourself on the back and bookmark these exercises

Congratulations, you now know how to make yourself a safe place to practice everything you’ll ever learn about Git for the rest of your career!

Remember:

• Git is spyware you install onto your computer on purpose.
• GitHub.com is one of many cloud hosts who give you a centralized home on the internet where lots of people whose computers are all spying on their work can put the results of that spying together into a single shared space. Kind of like Dropbox or OneDrive or Google Drive, but for text-based files like computer code instead of family photos.
• GitHub Desktop (and other competitors like SourceTree, VSCode, and IntelliJ) are productivity software to help you more easily connect the dots between Git spying on your computer and GitHub.com hosting your colleagues’ shared codebase.

Organize yourself for corporate

Are you ready to try this with a real repository from Banana Stand Corporation?

Organize the folders on your computer first – you won’t regret it.

Personally, I like to organize my hard drive like this:

• I have a C:\users\my_username\Documents\GitTrackedRepositories\ folder.
• I also have a C:\users\my_username\Documents\Code (non-git)\ folder.

Within GitTrackedRepositories, I have subfolders like salesforce, oracle, terraform, etc. that capture the gist of the different kinds of mindsets I tend to switch between for a living. (I work in data integrations, so I criss-cross teams and technologies a lot.)

Let’s take a look at how I organized things within one of those broader categories.

In C:\users\my_username\Documents\GitTrackedRepositories\salesforce\, I have subfolders like:

• bananastand (will hold all repositories containing Salesforce code meant to work with https://bananastand.my.salesforce.com/, my employer’s primary central Salesforce org)
• bluthauction (will hold all repositories containing Salesforce code meant to work with https://bluthauction.my.salesforce.com/, my employer’s older legacy Salesforce org they’re trying to retire)
• zzz_katiekodes-public-demos (I like to sort my personal stuff to the bottom of the alphabet – hence the Z’s)
• zzz_misc

Then when it comes time to actually clone a copy of https://github.com/BananaStandCompany/salesforce_bs_primary/ onto my desktop with GitHub Desktop’s File > Clone repository functionality and “URL” tab, I enter something like C:\users\my_username\Documents\GitTrackedRepositories\salesforce\bananastand\aaa_primary\ into the Local path box. (I like to sort important stuff to the top of the alphabet – hence the A’s.)

Anyway, that’s just me.

• Q: Why don’t I personally like to clone https://github.com/BananaStandCompany/salesforce_bs_primary/ straight into C:\users\my_username\Documents\GitTrackedRepositories\salesforce\bananastand\?
• A: Because sometimes I also develop standalone repositories, meant to be unlocked packages, that are destined to be installed into the https://bananastand.my.salesforce.com/ production org, but that will live on the internet at URLs of their own like https://github.com/BananaStandCompany/salesforce_bs_awesome_package/.

To me, C:\users\my_username\Documents\GitTrackedRepositories\salesforce\bananastand\ makes sense as a higher-level folder clumping “things having something to do with the https://bananastand.my.salesforce.com/ production org in some way or another” and C:\users\my_username\Documents\GitTrackedRepositories\salesforce\bananastand\aaa_primary\ makes a better specific home for “my computer’s copy of https://github.com/BananaStandCompany/salesforce_bs_primary/.”

Again, that’s just me.

Clone corporate

Ready?

Open GitHub Desktop and click File > Clone repository, click the “URL” tab, and:

• Enter https://github.com/BananaStandCompany/website_corporate_blog/ into the Repository URL box.
• Enter a folder on your C drive that already exists (but doesn’t yet have any files or subfolders in it) or that doesn’t yet exist but that you’d like GitHub Desktop to create for you into the Local path box.
  • Hopefully, you already came up with a folder-organization system you love and know exactly what you’re going to put here.

Click the Clone button.

Admire your computer’s copy of the corporate repository

Open the folder you put into GitHub Desktop’s Local path prompt using Windows Explorer.

Ta-daaaa, it’s full of all of the files from https://github.com/BananaStandCompany/website_corporate_blog/!

You did it!

Stop and consult a colleague

Now don’t touch anything in that folder on your computer – especially when GitHub Desktop shows your “Current branch” as something like “main” or “master” – before you talk to a colleague about how things are done in Git and GitHub.com at Banana Stand Corporation.

Make new repositories to practice new techniques

When in doubt trying a new technique that your colleagues recommend, don’t try it in the folder on your hard drive that’s associated with https://github.com/BananaStandCompany/website_corporate_blog/.

Instead, go back to the top of these instructions and create your very own brand new hello-world repository and practice new Git and GitHub.com techniques against that folder on your computer (one you’ve associated with some throwaway GitHub.com URL) before you try any new-to-you techniques against the folder on your computer associated with https://github.com/BananaStandCompany/website_corporate_blog/.

The same advice holds true when you’re trying a technique you think you already know, but in Git-related productivity software product such as SourceTree, VSCode, IntelliJ, Salesforce SFDX CLI, CumulusCI, etc. in which you haven’t yet performed that exact Git-related operation.

Remember you can wipe the slate clean

Also, remember that you know how to start clean if you make a mess in the folder on your hard drive that’s associated with https://github.com/BananaStandCompany/website_corporate_blog/. Just delete the whole folder and re-clone.

If you suspect you might make a mess despite your best efforts to have practiced things in a personal Git repository first, try to avoid hiting any “push” or “publish” buttons in Git-related productivity software, to make sure that the mess stays on your computer and doesn’t propagate up to the GitHub.com-hosted copy. This will help you be able to do the “delete-and-reclone” trick.

Follow good branch etiquette

Also, making sure that you never do any work in a folder of your computer that’s connected to a shared corporate GitHub.com URL without first changing your “Current branch” to something that you and only you are working on is a safety best practice.

That way, even if you do accidentally “push” or “publish” your local work to GitHub.com, you’re just publishing it to a part of GitHub.com that no one else at your whole company cares about at all.

Even better, at your request, it’s pretty easy for the owner of the GitHub.com website to just delete your whole “Sorry, I’m new, I might make mistakes here” branch off of GitHub.com.

Believe in yourself

Okay, you’ve got this – have fun at the new job!