Dorew
- Nội dung:
- # Hướng dẫn tự làm kho ảnh miễn phí bằng GitHub Pages (khỏi lo 404 ngáo ngơ)
- # 1. Vì sao nên dùng GitHub Pages để host ảnh?
- # 2. Chuẩn bị những gì?
- # 3. Tạo repo GitHub Pages
- # 4. Tạo thư mục chứa ảnh
- # 5. Upload ảnh lên GitHub
- # 6. Link ảnh ĐÚNG là link nào?
- # 7. Custom trang 404 cho ảnh (rất nên làm)
- # 8. Test lại cho chắc
- # 9. Tổng kết cho người lười đọc
- # 10. Lời cuối
Hướng dẫn tự làm kho ảnh miễn phí bằng GitHub Pages (khỏi lo 404 ngáo ngơ)
Bài viết mang tính chia sẻ kinh nghiệm xương máu, có tí cà khịa nhẹ cho đỡ buồn ngủ.
---
1. Vì sao nên dùng GitHub Pages để host ảnh?
- ⋆ Miễn phí 100% (nghe tới chữ free là thấy thơm rồi)
- ⋆ Không giới hạn băng thông kiểu khó chịu
- ⋆ HTTPS đầy đủ, bot Google nhìn vô là gật đầu cái rụp
- ⋆ Upload xong dùng làm CDN luôn, nhúng ảnh blog vô tư
Nói ngắn gọn: nếu bạn có blog, forum, hay mấy tool auto đăng bài mà ảnh cứ die liên tục thì GitHub Pages là cái phao cứu sinh khá ổn.
---
2. Chuẩn bị những gì?
- ⋆ Một tài khoản GitHub (cái này chắc ai cũng có)
- ⋆ Biết tạo repo (bấm chuột là xong)
- ⋆ Không cần VPS, không cần hosting, càng không cần suy nghĩ nhiều
---
3. Tạo repo GitHub Pages
Tạo repo với tên:
</> codeusername.github.ioVí dụ:
</> codenhox49.github.ioSau khi tạo xong:
- ⋆ Vào Settings
- ⋆ Tìm mục Pages
- ⋆ Source chọn branch main
Chờ vài chục giây, GitHub sẽ cấp cho bạn một website dạng:
</> codehttps://username.github.io---
4. Tạo thư mục chứa ảnh
Trong repo, tạo thư mục:
</> codeimagesSau này ảnh sẽ nằm ở đây cho gọn gàng, đỡ nhìn repo như bãi rác kỹ thuật số.
Ví dụ đường dẫn ảnh:
</> codehttps://username.github.io/images/ten-anh.jpg---
5. Upload ảnh lên GitHub
Có nhiều cách:
- ⋆ Upload trực tiếp trên web GitHub
- ⋆ Dùng git push
- ⋆ Hoặc dùng tool tự code (ai trình cao thì chơi)
Miễn sao file ảnh nằm đúng trong thư mục /images là được.
---
6. Link ảnh ĐÚNG là link nào?
Đây là đoạn nhiều người hay dính đạn nhất.
❌ Sai:
</> coderaw.githubusercontent.com/.../refs/heads/main/...✔ Đúng:
</> codehttps://username.github.io/images/ten-anh.jpgHoặc nếu xài raw:
</> codehttps://raw.githubusercontent.com/username/username.github.io/main/images/ten-anh.jpgNhớ kỹ: KHÔNG CÓ refs/heads trong link raw.
---
7. Custom trang 404 cho ảnh (rất nên làm)
Nếu ảnh bị xoá hay link sai, GitHub Pages sẽ trả 404.
Thay vì để trang 404 mặc định nhìn như lỗi hệ thống, ta tự làm cái xịn hơn.
Chỉ cần tạo file:
</> code404.htmlĐặt ở root repo.
GitHub Pages sẽ tự hiểu:
"À, thằng này muốn xài 404 custom nè"
Bạn có thể thiết kế trang 404 theo style cá nhân, bio, hoặc ghi chú kiểu:
Ảnh không tồn tại, đừng cố refresh nữa
---
8. Test lại cho chắc
Thử mở:
</> codehttps://username.github.io/images/anh-khong-ton-tai.jpgNếu thấy:
- ⋆ Trang 404 do bạn thiết kế
- ⋆ HTTP status vẫn là 404
=> Chúc mừng, bạn đã làm đúng bài.
---
9. Tổng kết cho người lười đọc
- ⋆ GitHub Pages = kho ảnh free ngon
- ⋆ Ảnh bỏ trong /images
- ⋆ Link dùng domain Pages, đừng dùng refs/heads
- ⋆ Có 404.html là nhìn chuyên nghiệp liền
---
10. Lời cuối
Giải pháp này không phải thần thánh,
nhưng với blog cá nhân, forum, tool đăng bài, hay mấy project “tui xài một mình” thì quá ổn.
Xài đi rồi thấy:
“Ủa, sao hồi đó mình không làm sớm hơn?”
Chúc anh em host ảnh vui vẻ, blog ít 404, và Google crawl không chửi thầm.
