In this quick and dirty post, we will see how you can build a static Portfolio website for yourself. We will be leveraging the power of GitHub pages and the default sub-domain that you get when you create an account with GitHub.
First off, you need to be aware of what GitHub is. If you don’t, I recommend going through Git & GitHub for Beginners and if you not aware of GitHub pages, please go through Github Pages – Free Hosting as well.
A live demo of what we are going to build : http://arvindr21.github.io
Step 1 : Create a new Repo named username.github.io. If your Github username is arvindr21, your repo name would be arvindr21.github.io and gh-pages will automatically take this to be your home page. Add description if needed. Click on ‘Create repository‘
Step 2 : Navigate to Start Bootstrap or Bootstrap Zero or Luis Zuno’s blog or any other place where you can download a quick Portfolio template. You can also build a site from scratch and follow the next steps to deploy to your hosting. I picked this One Page Resume and downloaded it on my machine. (Please be aware of the License before downloading)
Step 3 : Create a folder where you want manage your site. I named my gh-portfolio. Next, open terminal/prompt here and clone the repo to your local by running
git clone https://github.com/arvindr21/arvindr21.github.io.git
Update the command with your repo name.
Step 4 : Copy the contents of your template to the cloned repo folder. Make sure that index.html file is at the root of this folder.
Step 5 : Add the changes to the remote repo. Do not forget to CD into the newly created repo folder and then run
git add -A
git commit -am "Initial Commit"
to stage the newly added files
git push origin master
to push the changes to the remote repo.
Navigate to http://arvindr21.github.io
) to see your newly created website.
If you are deploying to GitHub pages for the first time, you may need to wait for 10 -15 mins before you see the actual site.
You can also setup custom domain name if you want. Say : http://arvindravulavaru.com
and that would be redirected to your GitHub hosted page.
And whenever you want to make changes, do them locally and push it to the repo. DO NOT make changes directly to the pages.