Docusaurus Documentation Edge Computing — สร้าง
Docusaurus คืออะไร
Docusaurus เป็น open source static site generator จาก Meta (Facebook) ออกแบบมาสำหรับสร้าง documentation websites โดยเฉพาะ ใช้ React เป็น base รองรับ MDX (Markdown + JSX), versioning, i18n, search และ blog ในตัว
Features หลักของ Docusaurus ได้แก่ MDX Support เขียน documentation ด้วย Markdown พร้อมใช้ React components ได้, Versioning จัดการหลาย versions ของ docs อัตโนมัติ, i18n Localization รองรับหลายภาษา built-in, Search Integration เชื่อมกับ Algolia DocSearch, Blog ระบบ blog built-in สำหรับ announcements, Theming ปรับแต่ง theme ด้วย CSS และ React components
Edge Computing สำหรับ Docusaurus หมายถึงการ deploy static site ไปยัง edge network (CDN) ทั่วโลก ทำให้ documentation load เร็วจากทุกที่ ใช้ edge functions สำหรับ dynamic features เช่น search, analytics, personalization โดยไม่ต้องมี origin server
ติดตั้งและเริ่มต้นใช้งาน Docusaurus
ขั้นตอนติดตั้ง Docusaurus
เนื้อหาเกี่ยวข้อง — Rust Axum Agile Scrum Kanban
# === ติดตั้ง Docusaurus ===
# 1. Create Docusaurus Project
npx create-docusaurus@latest my-docs classic
cd my-docs
# 2. Project Structure
# my-docs/
# ├── blog/
# │ ├── 2025-01-15-welcome.md
# │ └── authors.yml
# ├── docs/
# │ ├── intro.md
# │ ├── tutorial-basics/
# │ │ ├── create-a-document.md
# │ │ └── deploy-your-site.md
# │ └── tutorial-extras/
# │ └── manage-docs-versions.md
# ├── src/
# │ ├── components/
# │ ├── css/
# │ │ └── custom.css
# │ └── pages/
# │ └── index.js
# ├── static/
# │ └── img/
# ├── docusaurus.config.js
# ├── sidebars.js
# └── package.json
# 3. docusaurus.config.js
cat > docusaurus.config.js << 'EOF'
const config = {
title: 'My Documentation',
tagline: 'Technical Documentation with Edge Computing',
favicon: 'img/favicon.ico',
url: 'https://docs.example.com',
baseUrl: '/',
organizationName: 'my-org',
projectName: 'my-docs',
i18n: {
defaultLocale: 'th',
locales: ['th', 'en'],
},
presets: [
[
'classic',
{
docs: {
sidebarPath: './sidebars.js',
editUrl: 'https://github.com/my-org/my-docs/tree/main/',
versions: {
current: { label: 'v3.0', path: 'v3' },
},
},
blog: {
showReadingTime: true,
editUrl: 'https://github.com/my-org/my-docs/tree/main/',
},
theme: {
customCss: './src/css/custom.css',
},
},
],
],
themeConfig: {
navbar: {
title: 'My Docs',
logo: { alt: 'Logo', src: 'img/logo.svg' },
items: [
{ type: 'docSidebar', sidebarId: 'tutorialSidebar', position: 'left', label: 'Tutorial' },
{ to: '/blog', label: 'Blog', position: 'left' },
{ type: 'docsVersionDropdown', position: 'right' },
{ type: 'localeDropdown', position: 'right' },
{ href: 'https://github.com/my-org/my-docs', label: 'GitHub', position: 'right' },
],
},
footer: {
style: 'dark',
links: [
{ title: 'Docs', items: [{ label: 'Tutorial', to: '/docs/intro' }] },
{ title: 'Community', items: [{ label: 'Discord', href: 'https://discord.gg/example' }] },
],
},
algolia: {
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_SEARCH_API_KEY',
indexName: 'my-docs',
},
},
};
module.exports = config;
EOF
# 4. Start Development Server
npm start
# Open http://localhost:3000
# 5. Build for Production
npm run build
# Output in build/ directory
echo "Docusaurus installed and configured"สร้าง Documentation Site
เขียน documentation ด้วย MDX
Edge Deployment สำหรับ Docusaurus
Deploy Docusaurus ไปยัง edge
Customization และ Plugins
ปรับแต่ง Docusaurus
เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง Parquet Format CQRS Event Sourcing
Performance Optimization
เพิ่ม performance สำหรับ documentation site
# === Performance Optimization ===
# 1. Build Optimization
# ===================================
# docusaurus.config.js additions:
# module.exports = {
# ...config,
#
# // Minimize bundle size
# webpack: {
# jsLoader: (isServer) => ({
# loader: require.resolve('swc-loader'),
# options: {
# jsc: {
# parser: { syntax: 'typescript', tsx: true },
# transform: { react: { runtime: 'automatic' } },
# },
# },
# }),
# },
#
# // Future flags for better performance
# future: {
# experimental_faster: {
# swcJsLoader: true,
# swcJsMinimizer: true,
# swcHtmlMinimizer: true,
# lightningCssMinimizer: true,
# rspackBundler: true,
# mdxCrossCompilerCache: true,
# },
# },
# };
# 2. Image Optimization
# ===================================
# Use @docusaurus/plugin-ideal-image
npm install @docusaurus/plugin-ideal-image
# docusaurus.config.js:
# plugins: [
# ['@docusaurus/plugin-ideal-image', {
# quality: 70,
# max: 1030,
# min: 640,
# steps: 2,
# disableInDev: false,
# }],
# ],
# 3. Caching Headers
# ===================================
# _headers file (for Netlify/Cloudflare Pages)
cat > static/_headers << 'EOF'
/assets/*
Cache-Control: public, max-age=31536000, immutable
/*.js
Cache-Control: public, max-age=31536000, immutable
/*.css
Cache-Control: public, max-age=31536000, immutable
/img/*
Cache-Control: public, max-age=604800
/*.html
Cache-Control: public, max-age=0, must-revalidate
X-Content-Type-Options: nosniff
EOF
# 4. Preload Critical Resources
# ===================================
# In docusaurus.config.js headTags:
# headTags: [
# { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } },
# { tagName: 'link', attributes: { rel: 'dns-prefetch', href: 'https://algolia.net' } },
# ],
# 5. Lighthouse Performance Targets
# ===================================
# Performance: > 95
# Accessibility: > 95
# Best Practices: > 95
# SEO: > 95
#
# Key metrics:
# - FCP < 1.0s (static site from CDN)
# - LCP < 1.5s
# - CLS < 0.05
# - TTI < 2.0s
# - Total bundle < 200KB gzipped
# 6. Monitoring Build Size
# ===================================
cat > scripts/check-bundle.sh << 'SHEOF'
#!/bin/bash
npm run build
# Check build output size
BUILD_SIZE=$(du -sh build/ | cut -f1)
echo "Build size: $BUILD_SIZE"
# Check individual chunks
echo "Largest files:"
find build/ -name "*.js" -exec du -sh {} \; | sort -rh | head -10
# Check HTML files
HTML_COUNT=$(find build/ -name "*.html" | wc -l)
echo "HTML pages: $HTML_COUNT"
SHEOF
chmod +x scripts/check-bundle.sh
echo "Performance optimization configured"FAQ คำถามที่พบบ่อย
Q: Docusaurus กับ GitBook ต่างกันอย่างไร?
A: Docusaurus เป็น open source, self-hosted, ใช้ React/MDX, customizable มาก, ฟรีทั้งหมด deploy ได้ทุก static hosting (Netlify, Vercel, Cloudflare Pages) GitBook เป็น SaaS platform มี WYSIWYG editor ใช้งานง่ายกว่า มี collaboration features built-in แต่ customization จำกัด free tier จำกัด features สำหรับ developer documentation แนะนำ Docusaurus สำหรับ non-technical team แนะนำ GitBook
แนะนำเพิ่มเติม — ติดตาม XM Signal
เนื้อหาเกี่ยวข้อง — อ่านต่อ: Java Quarkus Micro-segmentation
Q: Edge deployment ช่วย documentation site อย่างไร?
A: Documentation เป็น static content ที่เหมาะกับ edge deployment มาก ข้อดี TTFB ต่ำมาก (10-50ms จาก edge vs 200-500ms จาก origin), scale อัตโนมัติรองรับ traffic spikes (เช่น product launch), global availability ไม่มี single point of failure, ฟรีหรือราคาถูกมาก (Cloudflare Pages, Netlify, Vercel มี generous free tiers), HTTPS อัตโนมัติ documentation ส่วนใหญ่ไม่ต้อง server-side logic จึง deploy ที่ edge ได้ 100%
Q: Docusaurus รองรับ search อย่างไร?
A: มีหลายวิธี Algolia DocSearch (แนะนำ) ฟรีสำหรับ open source projects, search quality ดีมาก, ใช้ crawler index content อัตโนมัติ Local Search Plugin (@cmfcmf/docusaurus-search-local) ไม่ต้องใช้ external service ทำงาน offline ได้ แต่ index size ใหญ่สำหรับ docs เยอะ Typesense DocSearch alternative ที่ self-host ได้ Flexsearch lightweight client-side search
เนื้อหาเกี่ยวข้อง — Zero Trust Architecture Technical Debt Management
Q: วิธี handle multiple versions ของ docs?
A: Docusaurus มี built-in versioning ใช้ npx docusaurus docs:version X.X สร้าง version snapshot ของ docs ปัจจุบัน docs ใน docs/ folder เป็น "next" version (development) versioned docs อยู่ใน versioned_docs/ แต่ละ version มี sidebar แยก users เลือก version จาก dropdown ที่ navbar ข้อควรระวัง ทุก version เพิ่ม build time และ bundle size ลบ versions เก่าที่ไม่ support แล้วออก
