The reason I’m writing this is because of the sheer amount of information online about this topic. Go on YouTube or search “how to make a personal portfolio website” on Google. You’ll get thousands of videos and results that will most likely overwhelm you, just like they did to me.

This guide is mainly for students who want their own corner on the internet.

A Quick Overview

Who is this guide for: Everyone, really.
What it covers: How to make your own personal website without paying for hosting or a domain.
Tools you’ll need: A working internet connection and VS Code (or any code editor). That’s it.

Before we start, I should tell you there is coding involved here. I will try my best to make it very simple. As someone from a non-coding background, I understand this can get complicated very quickly, so bear with me here. If you get stuck somewhere, I suggest your first step should be ChatGPT or Gemini to clear any misunderstanding quickly.

What You Need Before Starting

Let’s make a quick checklist:

• A computer (any will do)

• A free GitHub account

• VS Code (free code editor)

• Some storage on your local computer to store files

Step 1: Make a GitHub Account

Go to www.github.com

If you already have an account, log in. If not, let’s make one now.

You’ll see a Sign Up button with a space to enter your email address on the main page, and another in the top-right corner. Signing up is straightforward, just like anywhere else. It’ll ask for your email, password, and country.

After you click Continue, you’ll be asked to solve a small audio or visual puzzle. Once that’s done, GitHub will send a code to your registered email. Enter that, and you’re all set.

Step 2: Install VS Code

VS Code is a free code editor developed by Microsoft, and we’ll be using it to write and edit our website’s code. Don’t worry, I’ll walk you through everything.

Go to https://code.visualstudio.com/

Click Download for Windows if you’re on Windows. If you’re using another operating system, click the download button in the upper-right corner and select your version (Linux or Mac).

Once downloaded, open the file, accept the user agreement, and click Next. When you reach the “Additional Tasks” step, here’s what I recommend:

• You can create a desktop icon (optional).

• You can turn off the “Open with Code” options to keep your right-click menu clean.

• Most importantly, check the last two boxes:

  • Register Code as an editor for supported file types

  • Add to PATH

Then click Next, and finally Install.

That’s it, VS Code will be installed. Once done, open it up.

Step 3: Install Git

Go to https://git-scm.com/downloads

Download and run the installer for your operating system. Accept the terms, and keep the default settings unless you know what you’re changing.

It’s best to install Git on your local C drive, not an external one.

After installation, restart VS Code. Then, open the terminal in VS Code (Terminal > New Terminal) and type:

git --version

If you see something like this:

git version 2.44.0.windows.1

then Git is installed correctly.

Why Git Is Required

VS Code doesn’t come with Git built-in, it depends on your system’s Git installation to:

• Track file changes (commits)

• Handle version history

• Push or pull files to and from GitHub

If Git isn’t installed, you’ll either see errors or won’t have Git options in the Source Control panel in VS Code. You won’t be able to initialize a repository, make commits, or push your website to GitHub.

We’ll be coding in VS Code and then “pushing” (transferring) our changes to GitHub, where our website will be hosted. Git allows us to do exactly that.

Step 4: Download a Template for Your Website

This is the fun part. Now we’ll choose what type of website we want.

You could write your website from scratch using HTML and CSS, but that takes time and design knowledge, which many of us don’t have (including me). Yes, you can use ChatGPT to help, but it can get confusing at times.

So instead, we’ll download a template.

A template gives you a ready-made website designed by someone else, with all the files already in place.

There are plenty of sites where you can find free portfolio templates. I personally used https://html5up.net/

I downloaded the Massively template from this link

You can choose another one if you like, but if this is your first time, I suggest following along with me first, then experiment later.

Click the Free Download button to download the template.

Once it’s downloaded, go to the folder where the file is saved. Create a new folder called portfoliowebsite. The file you downloaded will likely be a ZIP file, extract it in the same location. Then copy the extracted folder into your new portfoliowebsite folder.

This way, you’ll have a working copy to edit, and a clean backup in case you need to start fresh.

Step 5: Open, Edit, and Live Preview Your Website

This is the “coding involved” part I mentioned, but don’t worry, we’re only editing text.

Open VS Code (from Step 2). Click File > Open Folder, and select the portfoliowebsite folder you created earlier.

You’ll now see all the template files in the sidebar. It might look intimidating, but we only care about one file right now: index.html.

