Năm 2024, một nghiên cứu của TopCV cho thấy 73% nhà tuyển dụng IT xem portfolio trực tuyến trước khi quyết định mời phỏng vấn. Nếu bạn là fresher và chưa có gì ngoài file CV, sử dung GitHub Pages chính là công cụ để thay đổi điều đó hoàn toàn miễn phí, không cần hosting, không cần biết server-side.
Nội dung
1. GitHub Pages là gì?
GitHub Pages là dịch vụ hosting tĩnh miễn phí do GitHub cung cấp, cho phép bạn publish website trực tiếp từ một repository. Bạn push code lên, GitHub tự động build và serve mà không cần mua hosting, không cần cấu hình Nginx hay Apache.
Với fresher, đây là lợi thế kép vừa có portfolio online sẵn sàng chia sẻ, vừa có một repository public thể hiện rằng bạn biết dùng Git – kỹ năng cơ bản nhưng nhiều nhà tuyển dụng vẫn lọc ngay ở bước này.
Wix hay WordPress.com cho bạn website đẹp hơn nhanh hơn nhưng domain sẽ là yourname.wix.com, không phải yourname.github.io. Trong mắt HR tech, domain github.io chứng minh technical background. Netlify hay Vercel cũng là lựa chọn tốt, nhưng GitHub Pages không yêu cầu tạo thêm tài khoản nào khác nếu bạn đã có GitHub.
2. Hướng dẫn sử dụng GitHub Pages tạo portfolio cá nhân
2.1 Bước 1: Tạo repository đúng chuẩn trên GitHub
Đây là bước nhiều người mắc lỗi nhất. GitHub Pages có một quy tắc đặc biệt: nếu tên repository là <username>.github.io, website của bạn sẽ được serve tại địa chỉ đó. Ví dụ: tài khoản nguyenvana tạo repo tên nguyenvana.github.io, website sẽ là https://nguyenvana.github.io.
Lưu ý: Tên repo phải khớp chính xác với username GitHub (phân biệt chữ hoa/thường). Sai một ký tự, tính năng Pages sẽ không hoạt động đúng.
2.2 Bước 2: Tạo file index.html – portfolio tối giản nhưng chuyên nghiệp
Tạo file index.html trong thư mục vừa clone. Dưới đây là cấu trúc tối thiểu nhưng đủ ấn tượng:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nguyễn Văn A | Front-end Developer</title>
</head>
<body>
<!-- Sections: Hero, About, Projects, Skills, Contact -->
</body>
</html>Sau đó commit và push lên GitHub:
git add .
git commit -m "feat: initial portfolio page"
git push origin main
2.3 Bước 3: Bật GitHub Pages trong Settings
- Vào Settings của repository: Chọn tab Pages trong menu bên trái.
- Chọn Source: Mục Build and deployment → Source, chọn “Deploy from a branch”.
- Chọn branch main, thư mục / (root): Click Save. GitHub sẽ build trong ~30-60 giây.
- Truy cập URL: Sau khi build xong, URL sẽ hiện ngay trong trang Settings → Pages. Truy cập thử
https://username.github.io.
2.4 Bước 4: Trỏ domain riêng
Nếu bạn có domain riêng (ví dụ: nguyenvana.dev từ Namecheap hoặc Cloudflare), hãy thêm một file tên CNAME vào root repo với nội dung là domain của bạn:
# Nội dung file CNAME
nguyenvana.devSau đó vào DNS của nhà cung cấp domain, tạo bản ghi CNAME trỏ từ www về username.github.io. GitHub cũng hỗ trợ HTTPS miễn phí qua Let’s Encrypt tự động.
3. Nội dung cần có trong Portfolio để gây ấn tượng với HR?
Nhiều fresher mắc lỗi là làm portfolio quá “kỹ thuật”, tức là đầy công nghệ nhưng thiếu context. HR nhìn vào và không hiểu bạn đã giải quyết vấn đề gì. Dưới đây là 5 thành phần không thể thiếu:
- Hero section: Tên, title (e.g. “Front-end Developer”), và một câu pitch ngắn gọn về bạn.
- Projects (2 – 3 dự án tốt nhất): Mỗi project cần: ảnh demo/screenshot, mô tả bài toán, stack sử dụng, link GitHub + live demo.
- Skills: Không liệt kê hết mọi thứ mà tập trung vào tech stack bạn tự tin nhất. Chia nhóm rõ ràng: Languages / Frameworks / Tools.
- Contact: Email và LinkedIn là đủ. Bỏ số điện thoại nếu bạn không muốn bị cold-call.
- GitHub activity graph: Nhúng contribution graph vào portfolio là một chi tiết nhỏ nhưng tăng uy tín đáng kể.
Sau khi có portfolio online, đây là những điểm tinh tế mà nhiều fresher bỏ qua:
- Tốc độ tải trang: GitHub Pages serve HTML tĩnh rất nhanh nhưng nếu bạn nhúng ảnh nặng hay font từ CDN chậm, PageSpeed sẽ giảm. Dùng WebP thay JPEG, và preconnect CDN.
- Mobile-responsive: HR thường mở link portfolio trên điện thoại trong lúc đi lại. Nếu layout bể trên mobile, ấn tượng đầu tiên sẽ âm.
- Meta description: Thêm
<meta name="description">và Open Graph tags để khi share link trên Slack/LinkedIn hiện đúng preview. - Custom 404 page: Tạo file
404.html– chi tiết nhỏ cho thấy bạn chú ý đến UX. - Analytics: Thêm Google Analytics hoặc Plausible – sau đó khi đi phỏng vấn, bạn có thể nói “portfolio của tôi đang có X lượt truy cập/tháng”.
>> Xem thêm: CV Backend Junior Bị Loại: Sửa Sao Để Được Gọi Phỏng Vấn
4. FAQ – Câu hỏi thường gặp khi sử dụng GitHub Pages
GitHub Pages có hoàn toàn miễn phí không?
Có. GitHub Pages miễn phí cho tất cả tài khoản GitHub (cả Free lẫn Pro) đối với repository public. Giới hạn duy nhất là dung lượng tối đa 1GB và băng thông 100GB/tháng. Con số này đủ cho hàng chục nghìn lượt truy cập.
Có cần biết HTML/CSS không? Có thể dùng template không?
Hoàn toàn có thể dùng template. Các nguồn template miễn phí phổ biến: HTML5 UP, Start Bootstrap, hoặc tìm “github pages portfolio template” trực tiếp trên GitHub. Nếu đã biết React, bạn cũng có thể deploy React app lên GitHub Pages bằng gh-pages package.
Update nội dung portfolio như thế nào?
Chỉnh sửa file local, commit và push lên GitHub. GitHub Pages sẽ tự động re-deploy trong vòng 1 – 2 phút. Không cần login vào bất kỳ control panel nào.
Có thể dùng Jekyll không?
Được. GitHub Pages hỗ trợ Jekyll natively, bạn có thể dùng Jekyll themes để có blog tích hợp vào portfolio mà không cần build step phức tạp. Tuy nhiên với mục tiêu 30 phút để có kết quả, HTML tĩnh là lựa chọn tối ưu hơn cho lần đầu.
> Xem thêm: [Thực hành] Tạo dự án mới trên GitHub – CodeGym
0 Lời bình