Blog post "đầu tiên"!

Khai bút đầu năm bằng 11ty

Hello, World!

Xin chào mọi người, chào mừng đến với trang blog của mình! Đây không hẳn là lần đầu mình viết blog, trước đây mình đã viết một số bài linh tinh trên Đotfiles của mình. Nhưng NNBlog là một khởi đầu mới, minh đã xây dựng một trang web riêng cho việc viết blog. Trong khoảng thời gian tới mình sẽ đan xen viết các bài blog nhỏ và chuyển các bài từ Dotfiles sang trang này bằng cả tiếng Anh lẫn tiếng Việt.

Mặt kĩ thuật

Trước đó mình muốn đi qua một chút về mặt kĩ thuật của trang web này. Đây là một trang web tĩnh được xuất bằng framework 11ty (Eleventy). 11ty là một JS framework khá là nhẹ, đơn giản và tiện lợi. tính năng quan trọng nhất của nó là cho phép tác giả viết page bằng Markdown. Không chỉ thế nó còn có nhiều tính năng như tạo mục lục, quản lý tag... Điều này khá là lý tưởng cho một đứa tinker như mình.

Mình cũng đồng thời sử dụng DaisyUI để style và Alpine.js cho trang web có một chút tương tác. Mặc dù hiện tại Alpine.js có hơi overkill (thứ duy nhất cần nó là một cái hiệu ứng hover ảnh ở trang chủ):

Hover effect

Nhưng trong tương lai mình có thể cho một số phần tương tác nhỏ trong một số bài viết.

Hỗ trợ đa ngôn ngữ

Lúc trước mình chỉ viết tiếng Anh vì là ở trên Github Wiki nhưng như bạn có thể thấy ở góc phải trên Navbar có một nút để thay đổi sang tiếng Anh, mình viết trang blog bằng cả tiếng Anh lẫn tiếng Việt! Từ nay mình sẽ viết blog bằng tiếng mẹ đẻ trước rồi dịch sang tiếng Anh. Mình khá tự tin về khả năng nghe/đọc của mình nhưng về viết lách thì vẫn rất rén, vì thế LanguageTool (công cụ kiểm tra ngữ pháp mã nguồn mở) trở thành người bạn không thể thiếu đối với mình.

Một cách phổ biến để hỗ trợ đa ngôn ngữ trong 11ty là chia ra làm hai thư mục ngôn ngữ en/vi/, cùng là một trang nhưng mỗi ngôn ngữ một file riêng đặt trong mỗi thư mục ngôn ngữ. Cách đấy cũng tạm ổn nhưng mình muốn linh hoạt hơn trong việc quản lý và tái sử dụng các thành phần của bài viết. Vậy nên mình để 11ty phân trang từng file markdown ra thành hai trang tiếng Anh (với lang = 'en') và tiếng Việt (với lang = 'vi') Xong mình chỉ việc viết blog trong một file như thế này:

---
title:
en: "*First post!"
vi: Blog post "đầu tiên"!
description:
en: Made with 11ty
vi: Khai bút đầu năm bằng 11ty
tags:
- update
- web_dev
date: 2023-01-22
image: https://images.unsplash.com/photo-1674240660273-a3496c4604fd
---

{% if lang == 'vi' %}
Xin chào!
{% else %}
Hello!
{% endif %}

Và đó là tất cả, mình mong mọi người chờ đọc các bài blog tiếp theo của mình, hẹn gặp lại!