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

Tối ưu seo Crawl dữ liệu với Lite Speed và Robot.txt trong wordpress

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

Nếu mục tiêu của bạn là giảm crawl CSS/JS để tối ưu tốc độ tải trang và giảm tải cho bot (Googlebot, Bingbot...), LiteSpeed Cache cung cấp nhiều tính năng mạnh mẽ để kiểm soát cách các tài nguyên tĩnh như CSS và JS được xử lý.


Dưới đây là các cách tối ưu LiteSpeed Cache để giảm crawl CSS/JS:

Create-HTML-1


I. Kích hoạt Combine và Minify

Giúp giảm số lượng request và dung lượng file:

  • LiteSpeed Cache > Page Optimization > CSS Settings

    • CSS Minify: Bật
    • CSS Combine: Bật
    • CSS Combine External and Inline: Bật nếu không gây lỗi
  • LiteSpeed Cache > Page Optimization > JS Settings

    • JS Minify: Bật
    • JS Combine: Bật
    • JS Combine External and Inline: Bật nếu không gây lỗi

📌 Lưu ý: Sau khi bật, kiểm tra kỹ giao diện vì một số theme/plugin có thể bị lỗi khi combine.


II. Tải CSS/JS theo yêu cầu (Lazy Load)

Giúp trì hoãn tải các file không cần thiết ngay lập tức:

  • Load CSS Asynchronously: Bật
  • JS Deferred: Bật
  • JS Deferred Excludes: Thêm các script quan trọng không nên trì hoãn (như jQuery nếu cần)

III. Loại trừ CSS/JS không cần thiết khỏi bot crawl

LiteSpeed hỗ trợ tối ưu riêng cho bot:

  • LiteSpeed Cache > Crawler > Optimization Settings
    • Separate View for Bots: Bật
    • Remove Unused CSS for Bots: Bật
    • Remove JS for Bots: Bật (nếu site không cần JS để hiển thị nội dung chính)

Điều này giúp giảm crawl budget và tăng tốc độ index.


IV. Loại trừ file không cần thiết

Nếu bạn biết rõ file nào không cần thiết, có thể loại trừ:

  • LiteSpeed Cache > Page Optimization > Tuning
    • JS Excludes / CSS Excludes: thêm đường dẫn hoặc từ khóa file bạn muốn loại trừ khỏi combine/minify

IV. Tối ưu file Robot.txt

# ============================
# ROBOTS.TXT Phien ban an toan
# ============================

# Cho phep tat ca bot index website
User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

# Chan cac thu muc he thong WordPress khong can SEO
Disallow: /cgi-bin/
Disallow: /trackback/
Disallow: /xmlrpc.php
Disallow: /feed/
Disallow: /comments/
Disallow: /wp-json/
Disallow: /readme.html
Disallow: /license.txt

# Chan cac file dong & tham so tao duplicate content
Disallow: /*.php$
Disallow: /*?s=*
Disallow: /*?replytocom=*
Disallow: *?utm_*
Disallow: *?p=*
Disallow: /tag/
Disallow: /component/*
Disallow: /cdn-cgi/
Disallow: /?__hstc=
Disallow: /?gclid*

# Cho phep Googlebot load CSS, JS, Uploads de render trang
Allow: /wp-content/themes/
Allow: /wp-content/plugins/
Allow: /wp-content/uploads/

# Chan file map, test, docs khong lien quan SEO
Disallow: /*.map$
Disallow: /wp-content/plugins/*/tests/
Disallow: /wp-content/plugins/*/docs/
Disallow: /wp-content/themes/*/docs/

# Sitemap chuan
Sitemap: https://domain-name/sitemap_index.xml

V. Kiểm tra bằng công cụ crawl

Dùng các công cụ như:

Để xem bot đang crawl những file nào nhiều nhất, từ đó loại trừ hoặc tối ưu thêm.


Tạo ảnh với AI

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

Gemini đang trở thành công cụ tạo ảnh được giới sáng tạo yêu thích nhất hiện nay. Chỉ cần vài dòng để mô tả câu lệnh Gemini tạo ảnh, bạn có thể biến ý tưởng thành hình ảnh chuyên nghiệp, từ chân dung nghệ thuật cho đến ảnh sản phẩm hay concept sáng tạo. Hãy cùng tìm hiểu loạt câu lệnh để tạo ra bộ ảnh cực kỳ “hot trend” mạng xã hội sau đây nhé.


