01.5 - Github Pages
Last updated
Last updated
In this guide, we’ll walk you through uploading your creative coding project to GitHub and publishing it as a live webpage using GitHub Pages.
GitHub is one of the most popular platforms for developers to store and share their code. It offers version control, collaboration tools, and hosting services, making it an essential tool in the software development world. Here’s why it’s important:
Version Control: GitHub keeps track of changes in your project, so you can revert to earlier versions if needed.
Collaboration: It allows multiple people to work on the same project seamlessly.
Portfolio Building: Sharing your projects on GitHub shows off your skills to potential employers or collaborators.
Free Hosting: With GitHub Pages, you can turn your code into a live website with ease.
By learning GitHub, you’ll be stepping into the larger developer community and adopting practices used in professional environments.
Expand the zipped file and make sure you have the following files ready:
index.html: The main file that displays your webpage.
sketch.js: Your JavaScript file with the creative coding logic (p5.js sketch).
style.css: Optional, for styling your webpage.
Ensure all your files are in one folder.
If you don’t already have a GitHub account:
Go to github.com.
Click Sign up and follow the instructions to create an account.
After signing up, enroll in the GitHub Student Developer Pack. This pack gives you free access to premium tools and resources, which are great for students starting out in coding. Follow the steps on the website to verify your student status.
Log in to GitHub.
Fill out the form:
Repository name: Name it something like kp4-perlin.
Description: Add a short description of your project (optional).
Visibility: Select Public.
Check Add a README file.
Click Create repository.
In your new repository, click Add file > Upload files.
Drag and drop your project files (index.html, sketch.js, style.css) into the upload area.
Scroll down and click Commit changes to save your files.
Go to your repository’s Settings (find this in the top navigation bar).
Scroll down to Pages in the left-hand menu.
A green notification will appear with the link to your live webpage (e.g., https://username.github.io/KP4Perlin).
Open the link provided by GitHub Pages.
Verify that your sketch is running correctly.
If something isn’t working:
Check that your index.html file references sketch.js and style.css correctly.
Refresh the page after a few minutes; GitHub Pages may take some time to update.
Here’s a breakdown of the main files in your project:
index.htmlPurpose: The main file for your webpage. Browsers look for this file first.
Key Sections:
Links to sketch.js and style.css.
Defines the <canvas> element for your sketch.
sketch.jsPurpose: Contains your creative coding logic written in JavaScript.
Key Responsibilities:
Defines what happens in your p5.js sketch.
Handles animations, interactivity, and drawing.
style.cssPurpose: Styles your webpage.
Key Responsibilities:
Controls colors, fonts, and layout.
Example: Change the background color of the page.
Editing Files: You can edit any file directly on GitHub by clicking it and selecting the pencil icon.
Customizing Your Page: Update style.css to personalize your project’s appearance.
Learning More: Check out p5.js reference for new ideas and commands.
Congratulations! 🎉 You’ve successfully uploaded your project and published it online. Share your GitHub Pages link with others to showcase your work!
Before starting, download to project from the online editor:
Click the + icon in the top-right corner and select New repository.
Under "Source," select the main branch and click Save.
