Building a Github Portfolio With Github Pages

If you write code, you need a Portfolio – Simple as!
A portfolio allows you to showcase samples of work you have done which serves as a digital resume and proof you have the skills that you say you have in your resume.
If your a frontend or backend developer, there’s some merit in building your own website from scratch. But if you’re like me, a Machine Learning Engineer, then you’d ideally want to go for the simplest option possible.
In my opinion, that means using Github Pages. Github Pages is simply a free hosting service provided by Github – it can take HTML, CSS, and JavaScript files directly from a Github repo.
What can go in my Portfolio?
At some point, you’re going to want to beef up your Github Portfolio to ensure that potential clients/employers don’t just breeze over your application. However, knowing what can go in your portfolio is not a very straightforward task. Here are some ideas of things you may want to include in your portfolio;
- Assignments & Coursework: This may not be your highest quality work, but that doesn’t mean it is not worthy to be a part of your portfolio. All of the programming assignments and coursework you received at school or through courses are still valuable projects to have included but remember if 50,000 people took the same course and share the same thing then you’re going to have to do a bit more if you want to stand out.
- Stand-alone Projects: Stand-alone projects (or personal projects) are vital to the development of anyone that wants to advance their skills. Including this as part of your portfolio is a must and is most likely what is going to grab the attention of potential clients/employers.
- Replicating Research: When we want to learn something on a deeper level, reinventing the wheel is always a good idea. For Data Scientists, this may mean coding a Neural Network from scratch using a research paper.
- Competitions: If you ever decide to participate in competitions then sharing how you faired is a great step. Although many feel as though competitions do not replicate real-world scenarios, I feel as though there is still plenty of value to take from them and they should definitely be included as part of your portfolio (It’s even better if you can rank high in the competition).
- Blogs & Vlogs: If you create content in form of a blog or vlog then it should be included too. I feel this is a great way to also demonstrate soft skills as well as displaying your technical knowledge.
Ideally, anything that is going to give you an edge, highlights your strengths, and show the recruiter/potential client that you are capable of adding value with your ability to program is good enough to go in your portfolio.
It’s also a good idea to create some well-explained blog post, kernel, or markdown to explain what you are doing so that you cater to the non-technical audiences that may pick up your portfolio.
Creating the Portfolio
As previously stated, I am a Machine Learning Engineer and do not have much prior knowledge of web development – although, I have worked at a digital marketing agency that specialized in web development so I’ve had some exposure field and do know some small details about it.
Therefore, instead of stressing myself out to learn how to create a website, I am merely going to use a portfolio boilerplate, refactor it to suit my needs, and make it my own; Once I’m satisfied with how it looks, I’ll host it on Github.
Step 1 – Selecting a Portfolio Template
The first step is to select a portfolio boilerplate that you wish to use. To find a free boilerplate template, you can leverage your Googling skills – Google "Free HTML boilerplate templates" or "Free HTML portfolio templates" and wala!
Note: For my portfolio website, I used the website HTML5up which was recommended by a web developer called Joshua Fluke (whom this article was inspired by) on his youtube channel.

Once you’ve seen the boilerplate that you want, you need to download the boilerplate so that we can apply some modifications to get the boilerplate to fit our needs.
Step 2 – Refactoring the Boilerplate
This step requires a tiny bit of HTML knowledge, but nothing that cannot be learned within a few hours; Once the template has been downloaded, extract all the files and open the folder in an IDE of your choosing – I use PyCharm.
In your IDE, navigate to the index.html
module and open it up. Next, you want to right-click anywhere in the code and select "Open in Browser" then pick the browser of your choice – By doing this you can see both the code and the page you’re building so you know how the changes you are making to the code is affecting the page in the browser.

Step 3 – Hosting on Github
The final step is to create a new repository on Github. To leverage Github Pages hosting services, the repository name should be formatted as follows your_username.github.io
. For me, that would be "kurtispykes.github.io".

I would recommend learning Git for the next phase, but initially, we can upload a file by selecting the "upload an existing file" option then we drag and drop the individual files and commit them to Github.
Check out my Portfolio for yourself…
Final Thoughts
A portfolio is a great way to demonstrate your competencies to potential clients if you’re a freelancer/contractor or employers if you’re in the workforce. I personally believe everybody that uses code as part of their work should have a portfolio, as it’s probably the best form of evidence, as well as doubling as your digital CV.
Thanks for Reading!
If you enjoyed this article, connect with me by subscribing ** to my FRE**E weekly newsletter. Never miss a post I make about Artificial Intelligence, Data Science, and Freelancing.
Related Articles
The Most Important Data Science Project