Tạo ảnh profile nền đen

Create-HTML-1

Sử dụng khuôn mặt trong ảnh tôi cung cấp làm nền tảng chính. Giữ nguyên hoàn toàn các đặc điểm khuôn mặt như ánh mắt, hình dáng, màu da, biểu cảm và kết cấu da. Tạo ảnh chân dung kiểu profile chuyên nghiệp với bố cục chụp nửa người, nhân vật nhìn thẳng vào ống kính, phong thái tự tin và điềm tĩnh.

Nền xám trung tính, ánh sáng studio cân bằng, không quá gắt, giúp khuôn mặt và trang phục nổi bật rõ nét. Trang phục vest hoặc áo tối màu hiện đại, tông màu lạnh, ánh sáng nhẹ từ phía trước để tạo khối tự nhiên. Hình ảnh cần có độ nét cao, màu sắc trung thực, tổng thể thanh lịch, phù hợp cho ảnh hồ sơ hoặc ảnh đại diện chuyên nghiệp.

Tạo bộ ảnh Polaroid ghép ảnh đôi với Gemini

Create-HTML-2

Tạo bộ ảnh Polaroid phong cách cổ điển ghép từ hai bức ảnh tôi cung cấp, giữ nguyên khuôn mặt, biểu cảm và chi tiết tự nhiên của cả hai người, không làm biến dạng hoặc thay đổi cảm xúc. Kết hợp hai khuôn mặt vào cùng một khung ảnh Polaroid, tái hiện cảm giác gần gũi và ấm áp như một bức ảnh chụp chung thật sự. Bối cảnh là phông nền vải sáng hoặc rèm mềm màu trắng xám, ánh sáng dịu nhẹ kiểu studio, không có chi tiết thừa phía sau.

Hai người đứng cạnh nhau một cách tự nhiên, có thể mỉm cười hoặc nghiêng đầu nhẹ về nhau để thể hiện sự thân thiết. Tông màu tổng thể nhẹ nhàng, hơi ám xanh hoặc vàng nhạt, mang đặc trưng của ảnh Polaroid vintage. Khung ảnh trắng cổ điển với tỉ lệ vuông (1:1), có hiệu ứng phim nhẹ và phần viền dưới rộng hơn giống ảnh chụp tức thì. Toàn bộ khung hình cần toát lên cảm giác tự nhiên, gần gũi, tình cảm và chân thật như một kỷ niệm đẹp được lưu giữ bằng máy ảnh Polaroid thật.

Ảnh thời trang

Create-HTML-3

Giữ nguyên khuôn mặt và tư thế của tôi. Full HD 1920x1080px, cận cảnh. Tạo ảnh của tôi, xem ảnh tham khảo trong một studio thời trang cao cấp. Cùng làn da trong ảnh.

Cô ấy mặc một chiếc áo khoác blazer đen rộng thùng thình bên ngoài áo ống trắng, với một dải ruy băng trắng mỏng thắt nơ quanh cổ.

Cô ấy tạo dáng với đầu hơi nghiêng sang một bên, nhìn nhẹ nhàng vào máy ảnh với vẻ mặt mơ màng, bình tĩnh.

Một vài lọn tóc buông xõa trên khuôn mặt, tăng thêm nét thanh lịch. Ánh sáng khuếch tán dịu nhẹ trên nền trắng trơn.

Doanh nhân thành đạt

Create-HTML-3

Sử dụng ảnh khuôn mặt của tôi. Tạo ảnh: Một người Việt Nam mặc vest đen bó sát, áo sơ mi đỏ. Đứng tự tin, khoanh tay, mỉm cười tự tin, không để lộ răng, thể hiện sự lôi cuốn và dễ gần. Phông nền studio màu xám đậm, ánh sáng dịu nhẹ cho bức chân dung chuyên nghiệp sắc nét. Giám đốc điều hành, phong cách doanh nghiệp hiện đại

Ảnh cô dâu

