Các trình tạo trang tĩnh sẽ rất có ích trong loại tình huống này. Chúng giúp tạo ra một trang web cho phép bạn tập trung vào nội dung và thiết kế của nó. Hugo là một chương trình như vậy. 

Hugo là gì?

Hugo là một trình tạo trang web tĩnh cho phép bạn tạo một trang web với ít hoặc không cần mã. Trình tạo trang tĩnh thường cho phép bạn viết nội dung của mình bằng một ngôn ngữ đánh dấu (markup language) đơn giản, chẳng hạn như Markdown .

Sau đó, trình tạo trang web tĩnh sẽ chuyển đổi nội dung của bạn thành các tệp HTML tĩnh. Nó áp dụng bất kỳ mẫu (template) hoặc kiểu (style) nào cho các trang của bạn trước khi cung cấp chúng cho người dùng.

Sử dụng Hugo, bạn có thể chọn từ thư viện các chủ đề (theme) và thiết kế trang web mà người khác đã xây dựng. Khi bạn đã tải xuống một chủ đề, bạn có thể bắt đầu viết nội dung của mình. Hugo chấp nhận các định dạng khác nhau để bạn viết nội dung của mình.

Theme Hugo là gì?

Bạn có thể truy cập danh sách Theme Hugo để tìm một theme để bắt đầu. Bạn cũng có thể chọn chủ đề dựa trên các danh mục khác nhau và thiết kế bộ lọc được tạo riêng cho blog, portfolio, v.v.

Bạn có thể nhấp vào một chủ đề để xem thêm thông tin. Tại đây, bạn có thể tải xuống chủ đề để bắt đầu làm việc với nó. Bạn cũng có thể xem trước chủ đề sẽ trông như thế nào sau khi bạn triển khai nó.

Cấu trúc của một trang Hugo

Sử dụng một chủ đề cho phép bạn thêm nội dung của mình mà phải thay đổi code (hoặc tahy đổi rất ít). Tuy nhiên, bạn vẫn có thể đi sâu vào code nếu bạn muốn thay đổi cấu trúc của nó. Hugo dùng các mẫu Go để sử dụng các biến và placeholder (ký tự, từ tạm thời thay thế cho dữ liệu cuối cùng) trong các tệp HTML của bạn.

Tạo dự án Hugo trên máy tính của bạn sẽ tự động tạo các tệp mặc định cần thiết cho dự án.

Các thành phần chính của dự án bao gồm:

• archetypes: Đây là nơi bạn có thể lưu trữ các mẫu có thể xác định bất kỳ định dạng hoặc dữ liệu bổ sung nào cho mỗi trang. Khi bạn tạo một trang mới, nó sẽ dựa trên một mẫu.
• assets: Đây là nơi bạn có thể lưu trữ bất kỳ nội dung nào, chẳng hạn như tệp CSS style sheet của bạn.
• content: Đây là nơi bạn có thể lưu trữ nội dung cho trang web của mình. Bạn có thể lưu trữ từng trang trong một tệp riêng biệt. Ví dụ: nếu bạn đang tạo blog, bạn sẽ sử dụng tệp Markdown cho mỗi bài đăng.
• layouts: Tại đây bạn có thể lưu trữ các đoạn mã HTML ngắn, có thể sử dụng lại, được gọi là shortcodes. Bạn có thể sử dụng chúng trong các tệp nội dung của mình.
• public: Phần này chứa các tệp và thư mục mà bạn có thể tải lên và sử dụng trên máy chủ web khi lưu trữ trang web của bạn.
• theme: Bất kỳ chủ đề nào bạn đã tải xuống từ Hugo sẽ xuất hiện ở đây.

Lợi ích của việc sử dụng Hugo là gì?

Vì Hugo khá nhẹ và tạo ra các trang web tĩnh nên trang web cuối cùng của bạn và nội dung của nó có thể tải rất nhanh. Điều này có nghĩa là người dùng sẽ không phải đợi lâu khi duyệt trang web của bạn.

Tất cả nội dung là tĩnh và không thay đổi khi người dùng đang xem trang. Do đó, bạn không phải lo lắng về các yêu cầu liên tục đến máy chủ. Bạn cũng không cần phải lo lắng về cơ sở dữ liệu, hoặc tính toán dữ liệu động.

Và bạn không cần kỹ năng lập trình nâng cao để có thể làm việc với trang Hugo. Tuy nhiên, vì bạn có quyền truy cập trực tiếp vào mã, bạn hoàn toàn có thể tùy chỉnh nó theo cách bạn muốn.

Sử dụng Hugo để tạo trang web

Hugo là một trình tạo trang web tĩnh tuyệt vời giúp chuyển đổi nội dung của bạn thành các tệp HTML thuần túy. Bạn có thể sử dụng nhiều loại chủ đề và dễ dàng xem trước trang web của mình trong quá trình thiết kế. Hugo cung cấp các thành phần có thể tái sử dụng và cấu trúc tệp tiêu chuẩn thuận tiện cùng với các lợi ích khác. 

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/hugo-static-site-generator/