Bạn cũng có thể tạo một blog như mình bằng Notion

Created: 3 days ago

Updated: 3 days ago

6 min read

2 views

Tags:

websites blog nextjs notion open source

🔗

You can read the English version here.

Đã hai năm kể từ khi mình tạo ra dự án mã nguồn mở này cho mọi người. Sau khi dành thời gian tìm hiểu và học hỏi thêm về Notion, mình cũng đã cập nhật và bổ sung một số tính năng mới cho dự án nhỏ này. Qua bài viết này, bạn cũng có thể thiết lập một trang web tương tự như mình.

Nếu bạn muốn sử dụng phiên bản cũ, bài viết trước sẽ hướng dẫn chi tiết.

Mặc dù mình đã viết phần giới thiệu và hướng dẫn dành cho những bạn có kiến thức lập trình, nhưng mình cũng muốn những ai không có kinh nghiệm cũng có thể dễ dàng thực hiện.

Vì sao mình phát triển dự án này

Mục tiêu ban đầu của mình là tạo một blog để lưu lại kiến thức và chia sẻ trải nghiệm trong công việc. Giống như nhiều người, mình bắt đầu với WordPress, nhưng trải nghiệm viết bài trên đó khá rườm rà, nên mình chuyển sang một CMS khác là XenForo. Tuy nhiên, XenForo lại thiên về diễn đàn thay vì blog. Mặc dù mình cũng muốn mọi người cùng đóng góp bài viết, nhưng số lượng tính năng quá nhiều cùng việc kiểm duyệt phức tạp khiến mình từ bỏ.

Tiếp theo, mình thử Markdown và Obsidian, vốn có ưu điểm là mượt mà, nhưng điểm hạn chế cố hữu là không hỗ trợ làm việc theo thời gian thực. Cuối cùng, mình tìm thấy Notion --- một nền tảng cho trải nghiệm viết bài tuyệt vời và giúp mình cập nhật hệ thống nhanh chóng.

Phiên bản trước hoạt động khá ổn. Tuy nhiên, 👏 Thi-AnhDinh, một người anh đã đọc bài blog của mình, đã nghiên cứu thêm về Notion và giúp cải thiện cách lấy dữ liệu, tránh phụ thuộc vào Notion API chính thức. Mình thực sự biết ơn đóng góp của anh ấy cho phiên bản này.

👉

Bạn có thể xem blog của anh ấy và bài viết này, từ phần này đã hỗ trợ mình triển khai phiên bản mới.

Hướng dẫn triển khai hệ thống bằng Notion và Vercel

⚠️

Trước tiên, bạn cần có một tài khoản GitHub. Hãy đăng ký trước khi thực hiện các bước tiếp theo.

🔗

Repository: https://github.com/howznguyen/howz.dev

Fork Repository

Vào repository này để clone hệ thống. Hãy sử dụng tính năng Fork trên GitHub trước khi chuyển sang bước Clone.

Sau đó, đổi tên Repository và phần mô tả (Description) cho website của bạn. Cuối cùng, nhấn Create Fork.

Khi đã fork thành công, bước tiếp theo là chỉnh sửa thông tin bạn muốn hiển thị.

Cập nhật thông tin trang web trong Repository

Trong dự án, bạn sẽ thấy thư mục datas/. Đây là nơi lưu trữ thông tin website, bạn có thể chỉnh sửa để phù hợp với nhu cầu.

Ba file chính cần chỉnh sửa:

datas/home.ts --- Lưu thông tin hiển thị trên trang chủ.

datas/categories.ts --- Lưu thông tin chuyên mục và tags; các bài viết sẽ hiển thị theo tag tương ứng.

datas/footer.ts --- Lưu thông tin liên hệ để hiển thị dưới chân trang (footer).

Bạn có thể chỉnh sửa trực tiếp bằng cách như sau:

Sau khi chỉnh sửa, hãy nhấn Commit changes để lưu lại.

Cài đặt trong Notion

Dựa trên chia sẻ của Anh-Thi Dinh, mình đã sử dụng API không chính thức của Notion thay vì API chính thức, vì:

Tốc độ: Nhanh ngang với truy cập trực tiếp Notion.

Hỗ trợ đầy đủ style: Bao gồm tất cả các block và định dạng.

Không giới hạn request: Tránh lỗi 429 "Too many requests".

Có tìm kiếm: Hỗ trợ tìm kiếm cơ bản theo tiêu đề và mô tả.

Database Template

Mình đã tạo sẵn một Notion template cho dự án. Bạn có thể duplicate về workspace của mình hoặc tạo database mới với các thuộc tính:

title (Title)

slug (Rich Text)

description (Rich Text)

tags (Multi-select)

status (Select: Published, Draft, Archived)

featured (Checkbox)

Lấy IDs và Tokens cần thiết

Bạn cần chuẩn bị đủ các thông số sau:

ini

Từ Notion URLs:

Database ID: Nằm sau dấu / cuối cùng trong URL database.

Space ID: Nằm ngay sau notion.so/. (NOTION_SPACE_ID)

Collection View ID: Nằm trong URL của database view. (NOTION_POST_DATABASE_VIEW)

Từ Browser (Chrome/Edge):

Mở Notion và đăng nhập.

Mở Developer Tools (F12 hoặc Inspect).

Vào tab Application → Cookies → https://www.notion.so.\

Lấy giá trị:

token_v2 → NOTION_TOKEN_V2

notion_active_user → NOTION_ACTIVE_USER

Từ Network Tab:

Vào tab Network trong Developer Tools.

Refresh trang Notion hoặc mở database.

Tìm request đến https://www.notion.so/api/v3/queryCollection?src=initial_load.

Xem headers để lấy cookie chứa tokens.

Lấy thêm thông tin trong mục Payload của request.

Deploy Website

Mình sẽ sử dụng Vercel để deploy website. Bạn cần đăng nhập bằng tài khoản GitHub.

🔗

Vercel: https://vercel.com

Sau khi đăng nhập, nhấn Add New... → Project.

Chọn project đã fork trước đó và nhấn Import.

Sau khi import, đổi tên Project và thêm Environment Variables đã lưu. Nhập xong, nhấn Deploy.

Chờ vài phút, bạn sẽ có một blog hoạt động trên Notion.

Kết luận

Bằng cách làm theo các bước trên, bạn có thể nhanh chóng triển khai một blog cá nhân với Notion và Vercel. Cách tiếp cận này giúp bạn quản lý nội dung dễ dàng trong Notion, đồng thời tận dụng hạ tầng mạnh mẽ của Vercel.

Mình sẽ tiếp tục duy trì và cập nhật dự án, vì vậy bạn có thể để lại phản hồi, đề xuất cải tiến, hoặc báo lỗi ở phần bình luận bên dưới. Hy vọng bài viết này giúp bạn xây dựng một không gian riêng để chia sẻ kiến thức và trải nghiệm --- và đừng quên khám phá sự linh hoạt mà Notion mang lại khi kết hợp với các nền tảng triển khai hiện đại.

Cảm ơn bạn đã đọc bài viết này.howznguyen with love ❤️