9.13: GitHub Pages for Hosting p5.js Sketches – p5.js Tutorial
Articles,  Blog

9.13: GitHub Pages for Hosting p5.js Sketches – p5.js Tutorial


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.

23 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *