This is a short tutorial to show you how to take a p5.js sketch and
host it with GitHub Pages.
So, in order to follow this tutorial it assumes two things [sic]: you have a GitHub account and
you have a p5.js sketch. And the p5.js sketch–
I'm going to show you– is this one which is just a little
little simple game demonstration where there's an obstacle coming at you
and you've got hit the space bar in time to jump over the obstacle.
Okay, so you can see that's the basic sketch. Now, what is this sketch?
It is a directory. In the directory it's called RunningGame.
I don't know why I called it that. And it has a set of files associated with it. It has an HTML file,
two JavaScript files and library files.
The point of GitHub pages, though, is that you can host anything. You can make whatever you want.
You can have as many CSS files, HTML files, as many JavaScript files,
you can have directories, images...
All that sort of stuff.
But I'm going to just take this core directory
and host it on GitHub using GitHub Pages.
So, the first thing that I need to do in my GitHub account
under RainbowCoder, is I just need to make a new repository.
I'm going to make a new repository.
I'm going to call it p5js_sketch.
Obviously you should call it something better but that will work fine.
“Showing how to host p5.js sketch
with GitHub Pages”
I want it to be public.
So people can see it.
I'm going to initialize it with a README so
it has something in it to start and then I'm just going to hit create repository.
Then I'm going to add a branch. This is key.
I need to go under here. Branch master. I need to add a branch called “gh-pages”.
I'm going to create that branch.
Then what I want to do just for safety reasons I want to go to settings
under branches and I want to switch the default branch to gh-pages.
I'm going through this a little bit quickly because you can watch my previous video
where I do this in a bit more detail,
but I'm showing the steps again here but more quickly.
So, all I need to do is hit “Update”.
I wanna say “I understand, update the default branch”.
I want the default branch always to be “gh-pages”
Only the stuff that's in that branch is viewable and hosted online as a web page.
So then, the other thing I'm going to do, just also for
safety is I'm going to go back to my repository.
I'm going to click here under branches and
I'm just going to under “master” here I'm going to click this trash icon
all the way over on the right because I just want to delete the master branch.
So there's no more master branch this particular part of all only has a
gh-pages branch.
So here we are. I have an empty repository with nothing in it.
A gh-pages branch and now I need to commit those files,
my sketch, to the branch. Now, there's a bunch of different ways I could do it.
I could clone this repository down.
I could add the files and I could push it back, but just for simplicity right now.
I am going to just actually grab this whole directory and drag it in here.
So, um...
GitHub pages, as a tool, it allows me
to upload files directly to it and so it's uploading everything and
now I'm to say uploading my p5.js sketch.
And I'm going to say commit directly to the gh-pages
branch and hit commit. Processing my files.
It takes a minute and there you go.
Now one thing you'll notice here is my files are in a directory called
running game.
I could have had them in the core
directory. I mean the root directory which probably would make some sense.
Maybe I'll show you that in a second, but you can see that the files are there.
So now where do I find–
Where do I see the stuff?
So the URL is always
.github.io/
But if you don't want to remember that you can always just click on settings
and then scroll down and you'll find
you're under GitHub pages. It'll say your site is published here.
So I can click here.
Now the irony here is it's going to say it can't find anything.
I'm getting a 404 error.
That's because I actually have my index.html file in a directory called “RunningGame”.
So I've got to go add that directory right here
RunningGame. And I'm going to hit, oh I spelled it wrong.
I'm going to hit RunningGame and now you should see there it is.
So there's my sketch online and I have a permanent U.R.L. to that sketch.
So there it is there it is posted on GitHub Pages.
Now if you want it to just appear at the root directory,
p5js_sketch
what I would recommend doing, is I'm going to go back to
the repository. And actually I'm I'm going to clone it.
I'm going to fix this by cloning it.
So I'm going to go.
Sorry, everyone. I'm going to go to this repository. Rainbow...
Where am I? p5js_sketch.
I'm going to grab the URL for cloning it.
And I'm going to go here. And I'm going to cd back up to my desktop.
I'm going to say git clone. Here. I'm going to open that directory
here and I'm going to look at RunningGame. So, let's look at this.
Whoops no no no no.
p5js_sketch
So in p5js_sketch, this is what's in that particular repository
I'm just going to take those files and I'm going to put them in the root directory.
And then delete that folder and when I go back here.
I can say cd into p5js_sketch and I can say git status.
So you can see it's telling me I moved all these files around, I did all sorts of
stuff. So I'm going to say “add . -A” to add everything and delete everything.
Then I'm going to say “git commit "move files to root directory"”.
And then I'm going to “git push origin” and
now the really key thing I want to put those changes back up.
I don't want to “git push origin master”. Remember everything happens in gh-pages
So I'm going to push everything up and I'm already authenticated it might ask for
username and password. Now I should be able to go here and
you can see all of the files are now here just in the root directory
There's no more RunningGame directory
I can actually just now go to
rainbowcoder.github.io/p5js_sketch
You can see this is the URL that I'm going to. I can hit enter.
And there is my sketch.
So you can easily just have the files in your get have a positive rate as long as
you're in the gh-pages branch.
Then you know where to view those pages hosted on the web.
So I showed you all the possibilities. I showed you uploaded files just through
the GitHub interface.
I showed you cloning and making changes, but
you can work entirely through the GitHub interface,
you can work entirely locally through terminal.
All those possibilities are open to you.
The only thing you have to know, is to make sure that all of your work
is happening in gh-pages and that you know the URL
which is .github.io /.
Incidentally you can also have a custom URL
that involves creating something called a CNAME file. I'm going to make another tutorial,
which will be like part nine, at some point of the series on how to do that
or part ten. Somewher in this Git and GitHub tutorial series will be that video as well.
Okay, so hopefully you found this helpful and
I will see you in some other part of the universe somehow I hope.