Cách tạo trang web như HowzDev mà không cần biết code

Cách tạo trang web như HowzDev mà không cần biết code

Created: 24/04/2023 12:07
Updated: 3 days ago
4 min read
8 views

Xin chào mọi người, cảm ơn các bạn đã ghé thăm và ủng hộ trang web của tui. Website này là dự án mã nguồn mở mà mình thực hiện. Tuy vậy có một vấn đề nan giải là có nhiều bạn rất muốn xây dựng một trang web như vậy nhưng lại không biết code. Bài viết nay sẽ giúp các bạn 🥲.

Clone repository

Ở bước đầu tiên, bạn phải có source code. Mình đã đăng nó lên Github và mọi người có thể sử dụng chúng ở dưới đây:
⚠️
No content available
Bạn hãy nhấn vào Folk sau khi đăng nhập thành công vào GitHub
Image
Sau đó bạn cần phải đổi Repository nameDescription cho website của bạn. Tiếp theo, bạn hãy nhấn Create folk.
Image
Và đây là dự án của bạn sau khi được folk thành công.
Image

Config File Language

Sau khi bạn đã có source code từ dự án của mình rồi, công việc tiếp theo là thay đổi thông tin trong các file ngôn ngữ:
  • src/lang/en.ts: File Tiếng Anh
  • src/lang/vi.ts: File Tiếng Việt
Bạn có thể chỉnh sửa trực tiếp bằng cách như sau:
Image
Image
Sau khi chỉnh sửa xong thì bạn hãy nhấn nút Commit changes.

Setting in Notion

Trong dự án của mình có một mẫu Notion mà mình đã tạo ra cho dự án. Vì thế, hãy nhân bản nó về Notion của bạn và chỉnh sửa các trang SettingsNavigation theo ý thích của mình
Sau khi đã có được trang Notion, bạn cần phải có NOTION_API_KEY và những ID của database trong các trang của các bạn. Để lấy được NOTION_API_KEY, hãy làm theo các bước sau đây:
Vào trang Notion integrations page và nhấn Create new integration.
Image
Tạo một cái tên và nhất “Submit” để lưu lại.
Image
Sau khi chọn xong, bạn sẽ thấy App bạn vừa tạo sẽ xuất hiện. Bạn nhấn vào và sẽ thấy được mã  NOTION_API_KEY ở bên dưới phần "Internal Integration Tokens" . Bạn nên lưu lại ở đâu đó và nó sẽ được sử dụng ở phần bên dưới.
Image
Sau khi trở lại mục Notion của bạn. Bạn sẽ phải mở App của mình bằng cách như sau:
Image
Sau đó, bạn phải lấy ID của các trang Setting, List Post, và Navigation trên URL và lưu lại.
Image

Deploy website

Mình sẽ chọn Vercel làm máy chủ để khởi chạy trang web. Bạn cần phải đăng nhập bằng GitHub của mình.
Sau khi đăng nhập thành công, Bạn hãy nhấn Add New... và sau đó là Project
Image
Chọn project của bạn đã folk lúc nãy và chọn Import
Image
Sau khi import bạn nên thay đổi Project Name và thêm các Environment Variable bạn đã lưu ở bên trên. Bạn có thể xem file env.example trong dự án của mình và áp dụng để thêm vào. Sau khi nhập xong, thì hãy nhấn Deploy
Image
💡
No content available
Sau khi chờ đợi khoảng vài phút, bạn đã có được một website Blog sử dụng từ Notion rồi.
Image

End

Và đó là hướng dẫn cách tạo một trang web từ mẫu của bạn mà không cần phải biết code gì cả. Nếu có bất kỳ ý kiến, thắc mắc hay góp ý nào, các bạn có thể bình luận bên dưới bài viết để mình có thể phản hồi nhanh nhất có thể.
Nếu thấy hay thì thả tim dưới bài viết và chia sẻ bài viết nếu có thể nhé.
Cảm ơn vì đã xem. ❤️
HowzNguyen
Related Posts:

Hướng dẫn chuyển dữ liệu từ Google Drive sang Onedrive một cách tự động

1 min read
4 views
05/03/2023 00:29

Bài này sẽ hướng dẫn bạn đọc chuyển dữ liệu từ Google Drive sang Onedrive một cách miễn phí.

Sử dụng ChatGPT vào Visual Studio Code nhờ Extension này

1 min read
3 views
03/03/2023 15:00

Sử dụng ChatGPT để hỗ trợ việc code của bạn ngay trong VSCode một cách hiệu quả