How To Build a Portfolio On GitHub Pages
No prior HTML or JS knowledge required
Stephen Kasina
September 30, 2021 · 6 min read
A portfolio is hands down the most effective way for developers to demonstrate their previous experience and achievements. Presenting your body of work in a well-curated manner can play a big role in helping you stand out from other job applicants, and get your potential new employer excited about the skillset you offer.
As an increasing number of developers opt to create websites for their portfolios, it can be challenging to figure out how best to create an online portfolio at an economical price. Luckily, GitHub offers an option to host your portfolio free of charge while still being accessible to a large audience. This article will guide you through the creation of a unique portfolio on GitHub without requiring any previous HTML or JavaScript experience. So, without further ado, let’s dive in!
Portfolio Creation
Select a template
There are plenty of websites providing free boilerplate HTML templates and you can use any popular theme websites to find a great option (such as Envato or TemplateMonster). The one I use personally, and that we will be using for this tutorial, can be found on HTML5up. I am not sponsored by them so this is just a convenient website I found on Google. This template does not initially come with images but, as we can access issues on other sites, this isn’t an issue. Unsplash is a great source for free reusable images in high quality which we will use later on in this guide.
I recommend that your template be professional and simple in appearance, this may mean that you need to delete quite a few details fom your current portfolio and retain only some personal information and details of previous projects. Once you decide on the template, your download should include some HTML files and possibly other fonts and images. You may unzip the files anywhere you like; if you are using the same website, I recommend something similar to Massively or Multiverse.
Set up VS Code
Once we have the template, make sure that you have Visual Studio Code installed. If you haven’t installed this yet then no worries, the steps are fairly simple and the process shouldn’t take too long. Once in VS Code, open the folder where you have unzipped the files. We will need to add the Live Server extension, which does not require any setup and is free to use. This extension will allow us to see the changes we make to the website in real-time.
Modify the code
We now have the whole project ready and can begin making our portfolio. Everything we need to modify can be found in index.html.
1.Titles and Headers
Find the header that contains the website title. It should look something like the following:
<h1>This is<br />
Massively</h1>
Here, everything in between h1 is the actual text. I will change it to “My Portfolio” but you are free to design it as you like. Now, if you have installed a website plugin for VS Code you should be able to see the updated version of the website. If you do not, make sure you have set everything up properly and go back to the previous steps.
<h1>My Portfolio</h1>
Great, over the next few steps we’ll make the portfolio look nice and add the proper texts. I will walk you through the steps for the portfolio I am using but most templates are quite similar in terms of code so personalizing your portfolio shouldn’t be an issue.
Next, you should have a line containing some sort of paragraph. One idea is to modify it to showcase what the portfolio is all about.
<p>A free, fully responsive template...</p>
Let’s change it to the following:
<p>A demonstration of my projects and experience.</p>
2.Tabs and Links
In the template I have chosen, there are several tabs that we don’t need as it’s best to keep the portfolio simple. If you have tabs as well, search for their display names in the code. In my case, I am looking for the “Generic Page”. Simply delete those lines and keep just one tab.
<li><a href="generic.html">Generic Page</a></li>
My template also has various social media links, if you’d like to get rid of those you just need to find code similar to the one below and delete it:
<li><a href="https://medium.com/@.." class="icon brands fa-medium"><span class="label">Medium</span></a></li>
If you would like to keep the social media links, change the href value to the link of your website. You can also change the icons by modifying the fa-medium part of the code to the icon of your choice. By changing the medium to GitHub you will get the proper icon to link your projects. I would recommend keeping only GitHub, LinkedIn, and Stack Overflow.
3.Images and Paragraphs
My template has a date, which is not necessary so I’m going to delete this as well. The next large header can be modified to something similar to the following:
<h2>My name is Stephen</h2>
<p>I am a passionate Software Developer.</p>
Under the name, you could place the project that you are most proud of. Simply change the link to your image and the button link, then you can have a page with a short description of that project and several images. Here is an example:
<a href="#" class="image main"><img src="images/pic01.jpg" alt="" /></a><ul class="actions special"><li><a href="#" class="button large">Check it out</a></li></ul>
As you already know, the content inside of href=” ” is a link to your page; you can style the other images and links to your projects in a similar way. This is where you can dive deep on the design of your page and make sure that your portfolio looks great.
4.Contact Details
After the projects are all set up, we can move to the bottom of the page. Here, I have a form for submitting questions. While I find this to be a helpful addition to my portfolio, it’s not entirely necessary so feel free to find something similar to what I have shown and delete it.
<form method="post" action="a">
...
</form>
Finally, there are the contact details at the end of the page. You need to replace the text with your actual details, being sure to make it look nice and clean. We have now completed the main parts of our portfolio, all the other elements are rather similar and you are free to experiment and edit everything to your liking!
Hosting the Portfolio
Now that our project is finished we can host it on GitHub Pages. If you do not have a GitHub account, it’s free to create one. Once the account is created you’ll want to go to the profile page. Next, select “Repositories” and choose “Create a New Repository”. To use GitHub Pages you need to name the project similar to the one I have shown. First, input your GitHub profile name and keep the rest. Now press “Create Repository”.
stevekasina.github.io
You do not need to know how to use Git through the command line since everything can be done through the website. Select “Upload Existing File” and copy all the files from your project to the website. You can copy the whole folder since the index file has to be easily accessible. Once all of the files have been uploaded, the portfolio is officially ready. Your portfolio is published as the project name. Copy the website name we’ve used above and you can preview the portfolio!
Final Thoughts
This article has guided you through creating a beautiful and practical portfolio that will make you stand out from any other job applicant. The portfolio is easy to make as it only requires a slight modification of the existing templates, and you’re free to use any templates you like and make your portfolio unique. I hope that you enjoyed learning this skill and that it helps you land your dream job! Thanks for reading.
