Tay trắng làm nên một trang web cá nhân chuyên nghiệp không tốn một xu (Phần 2)
Bài đăng này đã không được cập nhật trong 6 năm
Tạo trang web bằng Hugo từ đầu đến đuôi
Nối tiếp phần một, ở phần 2 này chúng ta sẽ làm một trang web từ một bộ giao diện độc lập.
Giao diện bạn chọn tốt nhất nên là sử dụng Bootstrap (3 hoặc 4) để nó có responsive (hiển thị trên điện thoại gọn đẹp). Sau đây chúng ta hãy đi làm bước 1, đi tìm một giao diện ưng ý và áp dụng nó vào Hugo nhé.
SPOILER: Vì trong video giải thích khá kỹ nên mình k giải thích thêm ở ngoài nữa nhé. Các bạn cứ xem video lần lượt từng bước sẽ hiểu.
Bước 1: Tìm theme Bootstrap và đưa vào Hugo
Hãy làm theo từng bước như video sau đây:
Bước 2: Cắt giao diện index.html thành các trang con (trang partial)
Hãy thực hành như trong video sau đây:
Bước 3: Tạo data động dạng file và gọi từ trang partial (Load data động cho partial)
Hãy thực hành như trong video sau đây:
Bước 4: Bước đầu tạo trang đa ngôn ngữ, tạo một select box để chọn ngôn ngữ cho trang web
Hãy thực hành như trong video sau đây:
Bước 5: Dịch một trang partial ra đa ngôn ngữ bằng thư mục data
Hãy thực hành như trong video sau đây:
Bước 6: Biến Menu cố định thành menu động đa ngôn ngữ
Hãy thực hành như trong video sau đây:
Bước 7: Sử dụng i18n để translate đa ngôn ngữ một số chuỗi dùng chung
Hãy thực hành như trong video sau đây:
Bước 8: Đưa thêm một giao diện thứ 2 vào (trang CV Profile)
Hãy thực hành như trong video sau đây:
Lời cuối cho cuộc tình
Như vậy là tôi vừa trao vào tay các bạn một công cụ cực kỳ mạnh mẽ để tạo ra các trang web tĩnh từ data động. Sử dụng Hugo cho chúng ta các ưu điểm sau đây
- Tạo ra trang đa ngôn ngữ cực kỳ dễ dàng, dễ quản lý và chỉnh sửa.
- Tạo ra trang có nhiều master template dễ dàng (trang có nhiều section mỗi section lại có html body độc lập)
- Tạo và quản lý các thành phần dùng chung dạng partial dễ dàng.
- Chạy nhanh như ngựa.
Từ bây giờ, bạn đã có thể lao ngay ra ngoài đường và gào to "Ala Hugo Akba" 
Lời cuối cùng, xin chúc cho các bạn có được một website đẹp như mơ nhé!
Hỏi ngu 1: Từ từ hẵng! Thế còn phần CONTACT, submit email address hoặc ấn nút gửi liên hệ thì giờ làm thế nào để lưu lại vì chúng ta không có backend?
Hỏi ngu 2: Uh nhỉ? Thế còn phần Blog, rồi comment cho các bài viết ở Blog, rồi làm SEO, sitemap. Rồi cả share facebook nữa? Định ôm con bỏ chợ à?
Rồi rồi! Cứ bình tõm các bạn trẻ. Hãy dành đất diễn cho phần tiếp theo, phần 3 nhé =)))
All rights reserved
