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.

27 comments

  • Simon Chase

    For some reason, it says that it can't process folders. If I drag a folder in, it says something went wrong. If I juts drag the separate elements however, it works perfectly (although then the webpage doesn't work).

    Reply
  • Dominique André Hatoun

    Please: the "open . " command is not recognized (windows 10 cmd)… is there any specific reason?

    Reply
  • Random

    is there a video explaining the custom url part?
    and is there an explanation on how to do this with .pde instead of .js?

    Reply
  • Leon Xion

    Thanks,Shiffman!This course helps a lot.

    Reply
  • Ganga 9000

    Awesome tutorial this is absolute amazing

    Reply
  • Ganga 9000

    How do create a cname or alias for website URL

    Reply
  • Ashish Kushwaha

    very nice tutorial

    Reply
  • Ravi Srinivasan

    didn't know the drag and drop feature… simple and good!

    Reply
  • Anup kumar

    Can we host pages with DB? like I m working on API project, based on PHP and use mysql DB. Can I live it here?

    Reply
  • Engineer Passion

    please make a video about the url

    Reply
  • 林立宏

    The index of title

    Reply
  • яპჩõяɲ

    Now there is a new option on github where you can specify the source branch that you want to serve, so you can serve it all from master instead of create a new branch (gh-pages).

    Reply
  • TheJorged

    When I open the link, it only appears loading … forever, does anyone know why it could be?

    Reply
  • Kaushal Singh

    I was wondering Is there a way by which I can upload my processing sketch on the website(not the p5.js ) ? Is it possible ?

    Reply
  • Miguel Arconada Manteca

    Looking forward to that final video about custom url!

    Reply
  • Mohamed Dawod

    Such great tutorials, Thank you so much!

    Reply
  • Pro Jiasheng

    This playlist is the most complete and in depth tutorial for absolute beginnners that would like an introduction on Git and Github. Thank you so much for making these videos 🙂

    Reply
  • franeklubi

    Thank you Dan!

    Reply
  • Duncan Barr

    Hey man, I'm here at the end of your 'Git and GitHub for Poets' playlist. I just binged the entire playlist and wanted to leave a quick comment to say thanks. Great explanation. Great editing. Great style. Cheers!

    Reply
  • Ankit Tiwari

    How to understand any particular repository with just a minute of glance on a particular repository?
    🙂

    Reply
  • איתי אוטולנגי

    can we uplaod a processing-java file to github? (and run it by a URL)

    Reply
  • Eldestisland

    What happened to parts 1.11 and 1.12? Also, was this series ever continued? This was extremely helpful!

    Reply
  • rahmiul

    thanks a lot !!

    Reply
  • Gova Murali

    This is amazing, please do CI,CD pipelines

    Reply
  • TableStandingOnFloor

    I've been afraid of git and github for couple years, because I was always overwhelmed by it's complexity. Your playlist helped me overcome this fear and start using git in my work. Now I find it to be a very helpful and cool instrument! Man, thank you so so much!!

    Reply
  • Yahui Zhao

    This video saved my life from getting a 0 of my project not running in a browser without local server

    Reply
  • Suraj Oberai

    how to host a project through gh-pages if my repository doesn't have index.html but app.js instead?

    Reply

Leave a Reply

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