Chạy trên máy

Cài các gói một lần, rồi mỗi lần làm việc chỉ cần một lệnh: site và admin chạy cùng nhau trên máy bạn, không cần tài khoản hay biến môi trường nào.

Cần gì

Node.js 22 hoặc 24, và pnpm. Mẫu dùng pnpm cho mọi lệnh; không dùng npm hay yarn.

Cài và chạy

Mở terminal ở thư mục gốc của mã nguồn (thư mục có file package.json), rồi chạy:

Terminal

# Cài các gói, chỉ cần lần đầu
pnpm install

# Chạy site cùng admin
pnpm dev

Địa chỉ site và admin

Mở	Địa chỉ
Site	http://localhost:4321
Admin	http://localhost:4321/admin/index.html

Lưu ý

Admin trên máy không cần đăng nhập và lưu thẳng vào file trong content/. Sửa xong thì commit và push như code. Khi chạy pnpm dev, admin chỉ mở ở /admin/index.html; /admin/ chỉ có sau khi build.

Sửa nội dung trên máy

Mở /admin/index.html.
Lần đầu vào, bấm Vào chế độ chỉnh sửa.
Chọn một mục ở thanh bên trái, rồi chọn trang cần sửa.
Sửa trong form bên trái; preview bên phải vẽ lại ngay khi gõ.
Bấm Lưu: nội dung được ghi vào content/.

Admin TinaCMS tiếng Việt: bên trái là form của trang Chạy trên máy với các ô Tiêu đề, Page layout, Lead và SEO; bên phải là preview của trang, số 1.5 treo bên trái tiêu đề.

Ảnh chụp admin xem thử của chính site tài liệu này, nên đáy form có thanh cam "Bản xem thử"; admin trên máy không có thanh này. Từng mục của admin có ở 2.1 Mở admin.

Khi cổng đã bị dùng

Cổng 4321 (hoặc 4001, 9000) đang có chương trình khác dùng thì chạy với bộ cổng riêng:

pnpm dev
# Site: http://localhost:4321

pnpm exec tinacms dev --port 4015 --datalayer-port 9023 -c "astro dev --port 4331"
# Site: http://localhost:4331

Rồi mở http://localhost:4331 và http://localhost:4331/admin/index.html.

Mẹo

Muốn xem mọi section và các kiểu của nó, mở /design trên site đang chạy.

Gói TinaCMS đã chỉnh sửa

Thư mục vendor/ chứa các gói TinaCMS đã được chỉnh sửa, trong đó có giao diện admin tiếng Việt; package.json cài TinaCMS từ thư mục này.

Cảnh báo

Đừng nâng các gói này lên bản trên npm (pnpm up tinacms hay tương tự): admin sẽ quay về tiếng Anh và mất các chỗ đã sửa.