> For the complete documentation index, see [llms.txt](https://vyuka.digitalneumenia.sk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vyuka.digitalneumenia.sk/kp-4/01.5-github-pages.md).
# 01.5 - Github Pages
## Uploading Your P5.js Project to GitHub and Publishing with GitHub Pages
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.
### **Why Use GitHub?**
{% embed url="" %}
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.
***
### **Step 1: Prepare Your Project Files**
Before starting, download to project from the online editor:\
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.
***
### **Step 2: Create a GitHub Account**
If you don’t already have a GitHub account:
1. Go to github.com.
2. Click **Sign up** and follow the instructions to create an account.
3. After signing up, enroll in the [GitHub Student Developer Pack](https://education.github.com/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.
{% embed url="" %}
***
### **Step 3: Create a New Repository**
1. Log in to GitHub.
2. Click the **+** icon in the top-right corner and select **New repository**.\
3. 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**.
4. Click **Create repository**.
***
### **Step 4: Upload Your Project Files**
1. In your new repository, click **Add file** > **Upload files**.
2. Drag and drop your project files (`index.html`, `sketch.js`, `style.css`) into the upload area.
3. Scroll down and click **Commit changes** to save your files.
{% hint style="info" %}
> **What Does "Commit Changes" Mean?**
>
> * A "commit" is a snapshot of your project's current state.
> * Committing changes saves the files to your repository and keeps a history of updates.
> * This allows you to track changes over time and revert to previous versions if needed.
> {% endhint %}
***
### **Step 5: Enable GitHub Pages**
1. Go to your repository’s **Settings** (find this in the top navigation bar).
2. Scroll down to **Pages** in the left-hand menu.
3. Under "Source," select the `main` branch and click **Save**.\
4. A green notification will appear with the link to your live webpage (e.g., `https://username.github.io/KP4Perlin`).
***
### **Step 6: Test Your Webpage**
1. Open the link provided by GitHub Pages.
2. 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.
***
### **Understanding Your Project Files**
Here’s a breakdown of the main files in your project:
#### **1. `index.html`**
* **Purpose**: The main file for your webpage. Browsers look for this file first.
* **Key Sections**:
* Links to `sketch.js` and `style.css`.
* Defines the `