Before editing, let’s install one more tool to make things easier.

In VS Code, click the icon with four squares on the left (the Extensions tab). Search for Live Server by Ritwick Dey and click Install.

Now, go back to your files, right-click index.html, and select Open with Live Server.

Your website will open in your browser. It might look slightly different from the preview, that’s okay. The important thing is that it’s live.

Now, click index.html in VS Code to open it in the main editor.

You’ll see a lot of code, but if you look closely, you’ll also see text from the demo site. Find the main heading, in the Massively template, it says “This is Massively.”

Change that to your own name, for example:

Save the file (Ctrl + S) and look at your browser. It will automatically refresh and show your change.

That’s it! Now you can go through the file and replace all the placeholder text with your own “About Me,” “Projects,” and “Contact” sections.

Step 6: Create Your “Home” on GitHub

Now that you’ve personalized your website, it’s time to put it online. This is where your GitHub account from Step 1 comes in.

This step is critical, follow it carefully.

Go to www.github.com and log in. In the top-right corner, click the + icon and select New repository.

On the “Create a new repository” page, you’ll see a box for the repository name. You must name it in this exact format:

For example, if your GitHub username is mkfinance123, your repository name must be mkfinance123.github.io.

Tips for beginners:

• Your username is what you use to log in. You can also see it at the top-right when you click your profile picture.

• Case (capital letters) matters, match it exactly.

• If you get an error saying the name is already taken, check your existing repositories. If it’s already created, use that one.

Set the repository to Public. Do not check any of these boxes:

• Add a README file

• Add .gitignore

• Choose a license

Why not? Because you already have all the files (like index.html) from the template. If you add extra files, Git will think there’s a conflict between your local and online folders.

Double-check that:

• The name is exactly your-username.github.io.

• The repository is Public.

• All boxes are unchecked.

Click Create Repository.

You’ll now see a “Quick Setup” page with some commands. Keep this tab open, we’ll use those commands in the next step.

Step 7: Push Your Website from VS Code to GitHub

Now we’ll upload (or “push”) your local website files from your computer to your GitHub repository.

In VS Code, open the terminal (Terminal > New Terminal) and type these commands one by one, pressing Enter after each:

git init

git add .

git commit -m "My first website commit"

Next, go back to your GitHub repository page and copy the two lines under the section that says “…or push an existing repository…”. They’ll look like this:

git remote add origin https://github.com/your-username/your-username.github.io.git

git branch -M main

git push -u origin main

Press Enter after each.

Once that’s done, your files are uploaded to GitHub.

Common Errors

Error: git: command not found
→ This means Git wasn’t installed properly or VS Code needs a restart. Close and reopen VS Code. If it still fails, reinstall Git and make sure you check the Add to PATH box during installation.

Error: failed to push some refs
→ This usually happens if you checked the “Add a README file” box in Step 6. Type this command to fix it:

git push -f origin main

This force-pushes your files and replaces any existing ones (safe as long as the repo was empty).

Step 8: Go Live

Now let’s make your website public.

1. On your GitHub repository page, go to Settings.

2. In the left sidebar, click Pages.

3. Under “Build and deployment,” set the Source to Deploy from a branch.

4. Ensure the branch is set to main and the folder is /(root).

5. Click Save.

Wait a few minutes, refresh the page, and you’ll see a green box with your live link:

https://your-username.github.io

Troubleshooting Common Errors

404 “File Not Found”?

• Wait up to 10 minutes for the first deployment.

• Check that your main file is named index.html.

• Make sure the repository name is exactly your-username.github.io.

Website looks broken (missing styles or images)?

• Check that all links to CSS or images are relative paths, like assets/css/main.css, not absolute paths like C:/Users/YourName/....

Step 9: How to Update Your Site

Once your website is live, updating it is simple.

Just open your files in VS Code, make your changes, and run these three commands:

git add .

git commit -m "Add new update"

git push

Your updates will appear on your live website within a minute or two.

Final Thoughts

That’s it, you’ve just built and hosted your personal website for free.

It might seem a bit technical at first, but once you go through it step by step, it’s actually straightforward.

Most online guides make it sound complicated. My goal here was to make it practical and human, the kind of explanation I wish I had when I started.

Now, go ahead and make your website your own space on the internet. Replace text, upload projects, and tweak the design however you like.