Skip to content

How to Create a Portfolio with GitHub Pages

Andrés Ujpán
Updated date:
3 min read

Portfolio example

In the vast world of programming, you need to stand out to qualify for better jobs and receive higher compensation for your experience. But how do you achieve that? In this article, we’ll tell you how.

A web portfolio is a page that compiles a selection of your work or content to introduce yourself to others. Think of it as an Instagram for your projects, but instead of getting likes, you attract the attention of recruiters to access better job opportunities.

Whether you are looking for a job or keeping your professional profile updated, showcasing your projects in a web portfolio is as essential as it is beneficial. There are many platforms to deploy your portfolio, but this time we will use GitHub Pages to make the task easier for you.

How to make a portfolio?

To make writing code easier, we have created a template that displays your GitHub repositories and more, so you only have to edit a few things. You can check it out by clicking here.

Portfolio template

Cloning the repository

  1. Go to this repository.

  2. Download the repository as a ZIP file.

    Download ZIP

  3. Extract the contents of the file.

  4. Open the folder with VS Code (File > Open Folder or Ctrl + K Ctrl + O).

Creating magic

  1. Open index.html and search for the word EDITAR (EDIT).

    Edit index.html

  2. Replace the required fields (approximately 11).

  3. Search for the word OPCIONAL (OPTIONAL) and adjust according to the comments.

  4. Open main.js in assets/js and search for EDITAR (EDIT).

    Edit main.js

  5. Change the username avdyan to your GitHub username.

  6. Delete README.md and replace the images and PDF with your own files.

  7. Open index.html in your browser to verify that everything works correctly.

Creating the repository

  1. Go to github.com/new and create a new repository.

  2. Name it, for example: portfolio, and configure it as public.

    Create repository

  3. Click Create repository.

Uploading the files

  1. Click on uploading an existing file.

  2. Drag the files (not the folder) into the browser.

  3. Click Commit changes.

    Upload files

Enabling GitHub Pages

  1. Go to Settings > Pages.

  2. Under Branch, select main, then click Save.

  3. After a few seconds, your portfolio URL will appear.

    GitHub Pages active

Conclusion

Creating a website might seem a bit tedious, but believe me, it is much easier now than before. Furthermore, it is entirely to your benefit: with a portfolio, you can introduce yourself to others and let your projects speak for you. You don’t need to explain or sell yourself; just show them your portfolio and they will be fascinated.

Previous Post
The Speed of Light and What We Observe
Updated date:
1 min read
Recommended Read
10 Essential GitHub Repositories for Developers
Updated date:
4 min read
100%