Hands-on Cybersecurity Portfolio Building Guide

If you're one of the many “cyber enthusiasts” out there trying to break into the Cybersecurity industry, but don’t know where to start, then I've got a hack to increase your visibility. It’s all good to do some hacking labs on TryHackMe or level up your defensive skills on BTLO (both great platforms which I use btw), but it’s not exactly something you fit on a single page resume… or is it?

If you want to get noticed and also be able to show off all of the hard work you have done along the way, then a cyber portfolio is the way to go. Small hacks can sometimes be the most effective and I've got one for you. Add a portfolio link to your resume. That’s it. Sounds simple, but it’s effective because it allows you to add WAY MORE surface area into your resume without taking up 10 pages (which we all know recruiters won't read). If phishing attacks have taught me anything, it’s that people love to click on links, so include it and see the difference it makes. 

So with that said, how do you set up a portfolio? While options like WIX and Squarespace exist (often at a cost) I’ll guide you through a FREE method using GitHub. GitHub not only helps you showcase your projects, but also offers GitHub Pages, where you can host your portfolio in a more visually appealing way. If you're unfamiliar with GitHub, this guide will be a great starting point. I’ll also show you how to link it with Visual Studio Code (VS Code) so you can push your projects/portfolio directly from your laptop to GitHub like a pro. Keep in mind there are many ways to do this, and this is how I put everything I learnt together to make everything click.

Okay let’s go!

If you haven’t already, go to GitHub and create an account. You can either use your name or a handle i.e. hacker name, but keep in mind employers will see this. 

1. Go to GitHub > Click Sign Up (Top right corner)
2. Enter an email and password
3. Create a cool username (or handle)
4. Decide if you want to receive emails from GitHub (enter Y for yes, N for no)
5. Pass the simple robot test (assuming you're not a robot)
6. Check your email for a verification code and enter it on GitHub
7. Answer questions if you want to personalise your experience (Optional)
8. If not, click on the skip (small writing down the bottom)
9. Done.

So once you've created your account, you can add info to your main README.md section like goals or who you are or even add a profile pic, stuff like that. This is already becoming the main part of your portfolio. A good way to show your knowledge is to have a notes section to show employers that you know your stuff. We'll do this by adding a cyber-notes repo, which we will link to VS Code further down. I'm doing it this way so you get to use GitHub GUI and VS Code CLI.

1. On your GitHub dashboard go to the + icon (top right)
2. New repository
3. Add a new repo name e.g. cyber-note
4. Check the Add a README option
5. Create Repository
6. Done

Every time you learn something new you can add it into this repo to show how your knowledge is expanding in the cyber field.

Sure you can just manually upload your stuff to GitHub in your browser every time, but what's really cool is doing it from a terminal in VS Code. It's quicker, gets you using the CLI and can improve your workflow, not to mention you'll probably use VS Code to do most of your coding if you plan on doing any web development or python. So, let's get that set up!

First go to the VS Code website and download the relevant installer file for your system, if you're using a Windows 11 system then just click the top left download. After that just open your download and then follow the installation wizard (it's very straightforward).

Once installed, you can go and customise it to how you like it. I prefer to run it in dark mode, which is great if you don't have blue light glasses. 

The last thing you need to do is sign in to your GitHub account from VS Code. This helps with things like source control view and managing workflows using the GUI, so you don't have to always rely on the command line. It also gives VS Code authorisation, so you don't have to sign in to GitHub every time you make push or pull requests.

1. Click on the account icon (bottom left)
2. Go to Sign in (This will open a browser window)
3. Sign in to your GitHub account > Always allow VS Code access
4. Done.

Okay you've created a GitHub account, downloaded VS Code and set it up. Next, we want to set up your local account with Git.

Just some quick background so you understand how this next step works and why it is important. 

So Git is a version control system, which is a simple way of saying it tracks changes you make and allows you to see 'snapshots' of what was changed and when. GitHub is a remote hosting service where you can host and share your Git repositories remotely, but Git is the underlying technology. So next we need to install Git.

1. Go to the Git website and download the relevant file.
2. Open the download > Click yes
3. Click next 
4. Click next to Keep the destination location the same (unless you have a good reason to change it)
5. Click next 
6. Click next
7. Change default editor from Vim > VS Code as default editor
8. Click next for the remaining pages and then 
9. Click Install
10. Uncheck the boxes > Click Finish
11. Done.

Once Git is installed, open VS Code to quickly setup your local Git user info, these are the details that will show on commits when you edit files locally and then push them to GitHub.

Open a VS Code terminal > Run these commands:

Next, we will pull the existing cyber-notes repo you created on GitHub earlier to your local machine.

In VS Code Go File > Open Folder > Navigate to the folder on your computer you want to link to Github 

Open a new terminal in VS Code to run these commands:

This sets up local folder to match remote folder

Note: You may get an error if you don't pull changes first (see troubleshooting if you do)

This pushes all files from local folder to remote folder

