How to turn P5.js projects into webpages?

Following the following instructions to turn a P5.js project to a webpage. It is a 3-step process and quite standard.

Step 1: Download from p5.js editor

1. Open your project in the p5.js Web Editor.

2. Click on the "File" menu in the top left corner.

3. Select "Download" from the dropdown menu.

4. Choose a location on your computer to save the .zip file.

5. Extract the contents of the .zip file to a folder on your computer.

Step 2: Upload to GitHub (using upload method only)

1. Go to GitHub.com and sign in to your account.

2. Click the "+" icon in the top right corner and select "New repository".

3. Name your repository and set it to public.

4. Click "Create repository".

5. On the new repository page, click "uploading an existing file".

6. Drag and drop the files from your extracted p5.js project folder into the upload area.

7. Add a commit message (e.g., "Initial upload of p5.js project").

8. Click "Commit changes".

Step 3: Set up GitHub Pages settings

1. In your repository, click on "Settings" in the top menu.

2. Scroll down to the "Pages" section in the left sidebar.

3. Under "Source", select "Deploy from a branch".

4. In the "Branch" dropdown, select "main" and "/root".

5. Click "Save".

6. Wait a few minutes for GitHub to deploy your page.

7. Refresh the GitHub Pages settings, and you should see a message with your site's URL.