Create-HTML-3

Giữ nguyên các đường nét khuôn mặt (không thay đổi khuôn mặt). Ảnh cưới chụp theo chiều dọc của người phụ nữ trong ảnh đã tải lên. Cô ấy mặc một chiếc váy cưới satin trắng không tay hiện đại với đường nét thanh mảnh. Cô ấy cầm một bó hoa hồng trắng và khuynh diệp đơn giản, thanh lịch. Phông nền là một studio tối giản, gọn gàng với ánh sáng tự nhiên dịu nhẹ chiếu từ bên hông. Tóc cô ấy được tạo kiểu búi thấp tinh tế, và cô ấy đeo một chiếc vòng cổ kim cương đơn giản. Ánh sáng điện ảnh, chi tiết siêu thực, phông nền nhẹ nhàng.

Chân dung trong trẻo

Create-HTML-4

Giữ nguyên các đường nét khuôn mặt (không thay đổi khuôn mặt). Tạo một bức ảnh cận cảnh sắc nét, độ phân giải cao với tỷ lệ khung hình 9:16. Thay đổi phong cách nhân vật trong ảnh được cung cấp đồng thời duy trì tỷ lệ chính xác của các đặc điểm trên khuôn mặt như mắt, mũi và miệng. Góc chụp từ dưới lên trên, tạo nên một bức chân dung chân thực, tập trung vào khuôn mặt nhân vật với bờ vai trần, chỉ để lộ làn da trắng mịn hoàn hảo, lớp trang điểm tự nhiên và biểu cảm thân thiện. Khuôn mặt nghiêng 45 độ sang một bên, với làn da mịn màng, rạng rỡ, một chút ửng hồng và hàng mi dài, thanh tú ôm lấy đôi mắt. Mái tóc nâu tự nhiên của cô được buộc gọn gàng ra sau bằng một chiếc nơ trắng xinh xắn. Đôi mắt cô nhìn thẳng vào máy ảnh, với đường chân tóc bao quanh khuôn mặt. Những ngón tay thon thả của cô đang cố gắng che mắt khỏi ánh nắng mặt trời. Ánh sáng dịu nhẹ tạo ra những bóng đổ dọc hoặc họa tiết lưới nghệ thuật trên khuôn mặt và vai, làm nổi bật những đường nét thanh tú và mang đến bầu không khí mơ màng, tao nhã. Cô để vai trần, tăng thêm vẻ thanh lịch và thuần khiết cho bố cục. Phong cách điện ảnh, nhẹ nhàng và biểu cảm, nhấn mạnh vẻ đẹp, sự ngây thơ và yên bình.

Docusaurus 3.9 có gì mới

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

Docusaurus 3.9 vừa ra mắt với một loạt cải tiến đáng chú ý dành cho các nhà phát triển web documentation. Đây là những điểm nổi bật nhất từ bản cập nhật này


🚀 Tính năng mới

  • Hỗ trợ Algolia DocSearch v4: Tích hợp AskAI – một trợ lý tìm kiếm thông minh có thể trả lời câu hỏi dựa trên nội dung tài liệu của bạn. Đây là bước tiến lớn trong việc nâng cao trải nghiệm tìm kiếm.
  • Nâng cấp i18n: Thêm các tùy chọn i18n.localeConfigs[locale].{url, baseUrl} giúp triển khai đa ngôn ngữ phức tạp và hỗ trợ tốt hơn cho các website đa miền.
  • Mermaid ELK layout: Hỗ trợ sơ đồ ELK trong Mermaid, giúp trực quan hóa dữ liệu tốt hơn.
  • Nâng cấp Rspack lên 1.5: Tăng hiệu suất build và loại bỏ các tùy chọn lỗi thời.
  • Tùy chỉnh Markdown: Cho phép vô hiệu hóa emoji và thêm hook xử lý Markdown qua siteConfig.markdown.hooks.

⚠️ Thay đổi quan trọng

  • Ngừng hỗ trợ Node.js 18: Phiên bản mới yêu cầu Node.js ≥ 20.0 do Node.js 18 đã hết vòng đời và không còn nhận cập nhật bảo mật.

