Quay lại Blog

Cách updet profile github đẳng cấp anime

Published on June 19, 2026

Thời gian gần đây, việc sở hữu một profile GitHub xịn xò không chỉ giúp bạn ghi điểm với HR mà còn là nơi thể hiện cá tính riêng của một developer. Thay vì để trang cá nhân trống trơn với vài dòng text nhàm chán, bài viết này sẽ hướng dẫn bạn cách tạo một "mặt tiền" GitHub chuyên nghiệp, tích hợp cả trạng thái Discord real-time.

Lưu ý:

  • Cách mình hướng dẫn trong bài yêu cầu bạn cần có một chút kiến thức cơ bản về Markdown và thẻ HTML.

  • Đối với phần Widget Discord, bạn bắt buộc phải bật tính năng Developer Mode trên Discord để lấy User ID.

Khởi tạo "Kho tàng bí mật" trên GitHub

Tính năng Custom Profile thực chất là một easter egg được GitHub ẩn giấu. Để kích hoạt nó, bạn cần tạo một Repository đặc biệt.

Đầu tiên, hãy truy cập vào GitHub và tiến hành tạo cho mình một repository mới. Nhấn nút New ở góc trái màn hình. Tại phần Repository name, bạn BẮT BUỘC phải đặt tên trùng khớp với Username GitHub hiện tại của bạn.

Sau khi nhập đúng tên, GitHub sẽ hiện ra một thông báo đặc biệt. Lúc này, hãy nhớ tích chọn vào ô Add a README file và nhấn Create repository.

Xây dựng giao diện với Tech Stack và Tools

File README.md bạn vừa tạo chính là giao diện trang cá nhân. Để hiển thị các công cụ (Tech Stack) một cách chuyên nghiệp mà không cần tốn thời gian tải từng ảnh, chúng ta sẽ tận dụng API của skillicons.dev.

Đây là một open-source cho phép bạn gọi các icon dưới dạng thẻ <img> cực kỳ sắc nét. Bạn chỉ cần điền tên viết tắt của các công nghệ vào sau biến i=.

Ví dụ, nếu bạn dùng TypeScript, React, và NextJS:

HTML 
<a href="https://skillicons.dev">
  <img src="https://skillicons.dev/icons?i=ts,react,nextjs,figma,ai" />
</a>

                                       

Tích hợp Discord Custom Widget bằng Lanyard

Đây là phần ăn tiền nhất giúp profile của bạn trở nên sống động. Thay vì tự code server để lấy trạng thái Discord, chúng ta sẽ dùng API của Lanyard. Nó sẽ hiển thị bạn đang offline, online, đang nghe nhạc Spotify hay đang chơi game gì theo thời gian thực.

Cú pháp để nhúng Widget này vào file README như sau:

HTML 
<a href="https://discord.com/users/YOUR_DISCORD_ID">
  <img src="https://lanyard.cnrad.dev/api/YOUR_DISCORD_ID?theme=dark&borderRadius=15px" width="400"/>
</a>

Cách lấy ID Discord:

  1. Mở Cài đặt Discord -> Advanced -> Bật Developer Mode.

  2. Thoát ra ngoài, chuột phải vào Avatar của bạn -> Chọn Copy User ID.

  3. Thay dải số đó vào vị trí YOUR_DISCORD_ID trong đoạn code trên.

                                 

Mẹo nhỏ xử lý lỗi Cache của GitHub: Đôi khi GitHub sẽ lưu bộ nhớ đệm (cache) khiến ảnh Widget của bạn không tự động bo góc hoặc không cập nhật trạng thái mới. Nếu gặp trường hợp này, hãy thêm tham số &v=1 (hoặc một số bất kỳ) vào cuối đường link API của Lanyard để ép GitHub tải lại ảnh mới nhất.

Tổng hợp Source Code hoàn chỉnh

Mặc dù việc thiết kế phụ thuộc vào gu thẩm mỹ của mỗi người, nhưng dưới đây là toàn bộ Source Code mẫu để bạn có thể copy và tùy biến lại theo ý thích.

Lưu ý quan trọng: Khi copy code HTML vào file .md, bạn tuyệt đối không được dùng phím Space hoặc Tab để lùi đầu dòng. Việc thụt lề sẽ khiến GitHub hiểu nhầm đó là Code Block và hiển thị sai bố cục.

Chúc các bạn thành công tạo ra một profile thật "cháy" cho riêng mình!