Astrotion

Mình vừa build xong kiến trúc mới cho chiếc blog này.

Tóm tắt:
- Trước đây: Static Site Generation
- Version 2: Server-Side Rendering

Kế hoạch tiếp theo:
- Thử nghiệm một phiên bản với Editor chính là Notion thay vì Obsidian.

Ở các bài trước, mình đã chia sẻ cách mình setup môi trường viết bài:

1. Quản lý bài viết như một CMS
2. Template tự động điền thông tin
3. Sync qua iCloud để viết trên điện thoại

Đến đây, việc viết lách cơ bản đã ổn. Nhưng vẫn còn một khâu cuối cùng: Cập nhật bài viết lên web.

Blog mình dùng Astro, nên muốn có bài mới thì phải đẩy code lên GitHub. Cloudflare Pages sẽ tự động nhận trigger từ GitHub và build lại trang web.

Bình thường, để đẩy code lên, mình phải mở Terminal gõ lệnh hoặc dùng GitHub Desktop. Nhưng việc phải chuyển qua lại giữa các ứng dụng cũng hơi bất tiện mỗi khi mình đang tập trung viết trong Obsidian.

🛠️ Giải pháp: Obsidian Git Plugin

Mình dùng plugin Obsidian Git để đơn giản hóa việc này ngay trong giao diện soạn thảo.

Cấu hình đơn giản

Mình không để mặc định mà chỉnh lại một chút trong phần settings cho phù hợp với thói quen cá nhân:

• Backup interval: Mình chỉnh về (tắt tự động backup). Mình muốn tự quyết định khi nào thì push git, tránh việc plugin tự đẩy lên git khi bài viết chưa hoàn thiện.

Cách mình dùng

Khi viết xong bài, mình mở Command Palette (hoặc dùng phím tắt) rồi chọn lệnh Create backup.

Plugin sẽ tự động commit và push toàn bộ thay đổi lên GitHub. Sau đó Cloudflare Pages sẽ tự build và deploy web.

📱 Trên điện thoại thì sao?

Vì mình để toàn bộ dữ liệu trong iCloud (kể cả phần quản lý lịch sử Git), nên trên điện thoại plugin này vẫn hoạt động y hệt trên máy tính.

Workflow của mình khá đơn giản:

1. Viết bài trên điện thoại.
2. Viết xong, mở Command Palette chọn Create backup.
3. Xong.

Nhờ vậy, mình có thể tranh thủ viết và đăng bài thuận tiện hơn.

Lời kết

Hy vọng những chia sẻ này giúp bạn có thêm một vài gợi ý cho chiếc blog của riêng mình. Cảm ơn bạn đã đọc hết series này <3.

Ở bài trước, mình có nói về việc quản lý bài viết trên Obsidian. Một trong những lý do chính mình chọn cách này là để có thể tranh thủ viết bài trên điện thoại khi ra ngoài quán cafe hoặc nằm trên giường.

Để làm được việc đó, mình cần lưu toàn bộ folder dự án blog vào iCloud.

Tuy nhiên, có một vấn đề nhỏ: Dự án code (như Astro) thường chứa folder rất nặng, gồm hàng trăm file nhỏ. Việc sync đống file này qua iCloud vừa lâu, vừa không cần thiết (vì điện thoại không chạy code này).

Mình cần iCloud chỉ sync file bài viết () và bỏ qua các folder kỹ thuật.

⚙️ Cách giải quyết: .nosync và Symlink

Mình tìm hiểu được một cách khá hay trên macOS để xử lý việc này.

Cơ chế đơn giản là:

1. : iCloud sẽ tự động bỏ qua bất kỳ file/folder nào có đuôi này.
2. Symlink (Symbolic Link): Tạo một liên kết tham chiếu tới folder gốc. Nhờ vậy, code editor vẫn truy cập và làm việc với folder này bình thường.

Cụ thể: Mình đổi tên thành (để iCloud bỏ qua không sync). Sau đó tạo một shortcut tên là trỏ về nó (để code editor vẫn chạy bình thường).

🛠️ Cách mình làm

Mình mở Terminal ngay tại folder dự án và chạy 2 dòng lệnh:

Mình làm tương tự cho folder (folder build).

📱 Kết quả

Lúc này, khi mở folder dự án trên iPhone/iPad, thư mục sẽ không còn xuất hiện. Thay vào đó là file shortcut có dung lượng rất nhỏ.