🐞 Sửa lỗi

  • Cải thiện hiển thị sidebar, biểu tượng mạng xã hội, và xử lý các lỗi nhỏ liên quan đến copy code, heading anchors, v.v.

  • Để update lên phiên bản mới nhất bạn gõ lệnh sau

npm i @docusaurus/core@latest @docusaurus/plugin-google-gtag@latest @docusaurus/preset-classic@latest @docusaurus/module-type-aliases@latest @docusaurus/types@latest

Nếu bạn đang dùng Docusaurus cho dự án tài liệu của mình, bản 3.9 là một bản nâng cấp đáng để cân nhắc.

Cài đặt GA4 trong docusaurus?

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

Để tích hợp Google Analytics 4 (GA4) vào một website sử dụng Docusaurus, bạn chỉ cần thực hiện vài bước cấu hình đơn giản. Dưới đây là hướng dẫn chi tiết


1. Tạo tài khoản GA4 và lấy mã đo lường

  • Truy cập Google Analytics
  • Tạo tài sản GA4 mới → Chọn nền tảng là “Web”
  • Nhập URL website và tên luồng dữ liệu
  • Sau khi tạo xong, bạn sẽ nhận được Measurement ID có dạng G-XXXXXXXXXX

2. Cài đặt plugin Google Analytics trong Docusaurus

Docusaurus hỗ trợ tích hợp GA thông qua plugin @docusaurus/plugin-google-gtag.

Cài đặt plugin:

npm install @docusaurus/plugin-google-gtag

3. Cấu hình plugin

Thêm đoạn sau vào file cấu hình:

// docusaurus.config.js
module.exports = {
// ... các cấu hình khác
plugins: [
[
'@docusaurus/plugin-google-gtag',
{
trackingID: 'G-XXXXXXXXXX', // Thay bằng Measurement ID của bạn
anonymizeIP: true, // Tùy chọn: ẩn địa chỉ IP người dùng
},
],
],
};

4. Khởi động lại Docusaurus

npm run build
npm run serve

5. Kiểm tra hoạt động

  • Truy cập website và mở tab GA4 → Kiểm tra luồng dữ liệu thời gian thực.
  • Bạn có thể dùng tiện ích như Google Tag Assistant để xác minh mã GA đã được cài đúng.

Nếu bạn muốn theo dõi sự kiện tùy chỉnh (như click, scroll, v.v.), bạn có thể tích hợp thêm Google Tag Manager hoặc dùng gtag() trực tiếp trong mã nguồn.

Tôi có thể lập trình đến năm bao nhiêu tuổi?

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

Người ta nói 40 tuổi là "ngưỡng cửa" cho lập trình viên, vậy tôi phải làm gì...

40 tuổi không phải là "ngưỡng cửa" cứng nhắc cho lập trình viên, nhưng đây thường là giai đoạn mà nhiều người trong ngành bắt đầu đánh giá lại sự nghiệp và định hướng tương lai. Ngành công nghệ thay đổi nhanh, và ở tuổi này, bạn có thể đã tích lũy được nhiều kinh nghiệm, nhưng cũng đối mặt với áp lực về việc duy trì năng lực cạnh tranh. Dưới đây là phân tích và gợi ý về những việc bạn có thể làm:

1. Hiểu bối cảnh tuổi 40 trong ngành lập trình

  • Kinh nghiệm là lợi thế lớn: Ở tuổi 40, bạn có thể đã có 15-20 năm kinh nghiệm, giúp bạn hiểu sâu về công nghệ, quy trình làm việc, và cách giải quyết vấn đề. Điều này rất có giá trị trong việc dẫn dắt đội nhóm hoặc xử lý các dự án phức tạp.
  • Áp lực cạnh tranh: Các lập trình viên trẻ hơn có thể nắm bắt công nghệ mới nhanh hơn và thường chấp nhận mức lương thấp hơn. Tuy nhiên, kinh nghiệm và khả năng tư duy chiến lược của bạn là điều họ khó sánh kịp.
  • Sức khỏe và cân bằng cuộc sống: Ở tuổi này, bạn có thể cần chú ý hơn đến sức khỏe và cân bằng giữa công việc và cuộc sống, đặc biệt nếu bạn có gia đình.

