Anotip
Bài viết này sẽ hướng dẫn bạn tạo blog bằng gohugo (Hugo), một hệ thống tạo trang web tĩnh mạnh mẽ. Tận dụng ngôn ngữ lập trình Go và cấu trúc linh hoạt.
Gohugo (Hugo) là gì?
Gohugo là một hệ thống tạo trang web tĩnh mã nguồn mở, được viết bằng ngôn ngữ lập trình Go. Được biết đến với tên gọi Hugo, nó là một trình tạo trang web tĩnh mạnh mẽ và nhanh chóng, thích hợp cho việc xây dựng các trang web cá nhân, blog, hoặc trang web doanh nghiệp. Hugo sử dụng cấu trúc thư mục và các tệp tin dạng văn bản để quản lý nội dung, giúp đơn giản hóa quá trình phát triển và duy trì trang web tĩnh.
Web tĩnh (static site) là gì?
Các nhà phát triển liên tục tìm kiếm những cách mới và hiệu quả hơn để tạo trang web. Bạn muốn xây dựng trang web với tốc độ nhanh chóng, đồng thời truy xuất nội dung một cách nhanh chóng. Đó là lý do tại sao trang web tĩnh ra đời. Trang web tĩnh phổ biến vì sự đơn giản, an toàn và có khả năng mở rộng.
Một trang web tĩnh là một trang web được xây dựng với các trang chứa nội dung tĩnh hoặc mã HTML, JavaScript, hoặc CSS đơn thuần. Nội dung của nó được phục vụ cho người dùng chính xác như lưu trữ, mà không được tạo động và phục vụ cho người dùng thông qua một máy chủ web, không có bất kỳ xử lý phía máy chủ hoặc tương tác cơ sở dữ liệu nào.
Trang web tĩnh cung cấp ít tính tương tác vì mục tiêu là hiển thị cùng một nội dung cho tất cả người dùng. Nội dung này có thể được tạo trước, dẫn đến hiệu suất nhanh và chi phí nhẹ trong các trường hợp sử dụng đơn giản. Các trang web tĩnh đơn giản là một lựa chọn tốt cho các trang web có nội dung lớn và tĩnh.
Khi bạn cần triển khai một web tĩnh, bạn có thể sử dụng các Trình tạo trang web tĩnh (SSGs), mang lại sức mạnh và linh hoạt cho dự án. SSG có nhiều lợi ích như thời gian tải nhanh và không có xử lý phía máy chủ so với (SPA) và Ứng dụng được phản ánh phía máy chủ (SSR)."
Tại sao chọn Hugo?
Có một số lý do có thể chọn Hugo khi xây dựng trang web. Dưới đây là một số điểm mạnh của Hugo:
- Ưu điểm:
- Tốc độ cao: Hugo được biết đến với hiệu suất nhanh chóng, giúp tạo ra các trang web tĩnh một cách rất hiệu quả. Quá trình xây dựng trang web với Hugo thường diễn ra rất nhanh, thích hợp cho các dự án cần triển khai nhanh chóng.
- Dễ cài đặt và sử dụng: Hugo có quá trình cài đặt đơn giản, và giao diện dòng lệnh dễ sử dụng. Điều này giúp người phát triển tiết kiệm thời gian và tập trung vào nội dung thay vì quá trình cấu hình.
- Cộng đồng đông đảo: Hugo có một cộng đồng lớn và tích cực. Điều này có nghĩa là bạn có thể tìm kiếm sự hỗ trợ, tài nguyên, và plugin từ cộng đồng khi cần.
- Tiêu chuẩn mã hóa: Hugo sử dụng ngôn ngữ lập trình Go, nổi tiếng với hiệu suất và độ bảo mật cao. Điều này giúp tăng cường tính ổn định và an toàn của trang web.
- Linh họat và mô-đun: Hugo hỗ trợ một cấu trúc thư mục linh hoạt và có khả năng mở rộng, giúp bạn tổ chức nội dung một cách hiệu quả và dễ dàng mở rộng dự án.
- Hỗ trợ nâng cao: Hugo có các tính năng như truy cập dữ liệu từ các nguồn bên ngoài, sử dụng các chủ đề và layout đa cấp, giúp tạo ra các trang web phức tạp và động khi cần thiết.
- Nhược điểm:
- bạn phải biết chút ít về lập trình thì sẽ dễ dàng hơn.
Cài đặt Hugo
- Bạn nào muốn tự cài theo riêng của mình thì có thể vào trang chủ của hugo để tham khảo.
- Với mình trên windows thì cách nhanh và đơn giản nhất là dùng scoop.
- bật powershell lên chạy tuần tự 3 dòng như bên dưới: (lưu ý: đã cài scoop rồi thì không cần chạy 2 dòng đầu)
|
|
Thực hiện tạo một site Hugo mới
tạo một site
Bật powershell hoặc terminal và trỏ đến folder bạn muốn lưu trữ, sau đó gõ lệnh sau:
- tạo một site Hugo mới
hugo new site <sitename>
- trỏ đến folder Hugo mới
cd <sitename>
Tiếp theo, các bạn hãy lựa chọn một giao diện phù hợp cho blog tại đây. Sau khi tải về và giải nén. Sao chép thư mục đó vào trong <sitename>\themes.
Mở tệp <sitename>\config.toml, thêm vào một dòng sau:
theme = "<tên giao diện>"
Tạo bài viết đầu tiên
Dùng command line lúc nãy tại thư mục, dùng lệnh sau để tạo một bài viết mới:
hugo new posts\<tên-trang>.md
Trong đó posts là thư mục posts, <tên-trang>.md là file để viết bài.
Bây giờ, nếu mở bài viết mới tạo, bạn sẽ thấy tham số này (có thể khác 1 ít tuỳ theo Theme):
---
title: "<tên-trang>" // tiêu đề bài viết
date: 2021-05-20T13:00:00+09:00 // Thời gian
description: ""
draft: true // Trạng thái draff
---
//nội dung viết ở đây
Các tham số để config cho 1 bài post các bạn có thể tham khảo ở tại đây
run server dev
hugo server -D
- -D: hiển thị cả nội dung được đánh dấu là bản nháp.
site của sẽ được publish tại địa chỉ http://localhost:1313
Nếu các bạn muốn chỉnh sửa lại html của theme mà mình đã add thì có thể sửa trực tiếp trong các file layout của theme hoặc tự tạo cho mình 1 theme. Chi tiết có thể xem ở tại đây
Cuối cùng khi bạn muốn deploy thì Hugo cũng hỗ trợ khá nhiều options như Netlify, Github, Firebase, Bitbucket, … Chi tiết
Để generate ra 1 website tĩnh với Hugo thật quá đơn giản phải không. Chúc các bạn tạo được các website như ý !