Bài viết này có dành cho bạn?
Chưa biết làm gì, bạn đang mông lung giữa rừng công nghệ <Mông lung giữa rừng bí pháp, tịch mật>
Chạy đua theo công nghệ nhưng trình độ cảm thấy chững lại<Tắc nghẽn đan điền>
Ở đây mình sẽ đồng hành cùng bản làm 1 project siêu to khổng lồ của chính mình, sẽ cùng bạn đi đến cực hạn của công nghê để lột xác nó
ok nói thế là bạn hiểu cần chuẩn bị 1 tâm hồn đẹp 🚀
Kiến thức cần có:
Kiến thức cơ bản về html, css, js ở mức cơ bản sẽ tiếp nhận được ở các chương đầu
Kiến thức cơ bản về reactJs và nâng cấp hơn là nextJs ở các chương sau
Kiến thức cơ bản về git
Kiến thức sâu hơn về cách mà website hoạt động
và xuất phát thôi nào 👨🦼
Xuất phải điểm từ đáy công nghệ
Khi mình viết Blog này mình cũng giống các bạn, à đôi khi mình còn không bằng các bạn đâu 💩 vừa học chậm, lúc nào cũng ngồi suy nghĩ 2 thì các bạn khác đã suy nghĩ 10 rồi. Mình còn mắc căn bệnh khó hiểu cái gì là phải hiểu đến cùng, mọi người nghĩ đó là tốt cho đến khi mình đặt câu hỏi dù hơi ngớ ngẩn nhưng “tại sao 1 + 1 bằng 2”, “tại sao hiệu điện thế lại là U=I.R”, mỗi câu hỏi như vầy luôn tiêu tốn thời gian của mình 1 đến 2 tuần. Thật bực bội khi không thể hiểu được và trong thế giới công nghệ này cũng vậy, 1 vạn câu hỏi vì sao luôn 😨 và mình mong muốn sau bài này giúp các bạn tiết kiệm nhiều thời gian để giúp ích cho đất nước 🇻🇳.
Hãy học tập chăm chỉ kèm theo đó hãy áp dụng những thứ mình học được để giúp ích cho mọi người, học đi đôi với hành. Bài viết này mình làm ra không phải để hướng dẫn các bạn làm 1 blog hoàn chỉnh, đẹp đẽ ra sao đâu mà làm sao để các bạn đi từ đáy xã hội đi lên, mình sẽ cố gắng đi từ cái nhỏ nhất dễ nhất để đến khi nó không đủ dùng nữa mới nâng cấp chứ mình không đi thẳng vào các công nghệ mới xịn xò luôn 😍
Có rất nhiều cách để làm ra 1 trang web nhưng thường chia làm 2 trường phái:
Sử dụng bên thứ 3, từ giao diện người dùng, giao diện admin, hệ thống xử lý, nơi lưu trữ dữ liệu, … đều được phục vụ sẵn có và mình chỉ việc húp
Từ mình xây dựng từ a-z
Nếu dùng cách 1 sẽ có khá nhiều cản trở cho mình:
Tích hợp và ăn sẵn nhiều như vậy đương nhiên tốc độ giảm là điều đương nhiên, chậm chạp và nặng nề là những mỹ từ dùng để miêu tả cho nhưng dạng như này. Ví dụ mình chỉ cần giao diện người dùng mà ko cần mấy phần còn lại nhưng vẫn sẽ phải khởi tạo và chạy đầy đủ ⇒ không tối ưu
Khi làm việc mình muốn sửa đổi cấu trúc, sử đổi giao diện một cách dễ dàng nhưng vì là 1 hệ thống ăn liền điều này là khá khó ⇒ không linh hoạt
⇒ Không đáp ứng được nhu cầu của mình nên mình đã làm phương án 2.
Tự lực tự cường
v0.1.0: Đi từ bước nhỏ
nhưng đừng có tryhard quá nhé 🤣🤣🤣 code vừa vừa thui cái quan trọng là mindset nên có sai các bạn thấy mình sai cứ góp ý nha.
Đầu tiên để xây dựng được blog của bạn cần có giao diện Trang chủ. Xác định được mục tiêu rồi thì chúng ta tìm 1 giao diện đẹp trên mạng:
Clone về nếu ngon nhất: một giao diện đáp ứng được các yếu tố html có class đọc dễ hiểu, sáng sủa và đi kèm đó là css cũng phải đầy đủ và dễ tuỳ chỉnh theo ý mình. Thường là có những bên sẽ free cho bạn thường là hơi xấu chưa ưng mắt lắm, còn nếu muốn đẹp mà họ còn cho nguồn code thì phải bỏ tiền
Tìm được giao diện đẹp tự code lại: Bạn mên suy nghĩ theo hướng mình hiểu được concept mà trang web định copy. Hiểu đươc nó bạn sẽ code thoáng tay hơn, thoải mái hơn và biến nó thành của mình thay vì là ngồi soi từng px 1 để rồi tốn cả đống thời gian.
Tiếp đến nên chọn cái gì để có thể viết css một cách nhanh chóng và mượt mà thì mình khuyên bạn nên dùng Tailwind còn tại sao ư? Hãy vào đây để học về Tailwind nào.
Sau khi chúng ta có 1 giao diện hoàn chỉnh cùng xem cần gì không nào 🙄 là tui tui dừng ở đây và chốt đây là v0.1.0 rồi vì đơn giản nhất mình chỉ muốn có 1 giao diện show cho người dùng thoi, không đọc ghi không tương tác chỉ là văn bản.
v0.1.1: Nhặt sạn
Bạn thấy bạn viết cũng ổn rồi đúng không. Ok phết nhưng nếu giữ suy nghĩ đấy thì chúng ta sẽ không có những vĩ nhân đâu. Liên tục đặt câu hỏi: “Còn có thể tốt hơn được không nhỉ ?” là những điều khiến ta trở nên chỉnh chu hơn.
Tối ưu, dù chỉ là html css cũng cần phải tối ưu. Bạn đang xài Tailwind theo dạng CDN hãy xoá nó đi:
Sử dụng tool của Tailwind nó giúp bạn dùng đến class thì có css tương ứng, dùng gì import đấy không thừa tràn làn như CDN.
Làm thêm bước nữa minify giúp loại bỏ khoảng cách để file nhẹ hơn nữa. Đỉnh lun 💥
Mỗi file html lại có file css tương ứng.
Việc tạo ra 1 file css giúp chúng ta cache lại được <vũ khí này khá nặng đô đấy cache>.
Hãy dùng Prettier Tailwind để chúng ta có sự thống nhất trong cách viết code, thứ tự đặt tên class và nhớ tiny image nhé 😝 Đó là những gì ở phần này.
v1.0.0: Bước ngoặt cuộc đời
Khi mà lượng bài biết trong blog tăng lên, mình không thể sửa tay tối ưu hoá từng file như thế này được, ta cần BIG UPDATE nhưng sẽ là phần cơ bản nhất thui nhé:
Database<DB> để lưu bài viết
Backend<BE> để tương tác DB
Frontend<FE> tương tác BE để hiện thị nội dung cho người dùng
Và điều quan trọng là gì? là chưa ai đọc blog của mình cả nên tất cả phải FREE Muahaaaaaaaa 🤑 Mình ưu tiên chọn free trước nhé:
DB mình chọn MongoDB: giai đoạn này mình chưa định hình được hết 1 blog cần những trường nào nữa ngoài những trường cơ bản nên cần lưu trữ dạng NoSQL. Mongo cho phép mình tạo 1 cluster free Kaka 🥰
Mình muốn Blog của mình có thể ServerSide-Rendering để có thể SEO và mang đi khoe với bè bạn. Cũng có rất nhiều lựa chọn nhưng mình chọn NextJs vì mình mới chỉ biết đến nó nên xin phép không so sánh hơn kém với các framework khác.
Chọn được công nghệ vậy cùng bắt tay vào làm thôi.
Khi bắt tay chuyển mình như này mình bắt đầu phải suy nghĩ nhiều hơn, có backend, db đồng nghĩa mình cần nhiều thứ hơn cái hmtl fix cứng dữ liệu kia. Đầu tiên khi làm 1 blog mình cần tạo bài viết đúng không, ở phiên bản cũ mình fix cứng dữ liệu nhưng mỗi khi có 1 bài mới thì lại phải copy pase … các thứ lại từ đầu và khi mình thay đổi layout tý thì ối dồi ôi 😱 nhưng khi đi trên con xe đời mới nó phải khác chứ, mình xây dựng 1 bảng lưu trữ bài viết và đi kèm đó là 1 bộ công cụ để nhập liệu bài viết.