Hosting a p5.js sketch with GitHub Pages

Подписаться 1,7 млн

Просмотров 51 тыс.

50% 1

How to host your p5.js sketch with GitHub pages, updated for 2020!
📋console steps: gist.github.com/shiffman/9cd8...
🌈rainbow README: github.com/CodingTrain/Rainbo...
🎥 Introduction - Git and GitHub for Poets: • 1.1: Introduction - Gi...
🎥 Branches - Git and GitHub for Poets: • 1.2: Branches - Git an...
🎥 Forks and Pull Requests - Git and GitHub for Poets: • 1.3: Forks and Pull Re...
🎥 Cloning Repo and Push/Pull - Git and GitHub for Poets: • 1.6: Cloning Repo and ...
🎥 Workflow - Visual Studio Code: • Workflow: Visual Studi...
0:00 Introduction
1:25 Download code from p5 web editor
3:26 Creating a GitHub repository
6:48 Enabling GitHub pages
8:57 Pushing to GitHub from local console
🚂 Website: thecodingtrain.com/
💬Discord: / discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
📚 Books: www.amazon.com/shop/thecoding...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 118

@p16r 3 года назад

The command at 10:55 to show hidden files should be only `ls -a` the -l option is to list the files with more info. `ls -l` will list the files in ta tabular format but won’t show hidden files. `ls -a` will show hidden files in a compact list. `ls -la` will show hidden files in a tabular form.

@TheCodingTrain 3 года назад

Thank you for this clarification!

@arnavaggarwal5243 3 года назад

@@TheCodingTrain SIr please make your custom VS CODE THeme. THe Daniel Schiffman THeme or the coding terrain theme in VS code

@anusha8085 3 года назад

You actually remade it! And you're back in the good old studio! Thanks a lot. Also, the Processing Your Files dance was awesome ✨

@kldjbenning 3 года назад

Your energy in these videos makes them so easy to follow! 🙌

@DenisovichDev 3 года назад

In a recent live you reviewed our first contribution hosted by gh-pages and said you wanted to revisit this particular topic. I'm so glad that you actually made a video explaining the recent interface. You are the best teacher ever!

@IraWinder 3 года назад

Good to have you back! I was just needing a quick refresher on how to do this.

@harikakothamasu6974 3 года назад

Hahaha that digital bell is too gud😍😍😆

@RefluxCitadelRevelations 3 года назад

This tutorial is super concise and very easy to understand, not implying they usually aren't, but I would have figured this would have been more difficult. Thank you so much, duder.

@AhmadAlMutawa_abunoor 3 года назад

I have been waiting for these videos to come back. Thanks a lot. Please make more videos like these (edited, shortened, and more convenient) as opposed to the live stream ones.

@DavidFitzgibbon 3 года назад

You're back!!! Amazing!

@alexanderbell7736 3 года назад

So glad to see you're back on the horse ... Um .. train Dan! Thanks for another great video!

@runtimejpp 2 года назад

Dan you’re the best! Thank you for everything!!!

@ZaidAjani 3 года назад

I am so happy to see your tutorial in the old manner after so many days! This tutorial has really help me. thanks a lot and keep making such informative tutorials.

@idiotsandwich2748 3 года назад

OHMYGOD THANK YOU SO MUCH. i completely forgot how to make my game into a site, and when it came time for me to do so i couldn't and was on the verge of failing my main project. YOU SAVED ME, THANK YOU, THANK YOU, THANK YOU.

@user-rf6ud8od5h 6 месяцев назад

Thank you for your energy. Love you.

@juanserna259 2 года назад

Thank you for your content. Easy, straight forward and fun.

@hussainsalih3520 2 года назад

Big love for you , l'm watching you from 2018/2019 , amazing journey with you

@rachitkumarpandey 3 года назад

The only reason I got into programming was because of you . Keep up the good work.

@voxelrifts 3 года назад

The madman actually added hearts and rainbows for a 3 sec clip. dedication intensifies

@ButteryCowEgg 3 года назад

Yoooo I’m happy to see another video in this series

@cameron6464 3 года назад

Just another absolute banger video Dan. Funny enough I first learned how to use github from your previous video, so I didn't quite learn anything here but still an interesting video regardless!

@ashishajin4712 3 года назад

I just wanted to say on behalf of everyone who watches your videos, thank you for being such a sunshine and the best programming teacher ever! 😀

@zer001 3 года назад

Hey Daniel, i missed your videos. All i now about Prcessing i learned from you.Nice to see some new Viceos

@sacrajah 3 года назад

I enjoyed this video. Thank you for posting

@competitiveprogramming4219 3 года назад

Thank you for the Git Playlist.

@koladeoluwadare_ 3 года назад

I love ur tutorial man

@dgloria 2 года назад

Hi Dan, I had to move all my files into the root folder, from a sample p5 project, and refactor the file references, and the changes went through with a delay of 1 min, but it's good and working. Thanks.

@SuilujChannel 2 года назад

