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
Bình luận
Ngon, dùng mấy trang này làm CV xin việc được đấy.
:v hay bài bác viết toàn những bài hay
phần 3 sao lâu zậy bạn ?
Có vẻ mọi người không quan tâm nhiều lắm đến series này nên mình không có hứng post tiếp. Cám ơn bạn đã chia sẻ.
Cá nhân mình lại thấy những series như thế này lại rất hay và thực tế. Nhiều bạn khác post những bài lý thuyết xa vời (đa số dịch lại là chính) mình thấy chẳng giúp ích được mấy so với các series mang tính thực tiễn như của bạn. Thật ra để làm những series như của bạn thì tác giả phải rất đào sâu nghiên cứu vì ai cũng biết lý thuyết và sản phẩm thực tế khác nhau xa vời vợi. Hy vọng bạn suy nghĩ lại và hoàn tất sery này. Mong đợi
mong anh ra tiếp phần 3, cảm thấy series rất bổ ích, cách viết của anh cũng dễ hiểu. Cảm ơn anh
hóng phần 3 lắm
Share bạn bè và upvote thật nhiều để mình có động lực làm phần 3 nhé bạn.
mình cũng mong phần 3 lắm , đã upvote
Cái {{ partial "head.html" . }} có xài được lúc code bình thường mà không chạy hugo server không bác Mình làm thử mà thấy nó k load cái partials đó v có cách nào để chia file index.html thành nhiều phần nhỏ bên trong trang đó không nhỉ ?
Html thuần bình thường thì không có cách nào viết tách rời được kiểu html gọi html đâu bạn.
Hugo sẽ giúp viết tách từng html riêng lẻ, khi chạy
hugo serverthực ra là nó ghép nhiều html lại thành 1 file html hoàn chỉnh để hiển thị. Bạn có thể hình dung là mỗi trang nó đều sẽ nhét header và footer lần lượt vào. Còn nếu bạn edit html thuần thì dĩ nhiên khi sửa 1 header ở index.html thì bạn phải edit toàn bộ tất các các file còn lại.cho e hỏi thường thì người ta dùng hugo server để làm web nhiều hơn hả bác. Mong bác ra phần 3 với ạ
Có lẽ bạn cần phải xem lại bài viết này của mình để hiểu hơn về cách làm web nhé: https://viblo.asia/p/djeZ1DBoKWz
Về cơ bản thì làm web sẽ có 2 dạng là web tĩnh và web động. Hugo sẽ giúp làm trang web tĩnh. Web tĩnh thì chỉ đọc và không thao tác gì được.
Còn web động thì ví dụ như trang facebook, bạn đọc tin sau đó có thể ấn Like, viết Comment được.
PHẦN 3 CỦA TÔI ĐÂU !!!!
Đùa chút
Thanks thớt rất nhiều.
Seri rất hay và thực tiễn. Mong thớt ra nốt phần 3 cho mọi người cùng đọc :3
Phần 3 đi bác êi
Hóng phần 3 lâu quá anh ưi
))
Mong anh làm thêm phần 3, series hay, nhiều người mong đợi mà.
Rất mong chờ phần 3 của seri này ạ
rất thích đọc các bài viết của bạn. Mong có phần 3
Cảm ơn anh về 2 bài viết. Đọc xong 2 bài viết em mới hết lạc trôi giữa front-end và back-end. Mong rằng anh sẽ tiếp tục viết thêm nhiều bài viết ý nghĩa như v. Em cảm ơn.
Như bao người... em hóng phần 3
2 bài viết của anh rất hay và mang rất nhiều tình cảm Em cx có ý kiến là em cũng rất đang hóng phần 3 của phần 2 này ạ