Nhờ vậy, mình có thể mở file Markdown lên viết mà không phải đợi iCloud load những file không liên quan. Trên máy tính thì source code vẫn đầy đủ để chạy và build web.

⚡️ Tips tối ưu

Nếu bạn ngại gõ lệnh mỗi lần thì có thể dùng 2 cách sau:

1. Script tự động (Cho Terminal)

Thay vì phải nhớ và gõ lại hai dòng lệnh trên mỗi khi tạo dự án mới, bạn có thể tạo một hàm tắt (alias) trong Terminal.

Bước 1: Mở file cấu hình của Terminal (trên Mac thường là ) bằng lệnh:

Bước 2: Kéo xuống cuối file và dán đoạn code này vào:

(Xong thì bấm rồi để lưu, để thoát)

Bước 3: Cập nhật thay đổi:

Từ giờ, khi làm dự án mới, bạn chỉ cần mở Terminal ngay tại folder đó và gõ lệnh (ví dụ: ).

2. Dùng AI

Nếu bạn dùng Antigravity hay các AI Assistant có quyền chạy terminal, cứ copy prompt này cho nó làm giúp:

Bài tiếp theo: Sau khi viết xong trên điện thoại, làm sao để đẩy bài lên web?
→ Git Workflow trong Obsidian

Ở bài trước Setup Obsidian Template, mình đã giải quyết xong khâu tạo bài viết.

Hiện tại blog mình mới chỉ có khoảng hơn chục bài thôi. Tuy nhiên, bắt đầu có những lúc mình muốn tìm lại một bài cũ để sửa, hoặc check xem bài nào đang viết dở, thì việc phải lướt trong danh sách file rồi mở từng cái cũng hơi thủ công.

🤔 Vấn đề: Muốn nhìn tổng quan hơn

Bình thường code editor chỉ hiện danh sách tên file. Muốn biết bài nào (nháp) hay (đã đăng), hay bài nào chưa có ảnh cover, mình phải mở file đó ra mới thấy.

Với số lượng bài ít thì không sao, nhưng mình muốn có một cái nhìn tổng quát hơn.

🛠️ Giải pháp: Properties View

Obsidian có sẵn tính năng Properties View. Hiểu đơn giản là nó gom thông tin Frontmatter của các bài viết lại và hiển thị dưới dạng bảng.

Cách bật

Trước tiên, bạn cần bật plugin Properties View trong phần Core Plugin của Obsidian.

Sau đó, bạn cần chọn folder chứa các bài viết của mình (ở đây là ), và chọn "New Base".

Sử dụng thực tế

Mình chủ yếu dùng view này để:

1. Check bài nháp: Nhìn cột , thấy cái nào đang checked thì biết là chưa đăng.
2. Check ảnh bìa: Lướt cột , thấy ô nào trống thì bổ sung.
3. Xem ngày đăng: Sort cột để xem thứ tự bài viết.

Đơn giản vậy thôi. Nó giúp mình quản lý danh sách bài viết trực quan hơn chút so với việc chỉ nhìn list file.

Một cái tiện nữa là mình có thể sửa thông tin ngay trên bảng. Ví dụ muốn publish bài nào thì bỏ tick ngay tại bảng, đỡ phải mở file.

Kết luận

Với nhu cầu blog cá nhân đơn giản, plugin Properties View có sẵn của Obsidian là đủ để mình quản lý bài viết. Không cần cài thêm plugin, không cần setup phức tạp.

Bài tiếp theo: Làm sao để viết được trên cả điện thoại lúc ra ngoài?

→ Mời bạn xem tiếp: .nosync và Symlinks tối ưu iCloud

Ở bài trước Tận dụng Obsidian làm editor chính, mình có nhắc đến "nỗi đau" khi phải gõ tay từng dòng Frontmatter cho mỗi bài viết mới.

Hôm nay mình sẽ chia sẻ chi tiết cách mình xử lý vấn đề này bằng plugin Templater.

🤔 Tại sao cần Templater?

Ban đầu mình nghĩ dùng tính năng Templates có sẵn (Core Plugin) của Obsidian là đủ. Nhưng nó quá đơn giản, chỉ chèn được ngày giờ và một vài thông tin cơ bản.

Nhu cầu của mình thì phức tạp hơn:

1. Hỏi tiêu đề ngay khi tạo: Không muốn phải click vào title để sửa.
2. Slug tự động: Mình muốn nhập tiêu đề "Cách nấu phở" thì nó phải tự sinh ra slug (bỏ dấu tiếng Việt, thay khoảng trắng...).
3. Tên file chuẩn: Tự động đổi tên file thành .