2. Những việc nên làm ở tuổi 40

Dưới đây là các hướng đi phổ biến mà lập trình viên 40 tuổi có thể cân nhắc:

Tiếp tục phát triển kỹ năng kỹ thuật

  • Cập nhật công nghệ mới: Ngành công nghệ luôn thay đổi, vì vậy hãy dành thời gian học các công nghệ mới (ví dụ: AI, DevOps, cloud computing, hoặc các framework hiện đại). Bạn không cần phải thành chuyên gia trong mọi lĩnh vực, nhưng nên chọn một vài lĩnh vực phù hợp để chuyên sâu.
  • Chọn ngách chuyên môn: Thay vì cố gắng chạy theo mọi xu hướng, hãy tập trung vào một lĩnh vực mà bạn giỏi và có tiềm năng phát triển, như an ninh mạng, dữ liệu lớn, hoặc phát triển ứng dụng di động.
  • Tự động hóa và công cụ: Thành thạo các công cụ tự động hóa (như CI/CD, Docker, Kubernetes) để tăng hiệu suất và giảm áp lực công việc.

Chuyển hướng sang vai trò quản lý hoặc lãnh đạo

  • Quản lý dự án hoặc đội nhóm: Với kinh nghiệm của mình, bạn có thể chuyển sang vai trò quản lý dự án (Project Manager), trưởng nhóm kỹ thuật (Tech Lead), hoặc kiến trúc sư phần mềm (Software Architect). Những vai trò này yêu cầu kỹ năng lãnh đạo, giao tiếp, và tư duy chiến lược – những thứ bạn có thể đã tích lũy.
  • Mentor cho thế hệ trẻ: Chia sẻ kinh nghiệm bằng cách hướng dẫn các lập trình viên trẻ hơn. Điều này không chỉ giúp bạn củng cố kiến thức mà còn xây dựng uy tín trong ngành.
  • Tư vấn kỹ thuật: Làm cố vấn (consultant) cho các công ty, đặc biệt nếu bạn có chuyên môn sâu trong một lĩnh vực cụ thể.

Khởi nghiệp hoặc làm freelance

  • Xây dựng sản phẩm riêng: Nếu bạn có ý tưởng cho một ứng dụng, dịch vụ, hoặc sản phẩm công nghệ, đây có thể là thời điểm để thử sức. Kinh nghiệm của bạn sẽ giúp bạn tránh được nhiều sai lầm phổ biến.
  • Freelance: Làm việc tự do cho phép bạn linh động về thời gian và lựa chọn dự án phù hợp với kỹ năng của mình. Các nền tảng như Upwork, Toptal, hoặc Fiverr có thể là điểm bắt đầu.

Đầu tư vào học vấn và mạng lưới

  • Học thêm lĩnh vực bổ trợ: Cân nhắc học thêm về quản trị kinh doanh (MBA), quản lý sản phẩm, hoặc các kỹ năng mềm như đàm phán, lãnh đạo. Điều này giúp bạn mở rộng cơ hội ngoài lập trình thuần túy.
  • Xây dựng mạng lưới quan hệ: Tham gia các hội thảo, sự kiện công nghệ, hoặc cộng đồng như GitHub, Stack Overflow để kết nối với những người trong ngành. Mạng lưới này có thể mở ra cơ hội mới.

Chăm sóc bản thân và cân bằng cuộc sống

  • Sức khỏe: Dành thời gian cho thể dục, ăn uống lành mạnh, và nghỉ ngơi để duy trì năng lượng làm việc lâu dài.
  • Cân bằng công việc và gia đình: Ở tuổi 40, nhiều người có trách nhiệm gia đình. Hãy tìm cách tối ưu hóa thời gian làm việc để không bị kiệt sức.

