How to Host Your Portfolio Using GitHub Pages

In this guide, we’ll walk through the steps to create and host your personal portfolio using GitHub Pages. Whether you’re a developer, designer, or any creative professional, showcasing your work online has never been easier. Let's get started!
By Taylor

If you don’t already have a GitHub account, you’ll need to create one. Go to GitHub and sign up for a free account.

Step 2: Create a New Repository

  1. Once logged in, click on the + icon in the top right corner and select New repository.
  2. Name your repository in the format yourusername.github.io (replace yourusername with your GitHub username).
  3. Set the repository to public and check the box for Initialize this repository with a README.
  4. Click Create repository.

Step 3: Choose a Template for Your Portfolio

You can either create your portfolio from scratch or use a template. If you prefer a template, here’s how:

  • Visit GitHub Pages Themes.
  • Choose a theme you like and click on it to view details.
  • Follow the instructions on how to clone or download the theme files.

Step 4: Upload Your Portfolio Files

  1. Go back to your repository on GitHub.
  2. Click on Add file and then Upload files.
  3. Drag and drop your website files (HTML, CSS, images, etc.) into the upload area.
  4. Click Commit changes to save your files.

Step 5: Configure Your GitHub Pages Settings

  1. Navigate to the Settings tab of your repository.
  2. Scroll down to the Pages section.
  3. Under Source, select the branch you want to use (usually main or master) and click Save.
  4. GitHub will provide you with a link to your live site, usually in the format https://yourusername.github.io.

Step 6: Customize Your Portfolio

You can edit your HTML files directly in GitHub:

  1. Click on the file you want to edit.
  2. Click the pencil icon to edit.
  3. Make your changes and click Commit changes.

For example, if you want to add a new project to your portfolio, you can edit your index.html file to include a new section:

<section>
  <h2>My Latest Project</h2>
  <p>This is a description of my latest project that showcases my skills!</p>
  <a href="https://link-to-your-project.com">View Project</a>
</section>

Step 7: Share Your Portfolio

Now that your portfolio is live, share the link on your resume, LinkedIn, and other platforms to showcase your work!

Conclusion

Using GitHub Pages to host your portfolio is a straightforward way to present your work to potential employers or clients. With just a few steps, you can have a professional-looking portfolio up and running. Happy coding!