How I Published my Portfolio website on GitHub

Suliman Munawar Khan — Wed, 15 Jul 2020 20:26:56 +0000

Hello folks
Note: This is my first post on Dev.to so please avoid my mistakes.. 😊
Today I am going to share how I host and published my portfolio website on GitHub without spending a penny.
Before starting let me give a small introduction to what is GitHub?
To understand GitHub, you want to first have an understanding of Git. Git is an open-source version system that was started by Linus Torvalds—the same one that created Linux. Git is similar to other version control systems—Subversion, CVS, and Mercurial to call a couple of.
So, Git is a version system, but what does that mean? When developers create something (an app or a website, for example), they make constant changes to the code, releasing new versions up to and after the primary official (non-beta) release.

All this talk about how GitHub is ideal for programmers may have you believing that they are the only ones who will find it useful. Although it’s a lot less common, you can actually use GitHub for any types of files. If you have a team that is constantly making changes to a word document, for example, you could use GitHub as your version control system. This practice isn’t common, since there are better alternatives in most cases, but it’s something to keep in mind.

Now that you know what GitHub is all about, so we are ready to start

Step 1: To host a website on GitHub you first need to have you portfolio website or any other website ready

Step 2: If you are good to go with step 1 then you must have a verified GitHub account I am sure every developer must have a GitHub account. If for some reason you don’t have one you have sign up for free here at github.com

Step 3: after creating your GitHub account login to your account and head over to your GitHub dashboard

Step 4: The Dashboard will look like this. Click on “New” Button.

Step 5: after clicking on “New” Button, you will see a page like below where you have to create a new repository. Give your repository valid (meaning full) name. make sure you have selected the Public option checked, and hit the create button at the bottom of the page.

Step 6: After creating repository you will see the next page like below. On this page you have to upload you website content. You can upload the website content by using three method but here I will be using the .git software to which helps you to upload your content to GitHub from your local machine using command line
If you don’t have .git you can download it from here: .git

Step 7: open the folder where you have saved your website right in that directory and click on “Open Bash Here”. after that you will see the following on your screen

Step 8: So we are about to finish here write the following command

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/SulimanFURC/YourName-Portfolio.git
git push -u origin master

congratulation you have succussfuly uploaded you website to the GitHub repository
now the is the step to make your website online

Step 9: click on settings and scroll down to GitHub Pages. Below is the option selector click on it and change it to master branch from “None” wait for a sec and the page will refresh by itself and after that you will see the link to your website like this https://sulimanfurc.github.io/MyPortfolio/

Hurrah!! You have successfully hosted your website on GitHub now clicking on the link will take you to your website and of course it is up and live running…

You can share this link on any social media to let the people know about your portfolio website or any other website.
So we have come to the end of this post. I hope you have learned something from it.

Please let me know in the comment section about your experience related to web development and GitHub. I will be sharing more related stuff in future
Thank you! 😉

DEV Community: Suliman Munawar Khan

How I Published my Portfolio website on GitHub