Publish your Website on GitHub Pages for free
5 min read
Following are the things you have to know before publishing the website.
- You should have your website ready
- GitHub Account
If you are unfamiliar with Git and GitHub let me explain to you shortly. Git is a version control system that tracks and stores the history of your code locally. We need Git to push our code to GitHub. GitHub is an online software development platform that is used for storing, tracing, and collaborating with people on different projects all over the world. You can follow this blog about Git and GitHub for a better understanding Introduction to Git and Github
Following is my Facebook Web application (template) which I will host on the internet using GitHub pages. You can access the code from this link
Before starting make sure you have Git installed and have an GitHub account.
Step1: Creating a GitHub Repository
First thing first, sign into a GitHub account and create a repository. The repository name must contain github.io. In my case, my repo name is fb-page.github.io. You can select Private or Public mode based on your requirements. If you want your code accessible and open to all then you select Public and if you want it private then select private.
Step2: Pushing your Code to GitHub In the previous step, we created our repository, now I show you how to push website code to GitHub using Git. First I show the project directory structure. You must have to follow this project directory. The Website's main file which is index.html should be the root file, which mean it must be outside of the folders.
When you created the repository this page appears, all commands we use will be from this page.
Next, open the Command Prompt where the website is located and follow these commands.
Note: Now in my Project directory there is an index.html file and css folder. Other folders which you see above are not required for the demonstration.
F:\myApp>git init Initialized empty Git repository in F:/myapp/.git/ F:\myApp>
git add .
git status(to see files are added into the staging area)
F:\myApp>git init Initialized empty Git repository in F:/myApp/.git/ F:\myApp>git add . F:\myApp>git status On branch master No commits yet Changes to be committed: (use "git rm --cached ..." to unstage) new file: C55/ . _custom-animation.css new file: css/ . _responsive.css new file: css/ . _style.css new file: C55/custom-animation.css new file: css/responsive.css new file: css/style.css new file: index.html F:\myApp>
git commit -m "added my files"
F:\myApp>git init Initialized empty Git repository in F:/myApp/.git/ F:\myApp>git add . F:\myApp>git status On branch master No commits yet Changes to be committed: (use "git rm --cached ..." to unstage) new file: C55/ . _custom-animation.css new file: css/ . _responsive.css new file: css/ . _style.css new file: C55/custom-animation.css new file: css/responsive.css new file: css/style.css new file: index.html F:\myApp>git commit -m "added my files" [master (root-commit) 009a1fc] first commit 7 files changed, 10946 insertions (+) create mode 100644 css/_custom-animation.css create mode 100644 css/ . _responsive.css create mode 100644 css/. _style.css create mode 100644 css/custom-animation.css create mode 100644 css/responsive.css create mode 100644 css/style.css create mode 100644 index.html F:\myApp>
git branch -M main
git push -u origin main
F:\myApp>git branch -M main F:\myApp>git remote add origin https://github.com/mudassirHayat/fb-page.github.io.git F:\myApp>git push-u origin main Enumerating objects: 8, done. Counting objects: 100% (8/8), done. Delta compression using up to 4 threads Compressing objects: 100% (8/8), done. Writing objects: 100% (8/8), _59.16 KiB | 1.91 MiB/s, done. Total 8 (delta 0), reused © (delta o), pack-reused To https://github.com/mudassirHayat/fb-page.github.io.git * [new branch] main -> main Branch 'main' set up to track remote branch 'main' from 'origin'. F:\myApp>
Finally, refresh the repository, you found all your local files successfully uploaded to the GitHub repository
- Click on the Setting button
- In General tab click on Pages
- Set the branch to main and save it
- Open the URL
- Oops! Don't worry, the website will be online within a minute.
- Congratulations!! Website is up and running
Thanks for staying with me. In this short time, we learned how to publish our HTML website using GitHub pages for free of cost. Now it's your time to show the world about your work. If I miss any step or if you have any queries feel free to ask in the comment section. I will see you in my next article until then Happy Coding..