Skip to content

Commit 9377a1d

Browse files
TranHuuDat2004TranHuuDat2004
committed
add
1 parent c0ef0c6 commit 9377a1d

2 files changed

Lines changed: 179 additions & 11 deletions

File tree

‎index.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<a href="#contact">Contact</a>
4141
<span class="nav-indicator"></span>
4242
</nav>
43-
<a href="download-resume.html" class="resume-button" >Resume</a>
43+
<a href="download-resume.html" class="resume-button">Resume</a>
4444

4545
<!-- === BỔ SUNG NÚT CHUYỂN THEME VÀO ĐÂY === -->
4646
<button id="theme-toggle" class="theme-toggle-btn">
@@ -173,8 +173,8 @@ <h2 class="section-title">About Me</h2>
173173
<p class="available-status">Open to Internship</p>
174174
</div>
175175
</div>
176-
<a href="download-resume.html" download
177-
class="btn-download-resume">Download Resume <i class="fas fa-download"></i></a>
176+
<a href="download-resume.html" download class="btn-download-resume">Download Resume <i
177+
class="fas fa-download"></i></a>
178178
</div>
179179
</div>
180180
</div>
@@ -665,21 +665,23 @@ <h3><a href="post-mixamo-unity.html">Guide: Using Mixamo Assets in Unity</a></h3
665665
</div>
666666
</div>
667667

668-
<!-- Bài Blog 2 (Ví dụ) -->
668+
<!-- === BÀI VIẾT MỚI: UNITY & GITHUB PAGES === -->
669669
<div class="blog-post-card glass-card animate-on-scroll">
670-
<a href="#" class="blog-card-image-link">
670+
<a href="post-unity-githubpages.html" class="blog-card-image-link">
671671
<div class="blog-card-image">
672-
<img src="assets/blog-thumb-css.jpg" alt="CSS Grid layout visualization">
672+
<img src="assets/blog-thumb-unity-deploy.jpg" alt="Unity logo and GitHub logo">
673673
</div>
674674
</a>
675675
<div class="blog-card-content">
676676
<div class="blog-card-tags">
677-
<span>CSS</span><span>Frontend</span>
677+
<span>Unity</span><span>Game Dev</span><span>GitHub</span>
678678
</div>
679-
<h3><a href="#">A Deep Dive into Modern CSS Layouts</a></h3>
680-
<p>Exploring the power of Flexbox and CSS Grid to create complex, responsive web designs
681-
with cleaner and more efficient code.</p>
682-
<a href="#" class="blog-card-link">Read More <i class="fas fa-arrow-right"></i></a>
679+
<h3><a href="post-unity-githubpages.html">Hướng Dẫn: Deploy Game Unity Lên GitHub Pages</a>
680+
</h3>
681+
<p>Quy trình chi tiết để chia sẻ game Unity của bạn lên web miễn phí và cách khắc phục lỗi
682+
không tải được game phổ biến nhất.</p>
683+
<a href="post-unity-githubpages.html" class="blog-card-link">Read More <i
684+
class="fas fa-arrow-right"></i></a>
683685
</div>
684686
</div>
685687

