GitHub Pages: Launch Your First Project for Free

GitHub Pages: Launch Your First Project for Free

3 minutes
Banner for github pages
AI Summary

Ready to move your code from your computer to the internet? GitHub Pages is the most powerful tool for hosting personal and project sites directly from your repositories. In this guide, we break down the difference between User and Project pages, walk through repository creation, and show you how to clone your code to your local machine to begin the deployment process.

If you are learning to code, or already into it and want your project to be hosted, easily that too for free. The answer is Github Pages. It helps you not only in hosting HTML, CSS and JS files but yeah helps in learning the important and tricky tool i.e Git. In this post I will be helping you as how to publish your project from local repository to github pages.

First of all we need to know about two types of github pages called as

  • Userpages

  • Project pages

userpages come in handy if you want to host your personal website or the index of any project. You may note that there is only one userpage per account. The URL for userpage is http://title.github.io/

Project pages are used when you want to host a project, of which you have many. We can have multiple project pages per Github account. The URL for project pages are http://title.github.io/projectpage/

###Create First Repository### First lets go on this page https://github.com/new after we sign up on github

Create repo banner representation
  1. Enter repo name

  2. Make repo public, you can make it private as well, But that is paid service. Remember keeping repo public isn’t any harm. There people can see your code and can request pulls, But they wont be able to merge only you can.

  3. Check “Initialize this repository with a README” this is optional but it will make next step easier.

  4. Then click create repository.

And you are done with repository creation.

Same goes with project page creation

Now lets create create “Hello World” page and push it to Github, To see how github pages looks like and work

Before you take clone of repository we created, You may need to add .ssh keys and do some installation, If you have already done You can skip and move forward. If not Please follow this link.

###Now lets take clone of repository### On the project repository just copy the ssh URL and paste in terminal in your specified path and hit enter.

github pages clone banner Showing on terminal how to clone using command line


Command that you will get from github will be like this

git@github.com:junaidmasoodi/junaidmasoodi.git

Add git clone as prefix to the above to start cloning.

git clone git@github.com:junaidmasoodi/junaidmasoodi.git

and for now our cloned repo will have readme.md only

Note: If you are familiar with git and installed same on your machine, then and only then you will be able to take clone.

Otherwise there are two other options at same place clone in desktop & download as zip you can use these options as well to clone or simply download repository.

In another post I will create one page of say “Thank You” and push to same repo and will also show as to how the custom domain redirect to same page.

Key Takeaways
  • User vs. Project Pages: Understand that you get one main personal site (UserPage) but unlimited sites for your individual projects.
  • Public Power: Keeping a repository public is a great way to invite collaboration and show your skills to the community.
  • SSH & Cloning: Essential steps to securely connect your local terminal to GitHub’s servers.
  • README Importance: Initializing with a README makes the first clone much smoother for beginners.
0
Resume Icon

Professional Journey

An overview of my experience scaling global teams, managing operations, and my evolution from technical architecture to executive leadership.

View Experience →
Blog Icon

Insights & Articles

Deep dives into digital accessibility, team scaling strategies, and the technical challenges of building inclusive web architectures.

Browse All Posts →
Talks Icon

Speaking & Keynotes

A curated list of my talks, workshops, and panel discussions delivered at technology conferences across Europe, Asia, and North America.

Explore All Talks →