Trong bài viết trước, chúng ta đã cùng nhau xây dựng website blog đầu tiên. Nếu bạn đã sẵn sàng nâng cấp, bài viết này sẽ hướng dẫn bạn cách tạo ra các trang blog đẹp mắt chỉ trong 10 phút với sự trợ giúp của công cụ.
Giới thiệu về Trình tạo Trang Tĩnh (SSG)
Con người khác biệt với các loài vật khác ở khả năng sáng tạo và sử dụng công cụ. Việc xây dựng blog cũng vậy. Ngày nay, chúng ta đã không còn phải "cuốc đất" bằng cách viết từng dòng mã HTML thủ công. Có rất nhiều công cụ mạnh mẽ giúp chúng ta nhanh chóng có được một trang blog ấn tượng.
Nội dung blog thường được lưu trữ dưới dạng HTML. Tuy nhiên, người viết blog quan tâm nhiều hơn đến nội dung thay vì việc sắp xếp các thẻ HTML và tùy chỉnh giao diện. Liệu có công cụ nào giúp người viết blog thoát khỏi những công việc nhàm chán đó, cho phép họ nhập nội dung văn bản thuần túy và tự động chuyển đổi thành tệp HTML có giao diện đẹp mắt không?
Câu trả lời là có, đó chính là Trình tạo Trang Tĩnh (Static Site Generator - SSG). SSG là một công cụ tự động hóa, sử dụng các mẫu (template) và nguồn dữ liệu (như tệp Markdown, nội dung từ CMS hoặc API) để tạo ra các tệp HTML, CSS và JavaScript hoàn chỉnh. Khác với các trang web động truyền thống, các trang được tạo bởi SSG đã được hiển thị đầy đủ trong quá trình xây dựng, không cần xử lý phía máy chủ hay truy vấn cơ sở dữ liệu khi người dùng truy cập.
Một số Trình tạo Trang Tĩnh Phổ biến
Dưới đây là một số SSG phổ biến, bao gồm những cái tên quen thuộc như Next.js, Hugo, Jekyll và Hexo:
- Next.js: Hỗ trợ hệ sinh thái React đầy đủ, tích hợp sẵn các tính năng như CSS module, tối ưu hóa hình ảnh và tự động định dạng mã, phù hợp để xây dựng các ứng dụng tương tác phức tạp.
- Hugo: Một trình tạo trang tĩnh siêu tốc được phát triển bằng Go. Điểm mạnh lớn nhất của Hugo chính là tốc độ.
- Jekyll: Là một trình tạo trang tĩnh lâu đời, được hỗ trợ nguyên bản bởi Github Pages, rất phù hợp cho các trang giới thiệu dự án nhỏ và blog cá nhân.
- Hexo: Một framework blog nhẹ nhàng dựa trên hệ sinh thái Node.js, rất thân thiện với Markdown và phù hợp cho việc viết tiếng Trung.
Tại sao lại chọn Hexo?
Giữa vô vàn các công cụ SSG, tại sao lại đặc biệt ưu ái Hexo? Ngoài việc là công cụ cá nhân tiếp xúc sớm, còn có những lý do sâu sắc hơn:
- Ngưỡng bắt đầu cực thấp: Chỉ cần cài đặt môi trường Node, bạn có thể khởi tạo trang web chỉ với vài lệnh đơn giản, không cần cấu hình phức tạp. Tài liệu hướng dẫn bằng tiếng Trung cũng rất phong phú, giúp cả người mới bắt đầu cũng có thể thiết lập một blog cơ bản trong vòng 10 phút.
- Thân thiện với tiếng Trung: Các tệp cấu hình, thông báo lỗi đều hiển thị bằng tiếng Trung, tạo sự thuận tiện cho các nhà phát triển tại Trung Quốc. Cộng đồng hoạt động tích cực, tài nguyên về chủ đề (theme) và plugin tiếng Trung cũng rất dồi dào.
- Khả năng mở rộng linh hoạt, tính năng phong phú: Hệ thống plugin hoàn chỉnh, cho phép mở rộng chức năng bằng cách cài đặt plugin thông qua npm. Chủ đề dựa trên các mẫu EJS/Pug/Markdown, hỗ trợ tùy chỉnh bố cục, giao diện và tập lệnh.
Nếu bạn cũng là một kỹ sư phát triển front-end và thường xuyên làm việc với Node trong quá trình phát triển, việc tự viết plugin và theme cho Hexo sẽ là một lợi thế. Hexo chắc chắn là một lựa chọn tuyệt vời dành cho bạn.
Thực hành
Như đã đề cập, ngay cả người mới bắt đầu cũng có thể thiết lập một blog cơ bản trong vòng 10 phút. Nếu bạn đang thực hiện theo các bước, hãy thử bấm giờ xem sao!
Không nói nhiều nữa, chúng ta bắt tay vào làm!
Bước 1: Chuẩn bị môi trường Node.js
Nếu bạn đã từng làm quen với Node.js hoặc đã cài đặt Node trước đó, bạn có thể bỏ qua bước này và chuyển sang Bước 2. Nếu bạn là người mới sử dụng Node, hãy làm theo các bước sau để cài đặt Node.
- Phương pháp 1: Cài đặt qua gói cài đặt
- Truy cập trang web chính thức của Node.js để tải xuống gói cài đặt.
- Nhấp đúp vào gói cài đặt và tiến hành cài đặt bằng cách nhấp vào nút "Next" (Tương tự như quy trình cài đặt thông thường).
- Phương pháp 2: Cài đặt bằng tệp nhị phân di động
- Truy cập trang web chính thức của Node.js để tải xuống tệp nhị phân di động.
- Giải nén gói vào bất kỳ thư mục nào, sau đó cấu hình đường dẫn của thư mục
binvào biến môi trườngpath.
Sau khi cài đặt, hãy mở cửa sổ dòng lệnh và nhập node -v để kiểm tra. Nếu phiên bản tương ứng được hiển thị, nghĩa là bạn đã cài đặt thành công.
Bước 2: Cài đặt Hexo CLI
Cài đặt Hexo CLI trên toàn cục chỉ với một dòng lệnh.
npm install hexo-cli -g
Bước 3: Xây dựng Blog
Sử dụng Hexo CLI để hoàn tất quá trình xây dựng blog.
hexo init my-blog # Khởi tạo thư mục blog
cd my-blog && npm install # Cài đặt các gói phụ thuộc
npm run server # Khởi động máy chủ xem trước cục bộ ( http://localhost:4000 )
Sau khi thực hiện các lệnh trên, hãy nhập địa chỉ http://localhost:4000 vào trình duyệt. Bạn sẽ thấy giao diện của toàn bộ blog, bao gồm cả một bài viết mặc định có tên "Hello world!".
Nếu bạn muốn thêm bài viết mới, chỉ cần thực thi lệnh hexo new post "Tiêu đề bài viết". Lệnh này sẽ tạo ra một tệp .md mới trong thư mục source/_post. Nếu chưa quen với cú pháp Markdown, bạn có thể tham khảo các tài liệu liên quan để học hỏi, việc này khá nhanh chóng.
Bước 4: Triển khai lên Github Page
Thực thi lệnh sau:
hexo generate
Hexo sẽ chuyển đổi tất cả các tệp tài nguyên liên quan và cuối cùng lưu trữ tất cả các tài nguyên trong thư mục public. Tải tất cả các tệp lên kho lưu trữ cá nhân đã đề cập trong bài viết trước hoặc sử dụng lệnh Git để cam kết. Chờ khoảng một hoặc hai phút, truy cập địa chỉ trang web blog của bạn, bạn sẽ thấy nội dung đã được cập nhật.
Lời kết
Chủ đề mặc định của blog Hexo là landscape. Bạn cũng có thể thử sử dụng các chủ đề khác như Next, Fluid, v.v.
Nếu bạn muốn thực hiện các thay đổi đối với trang web blog, bạn có thể chỉnh sửa tệp cấu hình _config.yml ở thư mục gốc. Nếu cần sửa đổi kiểu dáng chủ đề, bạn cũng có thể chỉnh sửa tệp cấu hình tương ứng trong thư mục /themes/tên-chủ-đề/.
Để tìm hiểu thêm về cấu hình Hexo, bạn có thể tham khảo tài liệu chính thức của nó, nơi cung cấp các giới thiệu chi tiết. Nếu bạn có khả năng tự thực hiện mạnh mẽ, bạn cũng có thể thử viết một số chủ đề hoặc plugin, đó sẽ là một điều mang lại cho bạn cảm giác thành tựu.