How to create a stunning personal portfolio website for free
By: Sharan Kumar Ravindran
Tags: Portfolio Website, Data Science, Portfolio

How to create a stunning personal portfolio website for free

A personal portfolio website is like a digital resume. It can make a lot of difference in your career. It can be a great platform for you to publish your work and portfolio, it could help in gaining an audience or followers for yourself, it could be a great way to impress or attract employers. It can also act as your digital resume and can help in bringing some good opportunities your way.

What are the steps involved in building a personal website using GitHub Pages?

Many might have some questions regarding the technical capabilities that would be required to build a personal portfolio website, the good news is just a little bit of knowledge about HTML and CSS is enough to set-up your own personal website using GitHub pages. Besides, maybe some background about basic git commands can be helpful. If you have no idea about HTML, CSS, or Git Commands, it will be still fine. I have provided the details and references to help you create one for yourself.

The steps involved are,

Step 1 — Create a GitHub repository for your website

Step 2 — Download a free template

Step 3 — Modify the template to your requirement

Step 4 — Make the contact form work using Formspree

Step 5 — Publish the code to your GitHub Page repository

Step 6 — Create a domain in your name

Step 7 — That’s it, your website is ready!

In the article, I will be providing you guidelines on building a personal portfolio website for free using GitHub Pages with some amazing functionalities like having a contact form so that users can contact you directly from your website. I will also provide you details about getting some amazing templates and tools for free that will make empower your website to look dynamic. The only potential cost would the domain cost if you choose to have a custom personal URL but otherwise, it will be completely free.

Step 1 — Create a GitHub repository for your website

Go to your GitHub and create a new repository in the below format. This is different from a regular repository and hence follow the naming conventions. The structures for a personal website and organization are slightly different here in this article we are going to see in detail about the personal portfolio website.

Please Note, the name of this repository should be [Your Git User Name].github.io

In my case, the username of my GitHub account is “rsharankumar”, please use your user name and create this repository. You can configure the readme file later also if you are going to use a custom domain and point it to this site then you would need to add a file named “CNAME” as well, this file should have the name of your domain. You can find my repository here

Step 2 — Download a free template

There are several free HTML templates available for us to use. One such website offering a variety of free templates is HTML5, check this out and once you have identified the template that matches your requirement, download it.

There was a template called Dimensions which I found to be a perfect match for my requirement. Here is a screenshot of the template as shown on their website

Free template from HTML5

Alternatively, if you don’t find the options interesting then you can create one for yourself from scratch as well or buy a template.

Step 3 — Modify the template to your requirement

Open the template that you have downloaded and start making changes to it. A little bit of knowledge about HTML and CSS is mostly enough to make the required modifications to the template. First try to focus on fixing the contents in the template, remove the modules that you feel are not required for your purpose and start editing the high-level contents like your name, your basic profile information, and the details that can be focused on as we progress.

Some key points to keep in mind while updating the template

Provide your Name and summary on the Home page

Update links to your social media profiles

Add your profile picture to the website

Add additional information about yourself and your portfolio

Add links to places where you write, contribute, or participate. Don’t forget to add links to your blogs, kaggle profile, and other places related to your work

Step 4 — Make the contact form work using Formspree

Providing links to your social media profiles should be enough for anyone stumbling upon your website to reach but having a contact form will make it look more professional. In general, to make the contact form work you need to have a dedicated server but with the help of Formspree, it is now easy.

Create an account in formspree and make a note of your form id. Now go to the website folder and open the “index.html” and go to the session that has the code for the Contact Form. And update the “form_id” highlighted below with yours and ensure that the method = “post”.

Screenshot from Formspree

That’s it, now you have a working contact form as well, so now your website visitors can just directly use the form to contact you directly instead of taking additional effort to reach you on other means.

Step 5 — Publish the code to your GitHub Page repository

Once you are comfortable with the updates you have made to the repository then it is time to push to code to the repository you have created.

Open terminal/shell if you are using a Mac/Linux or tool such as Git Bash if you are using Windows machines.

From the terminal or gitbash, go inside the folder directory where you have the scripts and files of your website.

Initialize the directory using the “Git init” command

And just for the first time add the remote repository using the below command

Use can use the “git add” command to move your changes to the staging area. The command to be used is

Then use “git commit” to save the changes with a suitable message

Finally, push the scripts and files to the repository using git push. The command would look like

If you have any questions about this process refer to the article here. It clearly explains the steps involved.

Step 6 — Create a domain in your name

If you would want to make it more professional or if you would like to have a custom URL, then buy a domain and point it to this GitHub page. If you are not sure about buying a domain and making changes to it, then refer to the article here.

Step 7 — That’s it, your website is ready!

Here is the link to my website. If you are not using a domain for yourself then it is completely free and can be created in under an hour. If you are using your own domain then it might take slightly more than an hour as the updates made to your domain would take a bit of time to reflect. Refer below for video tutorial on creating a personal portfolio website,