wow thanks for the shortcut shift + command + period show show/hide hidden files! i did not know that and even wrote an autormator script a few years ago. I does work but i always had to restart Finder. Now with the new shortcuts its a lot better! :))))

@slower-master 3 года назад

Thnks, I really love your work

@tahsintariq8757 3 года назад

For anyone starting out with git and Github like me, all the terminal commands might be a bit intimidating at first. But you can download the Github Desktop app. It makes things a lot easier at first. And will help you learn git in the terminal when you do try it.

@iamnicola4488 2 года назад

great work ! thanks

@asddsaasdfg2846 3 года назад

This haircut is much better then others 😀😃

@chanasiegel2706 3 года назад

You are awesome!!!!

@slim3190 3 года назад

love your New hair!

@johnvonhorn2942 3 года назад

I'm not first or second but I have arrived.

@not_ever 3 года назад

Cometh the man, cometh the hour

@chintanrabadiya6625 3 года назад

After long time😍😍😍

@semrana1986 3 года назад

Welcome back

@lukedominicodonnell2347 2 года назад

Thank you most helpful

@tanishqsinghanand5383 3 года назад

Luv u sir from India

@TinchyYT 2 года назад

Thank you so much :)

@nicolevella6701 3 года назад

welcome back

@dbless2005 3 года назад

Love your tutorial. Could you do a video with github desktop?

@JAHKABE 3 года назад

Thanks Shiffman. I was just doing this today. Can you do a tutorial on hosting Multiple p5.js canvases in instantiated mode on an html page?

@GrinyaPLAY 3 года назад

Thanks for your effort. I want VIM video!

@linustornqvist2246 3 года назад

Missed you danny

@alanESV2 3 года назад

I’d be cool if you coded a non repeating grid like in Veritasium’s new video

@cheako91155 3 года назад

There is also gitlab pages of you are looking to avoid using a MS product. Also with gitlab pages you can use a program like tree to generate content... You don't need to store generated files in the gut repo it's self.

@mostafamohammed4853 3 года назад

Thank you ❤️

@sergeyb6071 3 года назад

amazing stuff! what would it take if the p5 demo was a java app, any additional steps?

@Kayne1b 3 года назад

I'm still trying to figure out if I can get a p5 canvas element (associated with the sketch and multiple other files) in a React component. I thought I might be able to do it with the Helmet package but it didn't seem to entirely work. I say entirely, because I could not delete the files I had added to my project until I shut down npm, so I suspect it was running, but I didn't see any changes on my screen. Maybe I gave up too early and just needed to do something else to trigger a re-render? I can still just link out to different repos, and maybe trying to make it a component is a bad idea anyway, so it's not a major priority.

@shriyamtripathi 3 года назад

Sir plz make a video to integrate p5 sketches on our websites / apps. I searched for it before and it says to use which is not so efficient 😉🙏🙏

@nrprogramming7593 3 года назад

Another one!! Thanks so much for your channel and how much value you bring to RU-vid! You’re one of the big inspirations, as to why I started my own channel... Now I just need to work on my energy/ charisma😩🤣 #IllGetThereOneDay

@anniestackhouse5662 3 года назад

I agree! TheCodingTrain's videos are awesome! I've been subbed for over 3 years now :) . As far as your RU-vid channel goes, just Keep Going! Your video's are really good!

@morphman86 3 года назад

Hey Dan, I'm watching this from the past. Why haven't you been in the studio for a long time? Something I need to worry about, or is it just your schedule?

@akshayasinghal456 3 года назад

So im using .html ! While uploading the files, do we only need the .html s or all of the images and psds also?

@ushasingh6204 3 года назад

Wow I was just coding ray casting

@morphman86 3 года назад

Personally, I prefer to have the library locally for two reasons: 1) I am sure that I only rely on my own service provider. If the user can load my page, they are guaranteed to be able to load the libraries. 2) It is far quicker, in most cases, to load the files from the same server, than to load from several different servers. CDNs are great for development, but for deployment, you should really download the libraries and use locally. The only exception is if you are using a split delivery service yourself, like a cluster server, where your own content is delivered via a CDN. But even then, you should probably supply the libraries through your own CDN, rather than the default host, for the same reasons as listed above.

@TheCodingTrain 3 года назад

Thanks for the thoughts!

@Kotfluegel 3 года назад

What are best practices, if you have to build your source files first, like compile typescript?

@yuyin1022 3 года назад

Thank you for the tutorial! I have a question regarding sketches that have sound elements. The p5.js sketch is not playing sound on the github link. How to solve this problem? Is that because of the library location? Thank you!

@CodingUnited 3 года назад

GitHub CLI series?

@twitchizle 3 года назад

how to hide something in github? for example api keys?

@randompersononthenet806 3 года назад

What program do you use for coding?

@SolarLiner 3 года назад

Here he used the p5.js web editor, but he mostly uses VS Code for most programming tasks.

@randompersononthenet806 3 года назад

@@SolarLiner thanks