‎post-unity-githubpages.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<html lang="vi">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Hướng Dẫn Deploy Game Unity Lên GitHub Pages | Blog</title>
8+
<link rel="icon" type="image/png" href="assets/favicon.png" />
9+
10+
<!-- Google Fonts -->
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet">
14+
15+
<!-- Link CSS -->
16+
<link rel="stylesheet" href="css/styles.css" />
17+
<link rel="stylesheet" href="css/blog-style.css" />
18+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
19+
</head>
20+
21+
<body>
22+
<!-- Thanh tiến trình cuộn -->
23+
<div class="scroll-progress-bar"></div>
24+
25+
<!-- Header của bạn (đã tùy chỉnh cho blog) -->
26+
<header class="main-header">
27+
<a class="logo" href="index.html"><span>tranhuudat</span>2004</a>
28+
29+
<div class="header-navigation">
30+
<nav class="main-nav">
31+
<!-- Các link này điều hướng về trang chủ -->
32+
<a href="index.html#hero">Home</a>
33+
<a href="index.html#about">About</a>
34+
<a href="index.html#skills">Skills</a>
35+
<a href="project.html" >Projects</a> <!-- Link Projects active -->
36+
<a href="index.html#experience">Experience</a>
37+
<a href="index.html#blog" class="is-active">Blog</a>
38+
<a href="index.html#contact">Contact</a>
39+
</nav>
40+
<a href="download-resume.html" class="resume-button" >Resume</a>
41+
<!-- Nút chuyển theme đã có từ trước -->
42+
<button id="theme-toggle" class="theme-toggle-btn">
43+
<i class="fas fa-sun"></i>
44+
<i class="fas fa-moon"></i>
45+
</button>
46+
</div>
47+
</header>
48+
49+
<main>
50+
<div class="container">
51+
<article class="blog-post">
52+
<header class="post-header">
53+
<h1>Hướng Dẫn Chi Tiết: Deploy Game Unity Lên GitHub Pages (Và Cách Fix Lỗi)</h1>
54+
<div class="post-meta">
55+
<span>Đăng bởi Trần Hữu Đạt</span> |
56+
<span>Ngày 15 tháng 10, 2025</span>
57+
</div>
58+
<div class="post-tags">
59+
<span class="tag">Unity</span>
60+
<span class="tag">Game Dev</span>
61+
<span class="tag">GitHub</span>
62+
<span class="tag">Tutorial</span>
63+
</div>
64+
</header>
65+
66+
<div class="post-content">
67+
<p>Bạn vừa hoàn thành một tựa game Unity tâm huyết và muốn chia sẻ nó với cả thế giới một cách nhanh chóng và miễn phí? GitHub Pages chính là giải pháp hoàn hảo. Tuy nhiên, quá trình deploy game WebGL từ Unity lên đây thường gặp một lỗi phổ biến liên quan đến file nén. Bài viết này sẽ hướng dẫn bạn toàn bộ quy trình một cách chi tiết và cách khắc phục triệt để lỗi đó.</p>
68+
69+
<h2>Bước 1: Build Game Unity với Thiết lập Chuẩn cho GitHub Pages</h2>
70+
<p>Đây là bước quan trọng nhất và là nơi hầu hết mọi người gặp lỗi. Lỗi phổ biến nhất là game không thể tải được trên trình duyệt do GitHub Pages không xử lý đúng các file được Unity nén lại. Giải pháp là chúng ta sẽ yêu cầu Unity **không nén file** khi build.</p>
71+
72+
<p>Hãy làm theo các bước sau:</p>
73+
<ol>
74+
<li>Mở lại project Unity của bạn.</li>
75+
<li>Vào menu <strong>File → Build Settings...</strong>.</li>
76+
<li>Đảm bảo bạn đã chọn Platform là <strong>WebGL</strong>. Nếu chưa, hãy chọn và nhấn "Switch Platform".</li>
77+
<li>Ở góc dưới bên trái, nhấn vào nút <strong>Player Settings...</strong>. Cửa sổ Project Settings sẽ mở ra.</li>
78+
<li>Trong cửa sổ Project Settings, chọn tab <strong>Player</strong> ở bên trái.</li>
79+
<li>Tìm đến mục <strong>Publishing Settings</strong> và mở rộng nó ra.</li>
80+
<li>Bên trong đó, bạn sẽ thấy một tùy chọn tên là <strong>Compression Format</strong>.</li>
81+
<li>Giá trị của nó hiện tại đang là <code>Brotli</code> hoặc <code>Gzip</code>. Hãy nhấp vào đó và đổi nó thành <strong><code>Disabled</code></strong>.</li>
82+
</ol>
83+
84+
<div class="post-image-container">
85+
<img src="assets/placeholder-unity-compression.png" alt="Thiết lập Compression Format thành Disabled trong Unity">
86+
<span class="caption">Bước quan trọng nhất: Tắt chế độ nén (Compression Format = Disabled).</span>
87+
</div>
88+
89+
<p>Sau khi đã tắt nén, quay lại cửa sổ Build Settings và nhấn <strong>Build</strong>. Chọn một thư mục trống để chứa các file game được build ra. Unity sẽ tạo ra một file `index.html` và một thư mục `Build`.</p>
90+
91+
<h2>Bước 2: Chuẩn bị Kho lưu trữ (Repository) trên GitHub</h2>
92+
<ol>
93+
<li>Tạo một kho lưu trữ <strong>public</strong> mới trên GitHub. Đặt tên bất kỳ bạn muốn, ví dụ: `my-unity-game`.</li>
94+
<li>Vào trang kho lưu trữ vừa tạo, chọn tab <strong>Settings</strong>.</li>
95+
<li>Ở menu bên trái, chọn <strong>Pages</strong>.</li>
96+
<li>Trong mục "Build and deployment", dưới phần "Source", hãy chọn <strong>Deploy from a branch</strong>.</li>
97+
<li>Dưới phần "Branch", đảm bảo bạn đã chọn nhánh `main` (hoặc `master`) và thư mục là `/ (root)`. Nhấn <strong>Save</strong>.</li>
98+
</ol>
99+
100+
<div class="post-image-container">
101+
<img src="assets/placeholder-github-pages-settings.png" alt="Thiết lập GitHub Pages">
102+
<span class="caption">Cấu hình GitHub Pages để deploy từ nhánh chính.</span>
103+
</div>
104+
105+
<h2>Bước 3: Tải File Game Lên và Tận hưởng Thành quả</h2>
106+
<ol>
107+
<li>Quay lại trang chính của kho lưu trữ.</li>
108+
<li>Nhấn vào nút <strong>Add file → Upload files</strong>.</li>
109+
<li>Kéo và thả **toàn bộ** các file và thư mục (bao gồm `index.html` và thư mục `Build`) mà Unity đã tạo ở Bước 1 vào khu vực upload.</li>
110+
<li>Đợi quá trình upload hoàn tất, sau đó nhấn <strong>Commit changes</strong>.</li>
111+
</ol>
112+
113+
<p>Bây giờ, hãy đợi vài phút cho GitHub Actions tự động deploy trang của bạn. Bạn có thể truy cập lại mục <strong>Settings → Pages</strong> để xem link trang game của mình (thường có dạng `https://your-username.github.io/your-repository-name/`).</p>
114+
<p>Chúc mừng! Bạn đã deploy thành công game Unity của mình lên web. Lỗi không tải được game sẽ biến mất và giờ đây bạn có thể gửi link cho bất kỳ ai để trải nghiệm sản phẩm của mình.</p>
115+
</div>
116+
</article>
117+
</div>
118+
</main>
119+
120+
<footer class="main-footer">
121+
<div class="container footer-container">
122+
<!-- Cột 1: Giới thiệu -->
123+
<div class="footer-column footer-about">
124+
<h3 class="footer-logo"><span>tranhuudat</span>2004</h3>
125+
<p>A passionate Web Developer dedicated to building beautiful and useful applications.</p>
126+
</div>
127+
128+
<!-- Cột 2: Quick Links -->
129+
<div class="footer-column footer-links">
130+
<h4 class="footer-title">Quick Links</h4>
131+
<ul>
132+
<li><a href="#hero">Home</a></li>
133+
<li><a href="assets/resume.pdf" download>Resume</a></li>
134+
<li><a href="#projects">Projects</a></li>
135+
<li><a href="#contact">Contact</a></li>
136+
</ul>
137+
</div>
138+
139+
<!-- Cột 3: Connect with Me -->
140+
<div class="footer-column footer-connect">
141+
<h4 class="footer-title">Connect with Me</h4>
142+
<ul>
143+
<li><a href="https://github.com/TranHuuDat2004" target="_blank"><i class="fab fa-github"></i>
144+
GitHub</a>
145+
</li>
146+
<li><a href="https://linkedin.com/in/tranhuudat2004" target="_blank"><i
147+
class="fab fa-linkedin-in"></i>
148+
LinkedIn</a></li>
149+
<li><a href="mailto:tranhuudat.cv@gmail.com"><i class="fas fa-envelope"></i> Email</a></li>
150+
</ul>
151+
</div>
152+
</div>
153+
154+
<!-- Dòng Copyright ở dưới cùng -->
155+
<div class="footer-copyright">
156+
<div class="container">
157+
<p>Copyright © <span id="currentYear"></span> Trần Hữu Đạt. All rights reserved.</p>
158+
<p>Last updated: <b> October 14th 2025</b></p>
159+
</div>
160+
</div>
161+
</footer>
162+
163+
<script src="js/blog-script.js"></script>
164+
</body>
165+
166+
</html>

0 commit comments

Comments
 (0)