Chuyển tới nội dung chính

Tạo Blog miễn phí với Docusaurus

· 4 phút để đọc
Dinh Trieu
Dinh Trieu
Frontend Developer

Tạo blog đơn giản với Docusaurus...

Docusaurus là một công cụ tạo trang web tĩnh mã nguồn mở được phát triển bởi Meta (Facebook), chuyên dùng để xây dựng trang tài liệu, blog cá nhân, hoặc trang giới thiệu sản phẩm một cách nhanh chóng và dễ dàng.

Điểm nổi bật của Docusaurus​

  • Viết bằng Markdown: Bạn chỉ cần viết nội dung bằng Markdown, Docusaurus sẽ tự động chuyển thành giao diện web đẹp mắt.
  • Tích hợp React: Nếu bạn biết React, bạn có thể dễ dàng tùy biến giao diện và chức năng. Nếu không biết, vẫn dùng được ngon lành!
  • Hỗ trợ đa ngôn ngữ: Dễ dàng tạo trang web hỗ trợ nhiều ngôn ngữ khác nhau.
  • Tối ưu SEO: Giúp trang web của bạn dễ dàng được tìm thấy trên Google.
  • Tích hợp Git: Quản lý phiên bản tài liệu hiệu quả.
  • Hỗ trợ blog: Ngoài tài liệu, bạn có thể viết blog và quản lý bài viết như một CMS đơn giản.

Docusaurus dùng để làm gì?​

  • Tạo tài liệu cho dự án phần mềm
  • Viết blog cá nhân hoặc nhóm
  • Xây dựng trang web giới thiệu sản phẩm
  • Làm landing page cho startup hoặc dự án cá nhân

Cài đặt nhanh​

npx create-docusaurus@latest my-website classic
cd my-website
npm start

Sau đó truy cập http://localhost:3000 để xem trang web của bạn.

Cấu hình và Deploy lên github​

Để deploy Docusaurus lên GitHub Pages và cho chạy luôn (live site), bạn làm theo các bước sau:

BƯỚC 1: CẤU HÌNH docusaurus.config.js​

Mở file docusaurus.config.js và chỉnh sửa:

module.exports = {
  // Thay bằng tên repo của bạn
  url: 'https://<tên-user>.github.io',
  baseUrl: '/<tên-repo>/',
  // Ví dụ: url: 'https://huudinh.github.io', baseUrl: '/my-docs/',
  ...
  organizationName: '<tên-user>', // GitHub username
  projectName: '<tên-repo>',      // repo name
  deploymentBranch: 'gh-pages',   // branch để deploy (mặc định là gh-pages)
};

BƯỚC 2: THÊM SCRIPT VÀO package.json​

Trong file package.json, thêm 2 script:

"scripts": {
  "predeploy": "docusaurus build",
  "deploy": "docusaurus deploy"
}

BƯỚC 3: TẠO REPO TRÊN GITHUB​

  • Lên GitHub tạo repository tên là <tên-repo> (phải khớp với projectName ở bước 1).
  • Ví dụ: bạn có GitHub username là huudinh, repo là my-docs.

BƯỚC 4: KHỞI TẠO GIT (NẾU CHƯA CÓ)​

Trong thư mục Docusaurus:

git init
git remote add origin https://github.com/<tên-user>/<tên-repo>.git
git add .
git commit -m "Initial commit"
git push -u origin main

BƯỚC 5: CHẠY DEPLOY​

npm run deploy

Docusaurus sẽ:

  • build site tĩnh vào thư mục build/
  • push lên branch gh-pages
  • GitHub Pages sẽ tự động publish branch gh-pages.

Trường hợp phát sinh lỗi bạn cần cấu hình lại tài khoản github cho blogs bằng lệnh sau

set GIT_USER=ten-tai-khoan

BƯỚC 6: TRUY CẬP WEBSITE​

Truy cập tại:

https://<tên-user>.github.io/<tên-repo>/

Ví dụ:

https://huudinh.github.io/blogs/

MỖI LẦN UPDATE​

Sau khi cập nhật nội dung docs, chỉ cần:

npm run deploy

Chỉnh sửa CSS​

Bạn có thể thêm hoặc sửa các file CSS trong thư mục src/css.

Bước 1: Tạo hoặc mở file src/css/custom.css

Bước 2: Thêm các đoạn CSS bạn muốn sửa, ví dụ:

/* Thay đổi màu nền của body */
body {
  background-color: #f0f0f0;
}

/* Tùy chỉnh font cho tiêu đề */
h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
}
/* Chỉnh cỡ chữ tiêu đề blogs */
h1 {
  font-size: 2.5rem; /* hoặc 40px */
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}
/* Chỉnh cỡ chữ nội dung bài viết */
article p {
  font-size: 1.1rem;
  line-height: 1.8;
}

Chạy react code trong Docusaurus?​

Docusaurus hỗ trợ MDX, một định dạng kết hợp giữa Markdown và JSX, cho phép bạn chạy React code trực tiếp trong file .mdx. Đây là một trong những điểm mạnh nhất của Docusaurus: bạn vừa viết tài liệu bằng Markdown, vừa nhúng component React để hiển thị nội dung tương tác.

<!-- Demo React Component -->
import React from 'react';

export const HelloButton = () => {
  const handleClick = () => alert('Xin chào từ React!');
  return <button onClick={handleClick}>Bấm vào đây</button>;
}


<HelloButton />