Launch and Host Your GitHub Pages Portfolio for Free

Ready to launch your GitHub Pages portfolio—for free? Whether you're a junior developer with no portfolio or simply looking for a budget-friendly solution for hosting your GitHub Pages portfolio, this guide will show you how to get your developer portfolio live in no time using basic HTML.

This guide is for uploading static sites

Download and Install Visual Studio Code

Before creating your GitHub Pages portfolio, you will need a reliable code editor. Visual Studio Code (VS Code) is a free, lightweight, and powerful code editor developed by Microsoft. It's widely used by developers for its ease of use, vast extensions library, and built-in support for Git, making it a perfect tool for launching and managing your GitHub Pages portfolio.

How to Download VS Code:

• Head over to the Visual Studio Code Website

• Click on the Download button and choose your operating system (Windows, macOS, or Linux).

• Once downloaded, follow the instructions to set it up on your computer.

Create a Free GitHub Account

First, head over to GitHub and create a free account. GitHub is a powerful platform not only for developers but also for hosting websites for free using GitHub Pages. Once your account is set up, you're ready to start building your GitHub Pages portfolio.

Connect Your GitHub Account to Visual Studio Code

Now that you have a GitHub account, it's time to connect it to Visual Studio Code so you can seamlessly manage integration between Visual Studio Code and GitHub. This step ensures that your GitHub Pages portfolio updates and pushes are efficient and straightforward.

How to Connect GitHub to VS Code:

• Find the profile icon in the Visual Studio Code window, and click on Backup and Sync Settings.

• Click on the Sign In button.

• Select the GitHub option.

• Enter your GitHub credentials for your account.

Create a Basic Website to Upload to GitHub

If you already have a website you want to launch and host, you can skip this step.

Set Up Your Workspace

• Make sure Visual Studio Code is open.

• Click on Open Folder, then create or select a folder where you want to store your website files. This will be your project folder (e.g., my website).

• Once the folder is open, you can create a new file by clicking File > New File or using the keyboard shortcut CTRL+N (Windows) or CMD+N (Mac).

Create Your Website

• Inside index.html file, enter docs and select the auto suggestion provided from Emmet Abbreviation, which will fill in the basic HTML structure that HTML requires.

• From here, you can insert any HTML for your website. A full guide on HTML can be found at MDN Web Docs: Introduction to HTML.

Upload Your Website to GitHub and Enable GitHub Pages

After you have created your website and are satisfied with how it looks, it’s time to upload your files to GitHub and enable GitHub Pages to make your portfolio live. This step will guide you through the process of pushing your local code to your GitHub repository and configuring GitHub Pages so that anyone can access your GitHub Pages portfolio online. With just a few simple clicks, you'll be able to publicly share your portfolio with the world.

Create a New Repository Inside Visual Studio Code

• Click on Terminal > New Terminal, then copy and paste the code found in ...or create a new repository on the command line.

The code you want to copy and paste will look similar to:

echo "# my-website" >> READ.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{username}/my-website.git
git push -u origin main

• Once that is complete, you will be able to use Source Control in Visual Studio Code, where you will see your repository changes.
• It is important that you have all changes seen in Source Control within the Staged Changes section.
• Now you can enter any message along with your commit and click the Commit button.

Enable GitHub Pages in Your GitHub Repository

• Navigate to GitHub's website and go to your Profile.

• Within your Profile, click on the Repositories tab.

• Find your repository that you created for your GitHub Pages portfolio and click on it.

• Navigate to the Settings tab.

• Click on the Pages menu option.

• Under the Branch section, select the None dropdown menu and choose main, then hit the Save button.

• GitHub will take a few minutes to launch your website. After this period, refresh the page, and you will see a banner that has the Visit Site button.

• You now have a live link to your GitHub Pages portfolio that was launched and hosted for free.

Conclusion

Knowing how to launch and host a GitHub Pages portfolio may seem difficult at first, but in reality, it is simple. This is the essential first step every developer must know when building their own GitHub Pages portfolio.

This guide showcased the simplest way to launch and host a static website using GitHub Pages for free within 5 minutes.