Create a Portfolio and Host for Free using GITHUB
By: Srajan Rai
Tags: Free, Hosting, Github, Website Development, Portfolio

If you are thinking to build a portfolio and hosting it for free then this would be the perfect place start off.

Steps: There are 5 major steps in creating a portfolio( each step will be explained in detail below) and hosting it.

Download a template of your choice from online free portfolio template.

2. Using your choice of IDE( I have used Visual Studio) make the necessary changes

3. Create a repository in GIT

4. Upload the files

5. Host the website designed using GIT

Step 1: Download the free template:

There are 100’s of websites where you can get a free template for your portfolio I have listed a couple of them over here, you can choose as per your preference.

Once the download is complete, Unzip/Extract the files.

Files Required

You need two files/ folders index.html, assets( may vary as per the website and template), assets will contain the Java script and CSS for your website. At the moment you do not have to worry about it.

index.html contains all the code, this will be the only file where you need to make the changes, you can see the live demo in the template from where you have downloaded the template and make changes accordingly( Name, address, email, work experience, education, interests, projects)

If you have a decent knowledge with html, CSS, Java Script then you can also customize as per your requirement.

Step 2: Choosing the IDE ( Integrated Development Environment)/ Editor

I have chosen visual studio since I am comfortable using that if you find it complicated you can choose any editor to make the changes. I have listed a couple of them below:

Open the folder using the IDE / Editor and open the index.html file. Make changes ( easy way is cmd+F ( for mac users) and cntrl+F ( for windows users) search for the key word and replace those.

How to replace the profile pic Images in the html?

There will an anchor tag with “img” find it and provide the path for the image for src =” file path”.

Step 3: Create a Repository in GIT

Before creating a repository you need to have a account in GIT if you do not have an account create one.

Once the account is created on the top right, click on “+” sign and click on New repository.

The Repository name should variablename.github.io ( here variable_name can be your name ) and in the description you can provide a description as “portfolio”. The status is by default public leave it as it is.

Click on Create Repository, Now your repository is ready.

Step 4: Upload the Files

There are different ways to upload the files

Easiest way is it to drag and drop in the code section of the repository.

Click on Upload an existing file

Either you can drag and drop or choose the files from the folder.

This is easiest way of uploading the files but if you are a developer then this method is not recommended.

The next method is from command prompt.

Open the command prompt:

Move to the folder where the files are located

the commands used are

cd foldername : To move inside the folder

ls: To see the files inside the folder

Once you are inside the folder which has the necessary files

The commands used for uploading the files in GIT

git init : initialization of GIT

git add . : to add all the files inside the folder

git add <filename> : to add particular file inside the folder / if updated during the development

git remote add origin https://github.com/srajan95/srajanrai.github.io.git : To establish a remote connection with the GIT, you will get the url once you open the repository, the syntax is https://github.com/username/repositoryname.io

git clone https://github.com/srajan95/srajanrai.github.io.git :clone the files into the local

git commit -m “comment” : Once the files are added it needs to be committed and add comments to understand the changes which will help in version control or revert the changes

git push -u origin: Push the code to GIT

( Errors that I remember that could possibly arise)

During the push if there exists an error : ideally fatal error due to connection establishment:

simple way is remove the connections and establish again

git remote rm origin: removes the connection

git remove -v: Shows the number of connections established

Step 5: Host the website designed using GIT

Go to settings in the repository

Scroll down to GitHub Pages section:

Select the branch as main and root folder then click on Save

Your Portfolio is hosted for free

You can access the portfolio using the link posted just above the Source as shown in the image above.

Thank you

Article by — Srajan Rai