@TheCodingTrain 3 года назад

I also have this playlist in case it's helpful! ru-vid.com/group/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

@randompersononthenet806 3 года назад

@@TheCodingTrain thank you

@elphotovideo 3 года назад

Hello, when I tried to do this my page came up blank. I originally created the sketch locally as opposed to p5.js editor

@ketz555 2 года назад

What's the process to update the github files? Do you do all the steps again from git init?

@Roknok 3 года назад

I just thought of it and suddenly see a video of the coding train published 4 minutes ago ......you just know how to read mind😀

@NolleEveraert 3 года назад

I got a question about github pages that I can’t find the answer online...Is it possible to have one general index.html with buttons on it that sends you to another html file. For example, I am working on a site that visualises sorting algorithms and maze generation but i have to do everything in one sketch and its really confusing. Is there a way to make it a lot easier?

@m.b786 3 года назад

i trying to make a bundle VueJS 3 on github page ... i working on it :)

@aleksandrapantic5059 3 года назад

I need a tutorial for white arrow on the folder in git

@som.shekhar 3 года назад

At 4:05, Github Pages cannot be used with private repositories on a free account, the account needs to be upgraded.

@zaynbaig3157 3 года назад

Remember the sublime text days?

@caveofmovies8597 3 года назад

i watched already old version from p5 course and now again...

@gunasekhar435 3 года назад

After creating URL using pages also my link not showing my website it only showing some react commands and my code only can you give any solution for that 😬

@anisulfatma8943 3 года назад

Odd coincidence it is that I was searching for a domain name right when this video was uploaded.

@resin01 3 года назад

Just type git checkout -b main That will create the branch and check it out in one command instead of two

@athulcvinod 3 года назад

I had to select a jekyll theme inorder to get my sketch up and running. It would show a 404 otherwise. Strange.

@ameynaik2743 3 года назад

Thanks! I had the same problem, I had to choose a theme to get it working!

@lgdeaglegaming6352 3 года назад

Will it work with firebase sketch

@Ultratermin8or Год назад

I am not able to download the files from P5 to my computer:(

@MrThegloc 3 года назад

I'm a little sad that Daniel didn't hold up a coding train mask :D

@m.b786 3 года назад

and now my git submodules update ... throw error ... cannot find origin/master ( default value XD)

@TheLshallo 3 года назад

Important to note, that you cannot use GitHub Pages with a private repository unless you are paying for premium.

@mostafamohammed4853 3 года назад

Dan without a whistle at the end : Dan while editing; don't worry got my back

@srin_meow 3 года назад

Choo choo

@Thunderking7507_YT 3 года назад

This is 8 months in the future since the video was made...

@kylebouwman2068 3 года назад

This tutorial is already outdated. Github changed the way Pages works. It no longer accepts index.html as the homepage. It now must use index.md, and I am having trouble converting my p5.js project over. Edit: Apparently you can get around that issue by selecting a Jekyll theme. However, it looks like GH is blocking my loadImage and loadJSON calls in my sketch.

@PankajDoharey 3 года назад

Why dont you use glitch instead of p5 editor, then you can magically go to GitHub from the editor. In fact with glitch you can write both frontend , backend and even terminal commands. This would widen the scope of your videos.

@user-lu2ds7mv7z 3 года назад

Hey, Why his video doesnot get many views or Likes ? As before 😥

@adsoyad2607 3 года назад

it doesn't support node.js servers ):

@Ihavetoreturnsomevideotapes 3 года назад

Can't wait for spam forks from guys who just wants some free gooddies from #hecktoberDigitalOcean

@khalidsakka8020 3 года назад

i followed exactly that but when i went to my link it showed the readme.md file. i do have my files in root and my html file is named index.html. can you please explain why this happens?

@kenjiokura7601 3 года назад

I'm not sure why but, if the readme file is being displayed it most likely means that it can't find the index.html file. I think I could think of is that your index.html is not in the root file? But it sounds like you do.

@khalidsakka8020 3 года назад

@@kenjiokura7601 it worked a couple of hours later I still don't know how or why.

@kenjiokura7601 3 года назад

@@khalidsakka8020 Glad it works, hopefully it stays that way. It does take a few seconds once you commit (save) changes for it to update to GitHub pages.

@gouravkolhatkar3623 3 года назад

Can we put ads to our GitHub pages ? Peace ✌️

@sardorbekomonkulov6379 3 года назад

"git push origin master -force"

@user-mp2ys4ry8r 3 года назад

hello

@thebeast77tb77 3 года назад

I am not able to acess my site , I have not create any read me files , it shows 404 error and if I have written something in the read me file , after clicking on the link , it shows the same text , I am not able to access my game ? what should I do ?

@JNCressey 3 года назад

Having to change the name of the branch every time you create a new repository could cumulatively waste a lot of time. If you want your repos all to use 'main' as the default, use `git config --global init.defaultBranch main` to configure git. superuser.com/questions/1419613/change-git-init-default-branch-name/1572156#1572156