Nên mình lựa chọn cài thêm plugin Templater (với khả năng chạy JavaScript) để có thể tự động hóa quy trình này.

🛠️ Các bước Setup

Bước 1: Cài đặt Plugin

Vào Settings → Community Plugins → Tắt "Restricted mode" → Tìm và cài Templater.

Bước 2: Chuẩn bị folder chứa template

Mình tạo một folder riêng để chứa các file mẫu, ví dụ: .

Vào Settings → Templater, ở mục "Template folder location", trỏ đến folder vừa tạo.

Bước 3: Tạo file Script

Tạo một file mới trong folder template đó, đặt tên là . Copy đoạn code này vào:

Cách script này hoạt động:

1. Hỏi tiêu đề: Khi chạy, nó sẽ hiện một popup hỏi bạn "Bài này tên gì?".
2. Xử lý Slug: Nó dùng JavaScript để biến "Tiếng Việt có dấu" thành "tieng-viet-khong-dau".
3. Tự đổi tên file: File sẽ tự biến thành .
4. Đặt trỏ chuột: sẽ đưa con trỏ chuột xuống dưới cùng, sẵn sàng để bạn viết.

🚀 Sử dụng

Quy trình viết bài mới của mình giờ chỉ còn 2 bước:

1. Bấm để tạo file mới từ template (phím tắt mình gán cho Templater).
2. Nhập tiêu đề và Enter.

Bùm! File được đổi tên, frontmatter được điền, và mình có thể bắt đầu viết ngay lập tức. Mọi thứ diễn ra trong chưa đầy 5 giây.

Bạn có thể áp dụng cách này cho Daily Note, Project Note, hay bất cứ loại nội dung nào có cấu trúc lặp đi lặp lại.

Bài tiếp theo: Sau khi tạo bài viết dễ dàng rồi, làm sao để mình có thể quản lý danh sách hàng chục bài viết?
→ Mời bạn xem tiếp Quản lý danh sách bài Blog với Obsidian Properties

Nếu bạn viết blog bằng Markdown (đặc biệt là với các Static Site Generator như Astro, Hugo, Jekyll), bạn chắc chắn đã gặp khái niệm này.

Định nghĩa

Frontmatter là đoạn thông tin nằm ở ngay đầu file Markdown, được bao bọc bởi hai dòng ba dấu gạch ngang .

Ví dụ:

Tại sao cần nó?

File Markdown chứa nội dung bài viết. Nhưng hệ thống (như Astro) cần nhiều hơn thế để hiển thị bài viết lên web. Nó cần biết:

• Tiêu đề bài viết là gì? (để hiện lên thẻ và thẻ )
• Ngày đăng bài? (để sắp xếp)
• Có phải bản nháp không? (để quyết định có build hay không)
• Ảnh đại diện là gì?

Frontmatter chính là nơi chúng ta "khai báo" những thông tin đó (gọi là metadata) cho máy hiểu.

Định dạng

