Xây dựng trang blog cá nhân với Docusaurus

Docusaurus là một công cụ mã nguồn mở giúp xây dựng các trang web tài liệu kỹ thuật. Nó cung cấp một cách tiếp cận dễ dàng để tạo ra và duy trì các trang web tài liệu hoặc trang blog thông qua việc sử dụng React và Markdown. Bản thân Blog này cũng được mình xây dựng bằng chính Docusaurus

Docusaurus

Docusaurus được phát triển bởi Facebook (giờ là Meta). Được tạo ra ban đầu để hỗ trợ việc xây dựng các trang tài liệu kỹ thuật cho các dự án của họ, Docusaurus đã trở thành một dự án mã nguồn mở và phát triển tiếp theo dưới sự đóng góp của cộng đồng lập trình viên trên GitHub.

Docusaurus có một số ưu điểm quan trọng có thể kể ra như sau:

• Dễ sử dụng: Docusaurus cung cấp một cách tiếp cận dễ dàng để xây dựng và duy trì các trang web tài liệu. Việc sử dụng Markdown cho phép người dùng tập trung vào việc viết nội dung mà không cần biết quá nhiều về lập trình.
• Tùy chỉnh linh hoạt: Mặc dù Docusaurus cung cấp một giao diện người dùng sẵn có, nhưng bạn vẫn có thể tùy chỉnh giao diện và cấu trúc theo ý muốn của mình.
• Tối ưu hóa SEO: Docusaurus được xây dựng với việc tối ưu hóa công cụ tìm kiếm (SEO) trong tâm trí, giúp trang web của bạn dễ dàng được tìm thấy trên các công cụ tìm kiếm.
• Cộng đồng lớn và hỗ trợ tốt: Vì là một dự án mã nguồn mở, Docusaurus có một cộng đồng sáng tạo và hỗ trợ mạnh mẽ từ cộng đồng người dùng, giúp giải quyết các vấn đề và cải thiện sản phẩm liên tục.
• Hiệu suất tốt: Docusaurus được tối ưu hóa để cung cấp trải nghiệm tốt cho người dùng, bao gồm việc tải trang nhanh chóng và hiệu suất tốt trên nhiều thiết bị.
• Là một static site generator (SSG) Docusaurus build ra trang web tĩnh (HTML, CSS, JS) ngay lúc build-time mà không cần sử dụng server cho run-time để xử lý động. Do đó việc tải trang web sẽ trở nên cực kì nhanh vì không cần xử lý các request động mà chỉ trả về các static data có sẵn. Điều này đồng thời giúp các bạn có thể tiết kiệm chi phí hosting/VPS khi chúng ta có thể deploy nó hoàn toàn miễn phí trên các nền tảng như Github Page, Cloudflare Page, Vercel,...

Mặc dù Docusaurus có nhiều ưu điểm, nhưng đối với mình nó cũng có một số nhược điểm:

• Do hoàn toàn là web tĩnh, nên người dùng không thể tương tác với trang web, chẳng hạn như để lại bình luận về bài viết (có thể khắc phục bằng cách Thêm phần bình luận vào Docusaurus với Giscus và Github discussions)
• Không có giao diện để viết bài giống như các nền tảng Blog khác như Wordpress, Blogspot. Khi muốn thêm bài viết mới thì phải tiến hành tạo file Markdown mới theo đúng cú pháp và cấu trúc thư mục của Docusaurus.
• Khi số lượng bài viết nhiều thì source code trở nên nặng, có thể gây ảnh hưởng đến thời gian build.

Tuy nhiên với mục đích xây dụng blog cá nhân, thì những nhược điểm trên cũng không phải là vấn đề quá lớn (ít nhất là đối với mình ^^)

Khởi tạo project với Docusaurus

Để sử dụng Docusaurus thì trước tiên các bạn phải biết về React (ít nhất ở mức cơ bản) nên những phần như cài đặt môi trường v.v... mình xin phép được bỏ qua nhé

Để khởi tạo project với Docusaurus, sử dụng lệnh sau, với my-blog là tên project của bạn:

npx @docusaurus/init@latest init my-blog classic

Mặc định Docusaurus sẽ khởi tạo project với đầy đủ các chức năng như docs, blog... Tuy nhiên trong scope của bài viết này chúng ta chỉ cần quan tâm đến blog mà thôi.

Chỉnh sửa file docusaurus.config.js thành như sau:

export default {
    // ...
    presets: [
        [
            '@docusaurus/preset-classic',
            {
                docs: false,
                blog: {
                    routeBasePath: '/',
                    /* other blog options */
                },
            },
        ],
    ],
};

Do đã điều chỉnh đường dẫn của blog về root nên chúng ta cần xóa file ./src/pages/index.js đi nhé

Tiến hành chạy thử

npm start

Mở localhost:3000 và xem thử kết quả

Các folder và file cần lưu ý

• /blog: thư mục chứa tất cả các bài viết của bạn, mặc định Docusaurus sẽ tạo sẵn các bài blog để ví dụ trong này. Các bạn có thể mở các file đó lên để tham khảo. Nếu như các bạn đã biết cú pháp Markdown rồi thì việc này quá dễ đối với bạn. Đầu file sẽ có những phần mô tả như tiêu đề bài viết, thời gian, tác giả, đường dẫn, ...
• /blog/authors.yml: file khai báo thông tin tác giả để sử dụng trong bài viết. Các bạn chỉnh sửa thông tin của các bạn vào đây nhé
• src/css/custom.css file này khai báo các giá trị style màu sắc cho blog cảu bạn, các bạn có thể thay đổi tùy chỉnh màu sắc theo ý thích của mình ở đây

Tổng kết

Như vậy mình đã giới thiệu qua về Docusaurus và các bước cơ bản đầu tiên để bắt đầu xây dựng một blog cá nhân với công cụ này. Hy vọng bài viết này sẽ có ích với các bạn và chúc các bạn xây dựng được những trang blog chất lượng nhé. Happy coding !