How to Build a Personal Portfolio Site on GitHub Pages with Jekyll for Frontend Developers to Showcase Projects and Attract Recruiter Outreach

User avatar placeholder
Written by Tamzid Ahmed

October 22, 2026

Every frontend developer needs a portfolio that speaks louder than code snippets. By combining GitHub Pages’ free hosting with Jekyll’s static site generator, you can create a professional, SEO‑friendly site that showcases projects and sparks recruiter outreach—without breaking the bank.

Why a GitHub Pages + Jekyll Portfolio Matters for Frontend Developers

GitHub Pages offers zero‑cost, Git‑based deployment, while Jekyll turns Markdown files into polished HTML. Together they give you version control, instant rollbacks, and a built‑in CI workflow—all essential for building trust with hiring teams.

Key Advantages

  • A tight git → build → deploy loop reduces manual errors.
  • Free custom domains (e.g., yourname.github.io or www.yourname.com).
  • Scalable for future projects or blogs.

Prerequisites and Project Setup

Before you dive in, make sure you have the following tools on your machine:

  • Git 2.20+ (or newer) for version control.
  • Ruby 3.0+ and Bundler for Jekyll installation.
  • A GitHub account with an optional custom domain.

Start a new repository on GitHub named username.github.io (or any repo you prefer if you pair it with a custom domain). Clone it locally:

git clone https://github.com/username/username.github.io
cd username.github.io

Installing Jekyll

Use Bundler to keep gem dependencies tidy:

gem install bundler
bundle init
bundle add jekyll  # pulls latest stable release

Create a basic config file (_config.yml) with your site’s metadata:

title:  My Portfolio
email:  you@example.com
url:    "https://username.github.io"
theme:  minima
# optional: collections to hold projects

Choosing a Jekyll Theme and Customizing It

Pick a theme that aligns with your style. Minimal Mistakes and Jekyll‑Theme‑Dropship are popular choices. Plug it into _config.yml:

theme: minima
# or a custom theme gem

After installing the theme’s gem and running jekyll serve, you’ll see a live preview. Customize colors, fonts, and layout by overriding theme CSS in assets/css/custom.scss.

Adding Project Showcases with Markdown & Liquid

Create a _projects collection in _config.yml:

collections:
  projects:
    output: true
    permalink: /projects/:name/

For each project, add a Markdown file in _projects:

---
layout: project
title:  Space Timer
description: A responsive countdown timer built with React and Tailwind.
link: https://github.com/username/space-timer
image: /assets/img/space-timer.png
---
Here’s a quick demo of how to use the timer…

Render the collection in a Liquid loop on the homepage or a dedicated projects page:

{% for project in site.projects %}
  

    
{{ project.title }}

    
{{ project.description }}

    GitHub Repo
  

{% endfor %}

Trick: Add a “Featured Project” Tag

Tag projects with featured: true in front matter; then filter to show only featured items on a landing banner.

Making It Responsive and Accessible

Use CSS Grid or Flexbox for layout, and incorporate semantic HTML5 tags (<section>, <article>) to aid screen readers. Test responsiveness with Chrome DevTools at 480px‑width to ensure mobile friendliness.

Accessibility Checklist

  • Alt text for images (e.g., alt="Portfolio screenshot").
  • Keyboard‑navigable navigation.
  • Contrast ratio >= 4.5:1 for body text.

Deploying to GitHub Pages and Enabling Custom Domain

Push your local changes to GitHub master or main branch:

git add .
git commit -m "Set up portfolio"
git push origin main

Select Settings > Pages in the repository; set the source to main and / (root). GitHub Pages will automatically build the site using Jekyll on push.

Adding a Custom Domain

  • Point your domain’s A records to 185.199.108.153 (GitHub’s IP).
  • Create a CNAME file with your domain (e.g., www.yourname.com).
  • Enable HTTPS via GitHub’s TLS options.

Optimizing for Performance & SEO

Performance matters to recruiters—and Google scores site speed first. Follow these steps:

  1. Minify CSS & JS with jekyll-minifier plugin.
  2. Generate responsive images using jekyll-responsive-image plugin.
  3. Leverage browser caching by adding Cache-Control headers.
  4. Attach meta tags for social sharing (“og:image”, “twitter:card”).
  5. Include an SEO title and description per page.

For content-rich showcases, write descriptive headings; for example, <h2>Space Timer – A Responsive Countdown App</h2> adds keyword relevance.

Strategies to Attract Recruiter Outreach

After building the site, make it findable and shareable:

  • Link your portfolio on LinkedIn, GitHub, and Twitter.
  • Embed a short JavaScript snippet on your GitHub README that showcases a live demo.
  • Use a custom, short URL (e.g., port.yourname.dev) for easy typeability.
  • Include a contact form powered by Netlify Forms or Formspree.
  • Highlight project statistics (stars, forks, contributors) to signal community traction.

Consistently update your portfolio with new projects or blog posts to keep recruiters engaged. Automation with GitHub Actions speeds deployment: every PR merge triggers a build and site push.

Conclusion

By harnessing GitHub Pages and Jekyll, frontend developers can create a lightweight, version‑controlled portfolio that showcases their best work and keeps recruiters coming back. Start building today, and let your code speak louder than words.

Leave a Comment