How to Create & Host a Portfolio Website on GitHub Pages (For Freshers)

Creating your personal portfolio website is one of the best ways to showcase your skills and projects as a fresher. In this guide, you’ll learn how to:

✅ Generate a 3-page Bootstrap 5 static website
✅ Add personal content, projects, and skills
✅ Upload it to GitHub
✅ Host it for free using GitHub Pages
✅ Customize it with colors, fonts, and social media links

Step 1: Generate Your Website Code (Using ChatGPT)

Go to ChatGPT and use the following prompt to generate your portfolio:

Use This Prompt:

You are a web developer assistant. Generate a 3-page Bootstrap 5-based static portfolio website for a fresher using only HTML (no server code or advanced JS).  

Generate the following pages:
1. index.html – Homepage with a brief intro, Personal background and skills.
2. about.html – Personal background and skills.
3. projects.html – List of academic or mini-projects.

Use the following data to personalize the pages:

[Name]: John Doe  
[Education]: BCA  
[University]: XYZ University  
[Languages]: Python, JavaScript, C  
[Web]: HTML, CSS, Bootstrap  
[Database]: MySQL  
[Tools]: Git, GitHub, VS Code  
[Projects]:
- Student Management System: A PHP-based CRUD app for managing student data.
- To-Do List App: JavaScript project to track daily tasks.
- Portfolio Website: This site itself, built using Bootstrap and GitHub Pages.

Requirements:
- Use Bootstrap 5 CDN.
- Include responsive navigation with links to Home, About, and Projects.
- Show basic profile intro on the homepage, summary, education, and skill list and link to projects.html , link to download resume.pdf file
- About page should include a summary, education, and skill list.
- Projects page should show cards for each project listed above.
- Add a footer with © [Current Year] [Name].

Customize colors and fonts using Bootstrap utility classes.  
🔗 Add LinkedIn/GitHub links in the navbar or footer.

Do not use any external JS libraries beyond Bootstrap.  
Output clean HTML for each page: index.html, about.html, and projects.html.

Copy and paste the code ChatGPT gives you into three files:

• index.html
• about.html
• projects.html

Also, include your resume.pdf (your actual resume) in the same folder.

Step 2: Create a GitHub Repository

1. Go to GitHub.com and log in.
2. Click “New repository”.
3. Name the repo something like my-portfolio.
4. Keep it public and do NOT initialize with a README.
5. Click Create repository.

Step 3: Upload Your Website Files

You should now have 4 files:

• index.html
• about.html
• projects.html
• resume.pdf

Now:

1. Click “Upload files” on GitHub.
2. Drag and drop all four files.
3. Commit the changes with a message like “Initial portfolio upload”.

Step 4: Set Up GitHub Pages

To publish your site live on the internet:

1. Go to your repo’s Settings.
2. Scroll to the Pages section (left sidebar).
3. Under “Source”, choose Deploy from a branch.
4. Then select the main branch and click Save.
5. After a few seconds, you’ll see a link like:

https://your-username.github.io/portfolio-site/

That’s your live portfolio website!

Step 5: Customize Your Website

Here are two easy customizations you should make:

Customize Colors and Fonts with Bootstrap Classes

Bootstrap offers many utility classes like:

• Text colors: text-primary, text-success, text-danger
• Background colors: bg-light, bg-dark, bg-primary
• Font styles: fw-bold, fst-italic, text-uppercase

<h1 class="text-primary fw-bold">Hi, I'm John Doe</h1>
<p class="text-muted fst-italic">BCA Graduate from XYZ University</p>

Use them in headings, footers, and navbars to reflect your personal style.

Add LinkedIn/GitHub Links in Navbar or Footer

In the Navbar:

<li class="nav-item">
  <a class="nav-link" href="https://www.linkedin.com/in/johndoe" target="_blank">LinkedIn</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="https://github.com/johndoe" target="_blank">GitHub</a>
</li>

In the Footer:

<footer class="bg-dark text-white text-center py-3">
  <p>© 2025 John Doe</p>
  <p>
    <a href="https://www.linkedin.com/in/johndoe" target="_blank" class="text-white me-3">LinkedIn</a>
    <a href="https://github.com/johndoe" target="_blank" class="text-white">GitHub</a>
  </p>
</footer>

You’re Done!

You’ve now:

• Generated a modern 3-page portfolio
• Customized it with Bootstrap styles
• Added your GitHub & LinkedIn links
• Hosted it for free on GitHub Pages

📌 Bookmark your portfolio URL and use it in job applications, resumes, or LinkedIn profiles.