3. Lời khuyên cụ thể

  • Đánh giá bản thân: Xác định điểm mạnh, điểm yếu, và điều bạn thực sự muốn làm trong 5-10 năm tới. Bạn muốn tiếp tục viết code, trở thành lãnh đạo, hay thử sức ở một lĩnh vực mới?
  • Đầu tư thời gian hợp lý: Không cần chạy theo mọi xu hướng công nghệ. Hãy chọn lọc những gì phù hợp với mục tiêu nghề nghiệp của bạn.
  • Tận dụng kinh nghiệm: Kinh nghiệm của bạn là tài sản lớn nhất. Hãy sử dụng nó để giải quyết các vấn đề phức tạp hoặc dẫn dắt đội nhóm.
  • Tìm niềm vui trong công việc: Chọn con đường khiến bạn cảm thấy hứng thú và có ý nghĩa, thay vì chỉ chạy theo tiền bạc hoặc áp lực xã hội.

4. Quan điểm về "ngưỡng cửa 40 tuổi"

Quan niệm rằng 40 tuổi là ngưỡng cửa để lập trình viên phải "nghỉ hưu" hoặc chuyển nghề là không chính xác. Nhiều lập trình viên vẫn viết code và thành công ở độ tuổi 50, 60, miễn là họ duy trì đam mê và khả năng học hỏi. Tuổi 40 chỉ là một cột mốc để bạn đánh giá lại và điều chỉnh hướng đi, không phải là rào cản.

Nếu bạn muốn thảo luận chi tiết hơn về một hướng đi cụ thể (ví dụ: học công nghệ nào, chuyển sang quản lý ra sao), hãy cho mình biết thêm về tình huống và mục tiêu của bạn nhé!

Tôi có thể theo đuổi nghè lập trình Frontend không?

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

Khi tự đánh giá mình có học lực và tư duy logic ở mức “bình thường”...

Câu hỏi này rất thực tế và mình đã thẳng thắn nhìn nhận bản thân. Câu trả lời là: hoàn toàn có thể theo đuổi lập trình Frontend, ngay cả khi bạn tự đánh giá mình có học lực và tư duy logic ở mức “bình thường”.


Vì sao bạn vẫn có thể theo đuổi Frontend?

  • Frontend không đòi hỏi phải là “thiên tài toán học”
    Khác với một số lĩnh vực như AI hay xử lý dữ liệu lớn, Frontend thiên về tư duy giao diện, trải nghiệm người dùng, và tính thẩm mỹ. Những kỹ năng này có thể rèn luyện qua thực hành, không cần IQ cao.

  • Kỹ năng thực tế quan trọng hơn điểm số
    Nhà tuyển dụng Frontend thường quan tâm đến portfolio, dự án cá nhân, và khả năng làm việc nhóm hơn là học lực. Nếu bạn làm được một website đẹp, responsive, có UX tốt — thì bạn đã ghi điểm rồi.

  • Tư duy logic có thể cải thiện qua luyện tập
    Bạn không cần phải giỏi logic ngay từ đầu. Việc học JavaScript, xử lý DOM, hay làm việc với React sẽ giúp bạn rèn luyện tư duy từng bước. Quan trọng là kiên trì và không bỏ cuộc.

  • Tài nguyên học tập rất dễ tiếp cận
    Có hàng ngàn khóa học miễn phí, video hướng dẫn, và cộng đồng hỗ trợ. Bạn không đơn độc đâu.


Gợi ý lộ trình học Frontend cho người mới bắt đầu

Giai đoạnMục tiêuCông cụ gợi ý
1. Cơ bảnHTML, CSS, JavaScriptfreeCodeCamp, W3Schools
2. Thực hànhLàm website đơn giảnGitHub, CodePen
3. FrameworkHọc React hoặc VueScrimba, Udemy
4. Dự ánLàm portfolio cá nhânNetlify, Vercel
5. Kỹ năng mềmGiao tiếp, teamworkTham gia nhóm học, hackathon

Một lời nhắn riêng cho bạn

Bạn không cần phải là người giỏi nhất — bạn chỉ cần là người kiên trì nhất. Nếu bạn học mỗi ngày một chút, làm từng dự án nhỏ, và không ngại hỏi khi gặp khó khăn, thì bạn sẽ tiến xa hơn rất nhiều người bắt đầu với lợi thế nhưng bỏ cuộc giữa chừng.

Nếu bạn muốn, mình có thể giúp bạn lên một kế hoạch học cụ thể theo thời gian biểu của bạn. Bạn đang có bao nhiêu thời gian mỗi tuần để học?

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

· 4 phút để đọc
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 />