Phổ biến nhất là dùng cú pháp YAML (YAML Ain't Markup Language). Nó hoạt động theo cặp .

Các trường phổ biến:

• : Tên bài viết
• : Đường dẫn URL (ví dụ: )
• / : Ngày đăng
• : Mô tả ngắn (cho SEO)
• / : Phân loại
• : (nháp) hoặc (công khai)

Trong Obsidian

Obsidian gọi phần này là Properties. Bạn có thể xem nó dưới dạng code (Source mode) hoặc giao diện bảng (Live Preview).

Khi kết hợp với plugin Dataview hoặc Templater, Frontmatter trở nên cực kỳ mạnh mẽ để quản lý hàng trăm bài viết mà không bị loạn.

Xem thêm:

• Cách tự động tạo Frontmatter với Templater
• Quản lý danh sách bài Blog với Obsidian Properties

Blog của mình build bằng Astro. Bản chất các bài viết là file Markdown (, ) nằm trong folder .

Ban đầu mình viết blog bằng code editor. Cũng không có vấn đề gì - đằng nào cũng là edit file Markdown. Nhưng sau khoảng 10 bài, mình bắt đầu thấy một số điểm không ổn.

🤔 Vấn đề khi viết nhiều bài

1. Frontmatter lặp đi lặp lại

Mỗi bài viết Astro bắt buộc phải có YAML frontmatter:

Quy trình tạo bài mới:

1. Mở một bài cũ
2. Copy frontmatter
3. Paste sang file mới
4. Sửa tay từng field: title, slug, date...

Làm vài lần thì ổn, nhưng làm hoài thấy mất công ghê! Đặc biệt là phần slug và rename file - mình thường xuyên gõ sai hoặc quên format ngày tháng. Chưa kể việc phải xóa dấu tiếng Việt thủ công cho slug nữa.

2. Khó quản lý trạng thái bài viết

Khi có nhiều bài, mình không biết:

• Bài nào đang ở trạng thái nháp?
• Bài nào chưa có description?
• Bài nào thiếu cover image?

File explorer của code editor chỉ hiện danh sách các file . Mình phải mở từng file để kiểm tra.

3. Vẽ diagram phải dùng app khác

Khi cần vẽ ảnh minh hoạ:

1. Mình mở Excalidraw.com hoặc Figma
2. Vẽ xong export ảnh
3. Copy vào folder
4. Import ảnh vào bài viết

Mỗi lần muốn sửa lại phải lặp lại từ đầu.

4. Không đồng bộ giữa các thiết bị

Code editor chủ yếu dùng trên laptop. Muốn viết bài trên iPad hay iPhone thì mình phải vào GitHub edit trực tiếp (rất mất công), hoặc dùng app note tạm rồi về máy tính viết lại.

Trước đây mình thậm chí còn nghĩ ra workflow đăng bài qua Telegram Bot để giải quyết vấn đề này.

🛠️ Obsidian giải quyết như thế nào?

1. Tự động frontmatter với Templater

Plugin Templater giúp tự động hóa việc tạo frontmatter.

Mình tạo một file template. Khi tạo bài mới, template sẽ:

• Hỏi tiêu đề bài viết
• Tự động tạo slug từ tiêu đề (ví dụ: "Hướng dẫn Obsidian" → )
• Tự động điền ngày tháng hiện tại
• Tự động đổi tên file thành

Quy trình tạo bài mới:

1. Tạo file mới
2. Apply template
3. Nhập tiêu đề
4. Xong

Không cần copy-paste hay sửa tay nữa.

2. Quản lý với Base View

Obsidian có tính năng Base View - xem tất cả bài viết dưới dạng bảng.

Mình có thể:

• Lọc bài viết theo trạng thái:
• Sắp xếp theo ngày
• Nhóm theo category

Thay vì phải mở từng file để kiểm tra như trước.

(Chi tiết: Quản lý danh sách bài Blog với Obsidian Properties)

3. Vẽ trực tiếp với Excalidraw

Plugin Excalidraw cho Obsidian:

• Vẽ ngay trong Obsidian
• File lưu trong vault
• Khi cần dùng cho blog: Mở file → Copy as PNG → Dán trực tiếp vào bài viết
• Muốn sửa thì chỉ cần mở file sửa rồi copy-paste lại

Không cần phải chuyển qua app khác.

4. Viết trên nhiều thiết bị

Vault Obsidian mình để trong iCloud. Kết hợp với kỹ thuật (để chặn sync các...

Ngữ cảnh:

Dạo này thấy anh em vibe coding với Astro cũng nhiều nên mình định làm project nhỏ này để tìm hiểu về Astro là chính.
Nhưng càng làm càng nghiền, nên mình đã đầu tư nhiều thời gian và chất xám cho nó một cách nghiêm túc hơn.

Lý do có tên Astrotion

Astrotion = Astro + Notion

Xuất phát từ việc mình làm việc chính trên Notion, thế nên mình nghĩ tiện nhất là mình có thể build một giải pháp để viết blog từ Notion -> Hệ thống xử lý -> Publish bài trên Blog.

Vì hệ thống này sẽ xoay quanh Astro và Notion, nên mình đặt tên nó là Astrotion :D.

Có một cú twist ở đây.. tới hiện tại thì mình nghĩ mình sẽ ưu tiên tối ưu workflow Astro và Obsidian trước. Mình sẽ kể chi tiết lý do vì sao mình lựa chọn sau.

Version đầu tiên của blog cũng đã hoàn thiện:

• ✅ UI & layout cơ bản
• ✅ SEO cơ bản
• ✅ Tối ưu tốc độ tải trang
• ✅ Tracking cơ bản (mình đang dùng Cloudflare Web Analytics)

Techstack sử dụng để xây dựng blog này:

• Framework: Astro 5.16.6
• Language: TypeScript
• Content: Markdown/MDX with Zod validation
• Styling: Vanilla CSS with custom properties
• Deployment: Cloudflare Pages
• Image Optimization: Sharp for src/assets/, raw serving for public/