You should now have your local folder and GitHub repo initialised and linked! Now you can go ahead and make changes to current files locally or add new ones and then commit them to GitHub directly from VS Code. 

So how exactly do we commit new changes from VS Code? All you need are those few commands from earlier + a few optional ones (unless you get errors). You can do all of this via the GUI, which is only a few clicks, so I'll show you the CLI way.

Push changes from Local to Remote:
Navigate to the initialised folder

Open a new VS Code terminal > Run these commands: 

You can also check your changes and commands have worked by checking the status and logs (Optional):

To confirm changes, you can also just open your repo on GitHub and see if anything was updated

Pull Changes from Remote to Local:

Navigate to the initialised folder

Open VS Code terminal > Run these commands:

Throughout this gauntlet you've probably encountered an error or two, so you can check out the ones below that I ran into during my setups and managed to find solutions for. Hopefully they will help keep your blood pressure at a manageable level.

Error: "git not recognised"

Occurs when the Git installer may not have added Git to your system's PATH environment variable, which prevents the command line from recognizing the git command

Solution 1:

1. Go to File > preferences > settings
2. Search for git enable > ensure this box is ticked
3. Restart VS Code
4. Open terminal and run git --version
5. If you see a version no. then it worked!

If that didn't work then try solution 2:

Solution 2:

1. Go to File > preference > settings
2. search git path > Click on edit in settings.json 
3. Add the file path for git-bash.exe to the path
4. Restart VS Code
5. Open terminal and run git --version
6. If you get a version no. then it worked!

Error: "Failed to push some refs to the URL"
Occurs when the remote repository has changes that your local repository does not.

Solution:

Error: "Fatal: refusing to merge unrelated histories"
Occurs when trying to merge two repositories that were created separately or without a common commit history.

Solution:

Error: "src refspec master does not match"
Occurs when your local branch is named master and the remote is main i.e. don't match

Solution:
Rename your local branch to match to remote branch > push again

If Github is your main portfolio, think of GitHub pages like the glossary where recruiters have a high-level overview of your experience and they can easily pivot into what interests them about you. There are a few ways you can use Github pages, but I'll mention just three. One, use GitHub's pre-made templates; two, clone someone else's template that looks really cool; or three, design your own with HTML and CSS. I'm a big fan of option three because GitHub will show your changes over time i.e. your learning journey as you get better. Anyone can just clone a page, but by doing everything yourself you are learning and then GitHub is showing your progress. 

Now not to hit you with a Uno reverse card, but I'll be showing you option one, just so you can get things up and running quickly. Then if you want to convert your page to HTML later (like I did) and make it better you can.

1. Go to GitHub
2. Click the + (upper right) > new repository
3. Name the repo your_username.github.io (This creates a special repo)
4. Toggle README to on (This is where your page content will go)
5. Create repository
6. You will be redirected to your new pages repo
7. Click add file > create new file
8. name it _config.yml (This is the main styling/theme file for your page)
9. Go to settings (top) > pages  (left) > change Branch from None to Main
10. Check out GitHub docs for supported themes using Jekyll
11. Click on the theme you want and copy the theme info from the _config.yml file
12. Go back to your pages repo > click _config.yml > Click edit this file (pencil on the right)
13. Paste theme info into your _config.yml repo file
14. Commit changes
15. Done.

Example: _config.yml theme

So, at this point you have done a basic setup of your page and GitHub will be preparing your page for deployment. This may take a few minutes, but when it's done you can view it.

1. Click on actions > deployments
2. You will see a link at the top under GitHub pages
3. Click the link to see your GitHub page

Okay so the last thing you need to do is add content to your page (which will be your portfolio info). All you need to do is go into the README.md of the your_username.github.io repo you just made and add it in using markdown. It's very straightforward, especially if you're not at the coding stage yet, and is a good starting point for web development (HTML and CSS). Just make sure to copy your GitHub pages URL from the deployments section and add it as a hyperlink to your resume, this way you can keep your resume short and showcase much more this way!

Okay if you made it to the end without smashing your keyboard then well done! That was a lot to get your head around, especially if it is your first time using GitHub or VS Code. If you need to, just read through it a few times until it makes sense. I'll be honest, it wasn't the smoothest of operations for me when I first did it because I hadn't really used Git, GitHub or VS Code much, but things get easier with practice. It's all about continuous learning right? I'm sure there is a better way to get all of this done, but this is my approach and what made the most sense to me.   Hopefully you found this read helpful and maybe solved a few troubleshooting issues you may have got stuck on. 

If you want to go a step further and streamline your progress from A to B then make sure to check out CyLynk’s Job Ready Tracks. You simply choose the role you want to pursue and everything is laid out for you in a nice straight path. No wasted effort, and a mentor to help you every step of the way.

1. portfolio-website · GitHub Topics
2. FREE Developer Portfolio Hosting: GitHub Pages Tutorial 2025 - YouTube
3. How to Build Portfolio Website And Host It on GitHub Pages? - GeeksforGeeks
4. Getting Started | Markdown Guide