Hello, did you hear that?
That's my digital bell sound effect
because I don't have my bell with me.
I am here in a recording studio, where
I haven't been for many, many months,
to make a tutorial for you.
Hopefully you're watching this at some point in the future
or in the past after you've invented time travel
or whatever.
And none of this matters.
But it is September 2020 right now.
I have not recorded anything here since March 2020.
We're in the midst of a global pandemic.
I am luckily in a room where I can't close the door.
And I don't have to wear my mask for the moment
while I record this.
And I hope everybody's doing well.
But let me just jump on in.
And what I want to show you is how
to take a P5 JS sketch, maybe something
you even made in the P5 JS web editor, and upload it to GitHub
and host it online using GitHub pages.
If you're watching this, the video
has hopefully replaced this one right here,
GitHub pages for hosting P5 JS sketches.
Why am I making the video again?
Well, I made this one over four years ago.
And the interface and some of the ways that it works
has changed.
So it's time to make it a new.
Although, I will note, that oddly enough,
I seem to have the same haircut as in this one.
Oh, coding rainbow reveal.
I'm going to show you two ways how to do this.
The first way is the easiest way,
where you could just drag and drop
your files into the browser and upload them.
And then I'm going to show you how
to do this with terminal, typing some commands,
to push your files from your local computer
onto GitHub to host them there.
So the first thing is you need your P5 sketch.
Most of the time, I'm working in P5 and the web editor.
There might be some magic way to go right from the web
editor directly to GitHub.
But frankly, you're probably more
likely going to need to download your code first.
So you can go here to download.
And it's going to download a zip file with your HTML files, CSS
file, JavaScript files, and any other files
that have to do with your sketch.
I have these files downloaded and in a folder on my desktop.
I also have all the code open in Visual Studio Code.
This is not necessary right now because I'm not
making any changes to it.
But Visual Studio code is the editor
that I used to develop locally on my computer.
And I have a whole video about that
that you could take a look at as well as
a workflow series about some of these different pieces
that I'm using.
One small thing that I want to point out
is that the reason you're able to see
your P5 sketch over there running
is because what's actually being loaded is an HTML page.
And that HTML page has references
to all of your JavaScript files--
sketch.js, particles.js, boundary.js, ray.js.
So this is a sophisticated example
that I'm choosing to use.
But you probably just have sketch.js
if you've just started in making a P5 sketch with just one
JavaScript file.
Up here, this is where the P5 library itself is loaded.
It's loaded from a URL, a CDN, a content delivery network.
You might notice when you download your sketch
from the P5 web editor, it actually downloads
the P5 library as well, and then references it locally
just like it's one of these other JavaScript files.
I prefer generally to load from the CDN.
But if you weren't connected to the internet,
and were running your P5 JS sketch locally,
having the P5 library itself downloaded is super useful.
But none of that is really relevant here.
What this video is about is just uploading any HTML, JavaScript,
any files for hosting a web page.
It doesn't have to be a P5 JS sketch.
And in order to do that, well, first you
have to have a GitHub account.
Of course, there's other places you could upload
your files beyond just GitHub.
But I'm showing you how to do it with GitHub pages.
This is my GitHub profile page.
You can see it has all of my various repositories
for the ML5 library, the Nature of Code book,
some of the courses I'm currently
teaching this semester.
But now in order to get my P5 JS sketch into a repo,
I want to make a brand new one.
So to do that, there's this plus button up in the top right.
I'm going to hit new repository.
I'm going to name it P5 sketch, a video tutorial.
Notice that by the way, you can't actually have spaces.
So it's going to automatically rename it
with the dashes for me.
And I'm saying I'm going to write a quick description.
I want this to be public.
Although, you could choose to make it private even
with GitHub pages for hosting.
And then now, I have a quandary.
What do I do?
The clue that you should take a look at
is skip this step if you are importing an existing
repository.
I am not importing an existing repository.
Yes, I am bringing some existing code.
But I haven't actually made a Git repo anywhere yet.
The difference between Git and GitHub itself--
a web hosting platform for Git repos,
Git being just the software, the version control
software itself-- is a really important distinction that I
covered in a bit more detail in the first video in the series.
So you might want to double back and check that.
But what I'm doing here is actually
creating the repo on the GitHub website.
And then I'm going to bring my files into it.
The easiest way to do that is to add a read me file.
Read me files are actually also where
you can just describe everything about your project
and talk to the community and put lots of nice rainbows
and hearts in it if you want.
But I'm just going to let it be a default one right now.
And then also, why not?
I'll choose a license because I want this to be an open source
repository, an open source--
licenses is a huge topic that I'm not getting into right now.
But one thing that I could do is make a quick decision
of just picking MIT, which I know
to be a very permissive license that would allow anybody
to reuse this code in any way that they so choose.
Now I'm going to create the repository.
And here it is.
Here's my P5 sketch video tutorial.
It has my read me, which I would probably want to edit and add
a lot more information in.
But I'll leave it as default right now.
And then it's time to upload the P5 JS sketch files.
To do that, I could just navigate
to the files themselves.
I can select them and just drag them in.
Again, the GitHub web is going to recognize
that I'm bringing in files.
I can let go.
It's uploading them.
And then this is the key next step.
I want to commit them.
A commit is like a save to the repo.
And in general, it's nice to write a note
about what it is you're doing.
Although, I could certainly just leave the ad
files via upload default message.
But I'm going to add a little note in there.
And now I'm presented with two options.
Generally speaking, when you're adding files or changing files
in the Git repo, you might want to consider doing something
called a pull request, which is something that I referred to
in previous videos.
It's a proposal to changes that aren't actually merged in yet.
But right now, I can keep things really simple.
And I can just commit directly to the main branch.
If this wasn't a repository that I owned,
that wasn't part of my account, I wouldn't have that option.
I would only be able to propose these new files as a change,
as a pull request.
I'm going to hit commit.
I'm going to do my processing your files dance.
And here they are.
We can now see that all of the files are there.
And there's only one step left for me to do.
A GitHub pages for hosting is not enabled by default.
So I need to find the settings for this repository.
It's actually over here on the top right under these three
dots.
I think if my browser page was a little smaller,
you're probably more likely see it as a button like this.
I can click on settings, make it larger again.
And then I can scroll down.
You could see there's lots of options
of things you could consider.
But I really only want to look at right now this GitHub pages.
So GitHub pages is currently disabled.
I can select a branch in order to enable it.
Now, on a simple project like this that I just started,
there's only one branch.
And you could check my video on branches
to understand what those are.
But the main branch is called main.
And I am going to select it.
And this is an interesting option it's giving me here.
So I want to keep this default setting of route.
I want my whole repo to be hosted as a website.
But if you had a repo that had some stuff in it that's
just for the repo itself, and maybe a directory that's
for hosting online, I could change this
to using maybe this dox folder.
Or I'm not sure what other options I have.
But I'm going to keep route.
I'm going to hit Save.
We could see it's now enabled.
And it says your site is ready to be published
at Schiffman.github.io/p5 sketch video tutorial.
You can see that there is a URL that's
formed based on my GitHub account name, Schiffman,
and my repo name P5 sketch video tutorial.
You can actually use GitHub pages
to host with a custom domain.
I'd have to come back and do another video tutorial
about that.
But hopefully right now if I just click on this,
there it is.
I have now hosted my P5 JS sketch on GitHub
using GitHub pages.
And I could copy this URL.
I could tweet it.
I could email it.
I could send it all around the world
and have people come and experience my sketch
as well as view my code on GitHub
itself, and even propose changes and make pull requests
and write comments and issues and all of that wonderful stuff
that comes with the collaborative software that
is Git on the GitHub site.
Now that I've done all of that, you could stop this video.
I mean, you could have stopped it quite a long time ago
to be perfectly honest.
But if you want to stick with me,
I am now going to show you how to create the repo locally
on your computer and then push it
to GitHub without using the GitHub website interface,
instead just typing commands into your local console.
So for me, I use as my terminal application
something called eye term.
Mac has terminal by default built in.
On Windows people use, I don't know, PowerShell, other things.
What else do people use them?
I'll put some stuff on the screen.
You might be on Linux.
So as long as you have console access to your computer,
and I can see if I type PWD or print working directory,
I'm on my desktop under a folder called P5 sketches.
And that's the name of this directory
that has LS, all of these files in for my P5 JS sketch.
I've also already installed Git, that software on my laptop.
If you haven't done that, and you
want to learn more about working with Git locally in terminal,
I have another video which also covers
that in a bit more detail.
But to create a repo on my local computer
in a particular directory, I can type Git init.
Big word of warning.
I've seen this happen so many times with students.
It's very easy by accident to type get in it
like in the root directory of your computer
or even just in your Documents folder.
And suddenly, you've turned your entire computer
into one giant monsters git repo.
It could cause all sorts of things to go haywire.
If that happens to you, there's a really easy way to undo it.
And I'm going to show that to you.
But let me first finish off with typing git init here
in the correct place.
So now I've initialized an empty git repository in this folder.
Why is it empty?
Aren't there files in there?
Well, the reason why it's empty is of course,
you always have to add and commit
those files as you might have seen
in some of my other videos.
But let me just address this undoing by accident,
making your whole computer into a git repo.
If I type LS-all, I think that's what I typed,
this is going to give me more information about what's
actually in this directory.
It's [INAUDIBLE] permissions and all sorts of stuff.
And you can see there's a new folder called dot git.
I don't actually see that folder here in my finder
because hidden files by default are turned off.
But I can turn them on with a quick key Command,
Shift Command, period.
And you can see there it is.
There is this git folder.
All I need to do, if I didn't want
this to be a git repo anymore, is hit command delete.
Just delete that folder.
Now, you don't usually want to do this.
But if you by accident had a folder,
a hidden folder called dot git in the root of your computer,
and you didn't mean to do that, just deleting
it will undo that problem.
I'm really getting into a lot of tangents in this video.
Hopefully, this is still helpful.
Back to here, so just to check to make
sure everything is working the way I think,
I'm going to type git status.
And you can see oh, I'm on branch [INAUDIBLE]..
[GROANS] This makes me very unhappy
because I usually use, as the default branch name
for my repos, the word main.
I think it's more clear.
It's also a bit more inclusive language.
It's what is GitHub is choosing to use as its default brand as
of October 1st, 2020.
But my computer defaulted to the word master.
So here, you're getting a little extra lesson
about how to change your branch name.
And I'm going to-- actually, before I
do that, I think I need to add and commit some files.
So I'm going to add everything.
And I'm going to commit them with just a short message,
like initial commit of P5 JS sketch.
And I've covered these commands in previous videos.
Now I'm going to say git branch main, git--
that creates a branch called main, git checkout main.
And there we go.
Now I'm in the main branch.
And then I can say--
I think it's git remove master.
No, I don't know why I just thought git removed would work.
So you could see, even me who's been
doing this for years and years, I
can't remember what any of these commands are.
I have to look them up.
Thankfully while I'm recording this video,
I have a live chat going.
And I was just handed the answer.
Git by Cody Gordon with CJ.
Check out that YouTube channel.
Git branch dash D-master.
OK, so deleted that branch.
So now I am here.
And I can type git status once more just
to make sure everything's OK.
And I'm on branch made.
Nothing to commit.
I've got all my files there.
I am good to go.
Now I can go back to GitHub.
And I'm going to create another repository.
New repo, P5 demo 2.
And I'm back to this quandary again.
Oh, what do I do?
Guess what?
Remember how I said, skip this step if you're importing
an existing repository?
Well, guess what?
Now I'm importing an existing repository
because I made the repository locally on this laptop right
here.
So I don't want to add a read me.
I don't want to add a git ignore.
I don't want to choose a license.
I just want to create the repository.
And it is empty.
It's blank.
Luckily for me, oh thank you, GitHub
for providing me a nice set of commands
that I can type in to get this repo up here on GitHub itself.
So the first instructions it's giving me
is create a new repository on the command line.
I actually already showed you that.
I awkwardly did it.
And you could see how you could do it here with a read me file
and also like just creating the main branch.
Boy, that was much more elegant there.
But-- or I could push an existing repository
from the command line, which is what I did.
So this is what I need to do.
I want to say git remote add origin.
So what that does is it's creating
a remote version of the repo that's
locally on my computer on GitHub server.
And this is the URL path to that particular repo.
Paste this in here, hit Enter.
It's done.
Then, I could create that main branch,
which I guess this is a one way of doing it that I didn't know
about when I did it before.
And that's probably the way I would double back and do it.
But then I could--
and then-- so I don't need to do that now.
And now I can just push it.
And by the way, this word origin in here is quite optional.
I could have called it GitHub or my special, wonderful server.
That's just the name of the remote.
So I'm saying, hey, I have a repo.
I want to add a remote.
And I can have multiple remotes.
Like maybe I'm hosting my website
on five different servers.
And they each have a git repo remote.
And I can name them different things.
So I could know where they're going.
But by default, most people use the word origin.
I actually like to call it GitHub because sometimes it's
a bit more clear to me.
But I'm just going to use this.
And I'm going to hit this.
It is done now.
You might get an error message here where it's telling you
I'm not authenticated.
I don't-- I'm not logged in.
So I have also done some stuff to set up
my computer to automatically be logged into that git account.
I need to make a video to show you how to do that.
But if you run into trouble there, what I would suggest
is coming up to the top and switching it to HTTPS.
And then use this URL instead for when
you do git remote add origin and then use this HTTPS remote.
That will allow you to type in your username
and password for a one-time log in to push the repo.
All right, now I should be able to just refresh this page.
I pushed everything.
And there it is.
Now I got this obnoxious DS store file, which
is something that Mac made.
And I don't have a read me file.
So there's some clean up that I should probably
do to this repo.
But overall, we're ready to go.
I can just go once again.
I can head over to settings, GitHub pages,
enable it on the main branch, hit Save, scroll back down,
find my URL, open it up.
This is my P5 sketch.
Same result as before, but I had to wander my way through all
of those terrifying, but not so bad,
really, if you think about it command things
to put into my terminal shell console thingy.
I hope this video was helpful to you.
I'm sure there were aspects that were confusing,
that there were missing pieces, that
are gaps in your understanding and knowledge.
Please ask those questions in the comments.
Also, I was figuring out some of the steps
to do while I was doing them in this video.
But I am going to put all of the steps in a clear guide
that you're seeing right here in the video description,
or at least a link from the video description.
So I hope you enjoyed those.
See you later.
Good-bye.
The videos over now.
I don't have a train whistle.
It's just going to end.
[MUSIC PLAYING]