Introduction
This tutorial is a part of COD207/208 Creative Coding courses. It demonstrates:
- Introduction
- Setup a free Github account.
- Creating a project repository.
- Uploading local files from your device to Github.
- Creating free web page and domain name on Github.
- Publishing to the internet and make it available to public.
What is GitHub?
GitHub is like a social network for code. It’s a platform where people can store, share, and collaborate on projects, especially software. Think of it as a place where developers can work together on the same project, track changes, and fix issues, even if they’re in different parts of the world. It’s widely used for open-source projects, where anyone can contribute or use the code.
What is GitHub Pages?
Github Pages provides a space for you to build a website that you can use for highlighting your Github projects, your web-based applications, or just yourself!
Setup Github Account
Goto GitHub and sign up to create your personal free account.
Fill the form and continue. Follow the instructions during the registration process.
Sign in to your newly created account.
You will see a Dashboard. It looks different than other social platforms with less image and clickbait posts, you will see variety of projects in the timeline. Click on top-right corner image which is your profile image by default. Goto Your Repositories. Basically, a repository is a folder just like in your computer.
Create Your First Repository
Let’s create our very first repository and publish our p5JS application to the public internet with a custom domain name. Hit New button to create your first public repository.
Then, fill the required information required shown in the image.
Upload Files to The Repository
After you created the repository, you will see the following page in your browser. Click uploading an existing file hyperlink.
Now we need to upload files. Open your p5JS AR application assignment link in the browser and download the project (the same way when you are submitting your homework to Ă–ZĂś LMS).
Drag and drop all files inside the folder as shown below. Do not upload the folder. Just files inside the folder. Wait for all of the files to be uploaded.
After the uploading done successfully, hit the Commit changes button to proceed changes in your newly created repository.
Publish the App on Internet
Your repository will look like the image below. Now it is time to make the p5JS application in your repository up and running on the public internet with a custom domain hosted on Github. Hit ⚙️ Setting button on the repository page.
Navigate to left sidebar menu, and select Pages menu.
You will see the title Branch. There is a button called None, click on that button and select main and click Save button to proceed. This action will publish the repository as a web application to the public internet with a custom domain.
Now, GitHub executes several processes in the background which handles publishing the project and generating a custom domain for your P5JS application. This process takes 2-5 minutes to complete.
Conclusion
Depending on your repository name, the generated custom domain changes. Since the repository name in this tutorial is projectAR, the generated domain becomes:
The naming convention starts with your GitHub username.github.io/yourRepoName. In the end anyone with the link can view your app on their computer or mobile device as long as they have internet connection.
In the end, using GitHub you can also host your portfolio page, or any other web content without paying money to a third party hosting provider. For instance, you can publish the web pages that you created in your Web Design classes freely on internet using this method.
Furthermore
You can set a custom domain for your app or portfolio page. To do that you need to order a custom domain name from a domain provider like GoDaddy, NameCheap, Hostinger, Registerer, etc… It costs 15-20 $ for a yearly subscription plan. Each provider charges with different amount of money.
After you register your domain name you can set a custom domain instead of github.io/projectName, you can use something like simpleAR.com. The following tutorial shows how you can host your custom web application or portfolio page using a custom domain registered on NameCheap domain provider.