>> Hi everyone, and welcome back to
another episode of learning with Dr. G, that's me.
Today, I'm really excited to do a quick overview of
the stream that I did earlier this week
where we did an intro to GitHub.
Let's get started.
[MUSIC]
>> If you miss that stream, never fear,
you can always check out all of
my streams and pre-recorded videos for this.
What you didn't learn in school series,
talking about Git, GitHub,
will do some Bash, WSL later on.
Here at aka.ms/LearnWithDrG/WYDLIS_Videos.
I've said that a lot of times.
Today, we are going to be following a module which you
can find at aka.ms/LearnWithDrG/IntroToGitHub.
This is the module that we're following along with.
The really neat thing about this module is that it
immediately sends you over to this GitHub learning lab.
Let's get started so that we can see how this works.
GitHub learning labs are really great because there are
bots that follow you around as
you're engaging with this sample repository, and helping
you to learn the features and nuances of GitHub.
To get started, we just have to click on
Start free course, and make sure
you're already logged into GitHub.com.
This GitHub learning lab is going to create a new repository.
I'm going to make it public, no problem.
I'm going to go into the advanced options because
as I promised on the stream earlier this week,
when I did it on CLI or command line interface and my colleague,
Megan did it within the GitHub.com browser,
I am going to do it on Visual Studio code this time.
Let's get started. The first thing that it
does is clone the course material,
create a repository on your account.
Push the coarse material to that repository,
and then make sure the bots are all set up.
Great. Now, I can go ahead and get started.
Let's assign myself to an issue.
In GitHub, issues are a great way of tracking bugs,
any feature requests or anything that you want to get to,
but you're not able to get to right now.
Issues are often associated with pull requests
because anything that you add to an open source repository,
or even when that you're working on on
your own or with a small group,
you might want to have some documentation
and reasons why you are adding that.
Issues create this amazing backlog
of things for you to work on or for
your peers and colleagues
or other open source contributors to work on.
It allows you to focus on small-scoped features or bug fixes,
rather than getting distracted and taking
on the entire project all at once.
We can see here that our bot has opened up this issue for us,
and has told us that we need to assign ourselves to this issue.
Assigning to yourself to an issue or getting assigned to
an issue is really useful because once you're assigned to it,
depending on the settings that you have set,
you'll get notifications both in e-mail, or you can
check out this notification spell here
in the top of your GitHub profile,
and we can see right here that I've been assigned to this issue.
Great. Now that we completed that step,
the bot has more steps for us.
What we need to do next is we need to convert
this repository into a GitHub Pages repository.
Basically what this means is that our code or files within
this repository are going to be presented to
the world more like a website. Let's get started on that.
I'm going to scroll up to the top of
my repository and I'm going to click on settings here.
I'm going to scroll down in
this general section until I get to the GitHub Pages section.
I'm going to select my main branch to be the place where
GitHub Pages is going to source all
of the GitHub Pages or webpages.
I could have a separate folder called docs where I'm going
to put all of the more like public-facing webpages in,
or in this case,
I just want my entire repository
to essentially be one big website.
I'll go ahead and click "Save."
Awesome. Let's take back over that issue now.
GitHub Pages takes a couple of minutes to propagate
because it needs to go through the files,
make sure it compiles anything that needs to be compiled,
creates the YAML file like all of these other things.
But when it's done,
we'll see that our bot is ready for our next instructions.
This one is pretty easy,
what we're going to do first is just
open this in a new tab to check it out.
Basically, what we're creating is a full-screen web slide show.
Right now though, we only have one slide.
Let's go ahead and close this issue.
The nice thing is if for some reason we thought we fix
this bug that was represented in this issue but we didn't,
we can always reopen this issue and continue to talk about it.
Let's head over to the next issue.
You can either click on the short link here,
or click on issues and you'll find it right there.
The next thing that we're going to do is we're
going to create a branch.
Now, like I said, in our live stream,
Megan did this all within the GitHub.com browser window,
I did it in my command line interface using WSL on Windows.
Today though, I'm going to be doing it using Visual Studio Code.
Basically, I just need to make sure I have
Visual Studio Code installed, and open up
the command palette using Command Shift P or
Control Shift P. After I have my command palette open,
I'm going to type git clone,
and it's going to ask me for a URL.
Now, this bot is pretty handy and it has
provided me right here with the URL for my repository.
But let's say we didn't have
this bot setup, because we weren't doing this in a Learning Lab.
You can actually find this URL
if you head back over to the Code tab,
click on "Code", and there it is.
I'm going to copy it from here.
Now I have Visual Studio Code open.
Let's open up that command palette and start typing git clone.
It needs the URL for the repository.
Let's paste it in. You're going
to ask me where I want to store this,
let's just put it on my desktop.
I definitely want to open this repository,
I can either open it in
the current window that I'm in or in a new window.
This is a new window, so I'll just open it right here.
A lot of files in here,
but they match the files that are in GitHub.com.
Let's head back to the issue, and see what we need to do next.
We've cloned a repository.
Now, our issue is pointing out some features
that are Git and GitHub related, to help us
understand how we're going to interact with our local copy of
our code, and the copy that stored up on the GitHub.com server.
Then it's going to ask us to create a new branch.
That way we can add some changes,
make some modifications and to push that branch from
our local copy in our local git understanding to GitHub,
so that GitHub knows about
that branch to, let's go ahead and do that.
The first thing that it said to do,
is to look down here at the very bottom in the left-hand corner,
we can see that we're currently on the main branch.
This little icon here says that if we wanted to,
we could fetch or sink with
GitHub.com to see if there's anything new that's up on GitHub.
I'm going to click on main,
and I'm going to title my new branch, my-slide.
Click on "Create new branch".
This will automatically create
the branch from the branch that I was on.
I was on the main branch.
I said, "Create new branch,"
and it just automatically chooses from main.
If, for example, I wanted to create
another branch and I accidentally was on my-slide,
but I really wanted to create the branch from the main branch,
you could always check this,
"Create New Branch From" and
then choose the main branch right here.
This is really great because you can either
choose the main branch that's on
your local machine or
the main branch that's remote and on Github.com.
If this is confusing, let me know either
on Twitter @drguthals or in
the comments down below and I can make
follow-up videos to explain these nuances.
Right now, I do have my main branch and
my my-slide branch that are currently on my local machine.
Remember, I need Github.com to know about my my-slide branch.
I'm going to head over here to this source control menu.
I haven't made any coding changes.
All I've done is created a new branch,
but I can still push those changes by clicking on
this three-dot ellipsis here, and then clicking on "Push."
Let's go ahead and do that. We get
this seemingly warning message saying,
"Hey, my-slide has no upstream.
What do you want to do about that?"
I want to publish this branch.
I want Github.com to know about my-slide,
and I want my my-slide branch on my local machine, and
my my-slide branch that I'm about to
publish to be synced, so I can click "Okay."
That worked tremendously.
Not only did Visual Studio Code
recognize that we now have a new branch that we might want
to merge into main but also
our bot recognized that we published our new branch.
If we were to head back over to code,
we can see that, that new branch is in fact here.
Let's see what this bot wants us to do next.
It looks like it just wants us to create
a new file, and we want it to
have this as the following contents for it.
Let's go ahead and do that now.
I'm going to head back over to the file explorer,
which I can get to by clicking on this "Pages Icon",
go into posts, and create a new file,
and we're going to call this md,
and we're going to paste that in there.
If you noticed, our version control menu
does have this new notification icon saying,
"Hey, you've made some changes here."
We can click on that, and see that we've got the following changes.
It's just one change to this file.
If I click on that, I will get a diff view of my changes.
This is a new file,
so on the left-hand side is what was on main,
and on the right-hand side is the new proposed changes.
In this case, nothing was there and I'm proposing everything.
If you watched the stream,
I had to do a Git add or if you
followed any of the previous Git videos,
we had to do Git add to stage our commits.
We can do the same thing right here
by clicking on this plus sign to
stage our commits to include
this in what we're going to push up to GitHub.
Now we've got this one stage to commit.
Let's go ahead and make our commit message.
I can click on this "Checkmark" here to say,
"Yes, I want to commit this."
Now you can see that we don't have any other changes.
This is where you can do a couple of different things.
So far, we've just committed our changes on our local repository.
We have not pushed them yet.
You can either head back up to the ellipsis like
we did earlier, and click on "Push."
Or if you notice down here,
our little refresher icon here now says, "Hey,
there's nothing that needs to be pulled down,
Github.com doesn't have anything new,
but you have some new stuff that might need to be pushed up."
I'm going to go ahead and click on the one down here.
I get this warning to make sure I know what I'm
doing and once this is done,
we can head back over to Github.com and see those changes.
It looks like the bot already detected
these changes and it wants us to create a pull request.
Let's go back up to our code,
and we'll notice that Github.com also recognized that
our new branch has
some changes that we might want to merge into main.
Let's compare and do a pull request.
I'm going to go ahead and create that.
Oh, I did the classic fail.
Even if you were doing something simple,
it does feel redundant in a small sample one like this,
but you should always,
always have a body to your pull request.
Make sure that you are telling people what you're adding,
why you're adding it,
if it's fixing some issue, something like that.
Let's go ahead and do that now.
I've updated that comment and hopefully the bot is okay
with that, and we can check to make sure that we're ready to merge.
It says that maybe we're not quite ready yet.
We do want to make a couple of other changes.
Let's go ahead and open that file again,
but this time let's add something interesting to this.
Instead of it just saying, "Your text," let's add something here.
"I am a dog mom to three,
cat mom to one,
and human mom to one."
Looks like we're ready to stage these changes.
Adding in a bit more info about me.
Let's go ahead and commit and push.
Yes, I'm ready to push.
The really neat thing about PRs, is that if
you're on that same branch and there's already
a PR open for that branch
those changes show up in this discussion forum.
I love this feature because it just makes everything super
clear, about where I'm pushing code to and where it's going.
Our bot says that we're ready to go.
We can merge this in.
I always like to keep a tidy repository.
I didn't use to do this,
but now I do because have I had
so many times, when I just couldn't find
the right branch because I had too many called patch 1, patch 2.
I'm going to go ahead and delete
this branch because I am done with it.
Our bot in the middle of that had detected that we had completed
that merge, and now we can head back over to our slide show.
Give it a second to propagate the new GitHub pages changes,
refresh it, and we'll get
this little blue icon here that we didn't have before.
When I click on it, we're taken to
my slide that talks about me being a dog mom,
cat mom, and human mom and that's basically it.
You've made your first pull request and
merged it in, and it was not too hard I hope.
If you have any questions about anything that we
did or any other GitHub or Git features,
please don't hesitate to reach out to me @drguthals on Twitter.
That's usually the best place to do it.
Thank you so much for joining me and I hope that this helps on
your GitHub and coding journey. Bye, everyone.
[MUSIC]