Hướng dẫn cách blog này được tạo ra

Trong thời gian rảnh rỗi này tôi có tìm hiểu cách tạo 1 blog và tình cờ là nó không thể dễ dàng hơn bởi ngoài kia họ cung cấp rất nhiều thứ hoàn toàn miễn phí.

Sử dụng template

Vercel đưa ra các khá nhiều mẫu templates cho các bạn với các tuỳ chọn về blog, Ecommerce, framework, CMS, v..v...

Trọng tâm hôm nay là về Tailwind CSS Blog, tôi sử dụng nó cho blog của mình. Nó gồm các trang Trang chủ, Các trang về Bài viết, Dự án, Giới thiệu bản thân.

Giao diện khá gọn gàng, cấu trúc cơ bản, đủ cho bản thân sử dụng và cập nhất sau này. Tính năng được tác giả mô ta khá rõ ràng ở README.md, tiêu biểu như sau:

Công nghệ: Nextjs, Tailwind, ReactJs
Sử dụng MARKDOWN để tạo nội dung cho bài viết
Hỗ trợ ảnh, code sample, ...
Các bài viết có thể đánh tag để dễ tìm kiếm
Hỗ trợ theme sáng, tối

Thế nên, tôi đã vô repository của dự án, fork về cho mình 1 bản. Tiếp đó là bước clone về để code trên máy tính. Việc fork giúp đảm bảo cập nhật tính năng, sửa bug từ repository của anh Timothy Lin.

Vị trí các bài viết nằm ở đường dẫn data/blog. Ta tạo file có đuối .mdx và bổ sung nội dung cho bài viết. Mới đầu, bạn copy bài viết nào sẵn có và sửa thông tin title, date, tags, draft,...

Bài nào bạn chưa muốn đăng hãy để là false, thì khi deploy sẽ bị ẩn đi. Thứ tự các bài sẽ hiển thị theo thời gian gần nhất nên bạn hãy thay đổi ngày tháng cho bài viết nhé.

Thế là xong, bước cuối cùng là DEPLOY. Cứ theo y chang hướng dẫn của anh Lin mà làm:

Đi tới Settings -> Page -> Build and deployment -> Source
Chọn Github Actions

Vậy là mỗi lần tạo Pull request từ nhánh feature tới main. Merge xong, quá trình Deploy sẽ diẽn ra tự động các bạn ạ.

Câu hỏi và Trả lời

1. Tạo nội dung như thế nào?

Để tạo nội dung cho bài viết, tôi sử dụng chương trình Joplin. Nó sử dụng markdown, tôi có thể viết nội dung và thấy preview kết quả ngay bên cạnh. Nhìn chung Joplin dễ sử dụng, bởi nó cho phép tổ chức các bài viết theo thư mục. Vậy nên, tôi sẽ lên ý tưởng và hoàn thành bài viết ở đây, sau đó copy nội dung vô trong sourcecode, commit và đẩy lên github. Mọi thứ sẽ tự động được deploy. Chời! khá mượt pk nào 😉

Khi chụp màn hình, có thể copy + paste vô, Joplin sẽ lưu vô. Khi muốn lấy file hình nào, hãy phải chuột vào bức hình và chọn nơi lưu

2. Sắm tên miền ra sao?

Mềnh có đăng ký tài khoản ở https://www.namecheap.com và mua domain ngayhe.com. Giá 1 năm chỉ khoảng 8usd tức là khoảng 200 ngàn. Cái đặt Advanced DNS:

Rồi đi qua repo để thay đổi Custom domain là Done

3. Setup

Sau khi clone về, tôi dùng yarn. Các scripts được qui định ở trong package.json

- cài đặt các package

yarn install

- chạy dev

yarn run dev

- Khi cần có thể build local trên máy và chạy thử với

yarn run build
yarn run serve

Thiết kế bởi Freepik