Bài viết này mình sẽ hướng dẫn anh em tạo một blog gần giống như mình một cách nhanh và đơn giản nhất. Nếu bạn có thể đọc hiểu tiếng Anh thì có thể làm theo hướng dẫn từ repository này.
Nếu không thì nội dung của bài viết này của mình sẽ hướng dẫn một cách chi tiết và nhanh gọn nhất cách tạo ra một blog giống mình
Bước 1: Clone repository
Truy cập và clone repo sau đây: https://github.com/wildcatco/notion-blog
Hoặc mở command line ở thư mục mà bạn muốn clone và pate đoạn code sau:
git clone https://github.com/wildcatco/notion-blog.git
Sau khi clone xong ta có thể truy cập vào thư mục của dự án bằng cách
cd notion-blog && npm install
Bước 2: Tạo bản sao notion
Vì blog này sử dụng notion làm nơi lưu trữ bài viết nên chúng ta cần cài đặt notion để viết và quản lý bài viết
Tạo bản sao của notion sau bằng cách truy cập Link sau và chọn Duplicate
Sau khi clone xong notion thì bước tiếp theo cần thực hiện là public notion. Chọn share > publish > Publish to web.
Sau khi publish bạn có thể xem trang của bạn bằng cách visit site
Bước 3: Lưu id của notion
Sau khi mở trang notion của bạn dưới dạng web thì tới đây bạn cần lưu lại id của notion này bằng cách copy đoạn id sau
Bước 4: Lấy thông tin token
Tại bước này chúng ta cần thay đổi url tới trang quan lý của notion bằng cách sửa đường dẫn phía trước /Blog-…. thành notion.so/Blog-…
Sau đó tìm kiếm tới giá trị token và copy nó và lưu ra file nào đó khác giống như ID để chúng ta đến với bước tiếp theo.
Bước 5: Setting biến môi trường và chạy ứng dụng
Từ thư mục root của dự án chúng ta mới clone về từ bước một chúng ta tạo 1 file có tên là .env.local sau đó mở file và set giá trị cho các biến môi trường như sau:
NOTION_DATABASE_ID: được lấy từ bước 3 NOTION_AUTH_TOKEN: được lấy từ bước 4 SITE_URL: URL của trang (nếu bên trong môi trường local thì để là http://localhost:3000) API_KEY: Chọn một mật khẩu hoặc cái gì đó mà bạn nghĩ nó có độ bảo mật cao
Sau khi hoàn thành các bước trên thì bạn chỉ việc chạy câu lệnh dưới đây:
npm run dev
Truy cập vào http://localhost:3000
Bạn sẽ thấy trang blog của mình được hiển thị ra,sau đó chỉ việc vào code và chỉnh sửa lại code sao cho đẹp và hợp lý với trang mà bạn mong muốn.
Ở trang của mình đã sửa qua lại padding cũng như là font chữ và giao diện trang chủ cũng như liên hệ, các bạn cũng có thể chỉnh sửa chúng làm sao cho đẹp và phù hợ.
Mọi thắc mắc có thể ib qua link instagram mình có để ở trang chủ blog mình nhé.
