- vừa được xem lúc

Thiết kế website tin tức chỉ bằng html css không có back end ? Tin được không ?

0 0 14

Người đăng: Tran Quang Huy B

Theo Viblo Asia

Như chúng ta đã biết 1 website tĩnh sẽ rất khó khăn trong việc thay đổi nội dung do đó để sử dụng 1 website tĩnh làm trang tin tức có thể nói là gần như bất khả thi. Chẳng lẽ mỗi lần đăng bài mới chúng ta phải vào source code để sửa hay sao ? Nếu các bạn đang có cùng câu hỏi như vậy thì mời các bạn xem qua website mình mới thiết kế https://zreview.vn . Đây là website review chủ đề linh tinh được code hoàn toàn bằng html css (không js), mình clone giao diện từ 1 web tin tức khá nổi tiếng trong nước.

Tại sao mình lại chọn website tĩnh ? Đơn giản nó là nguồn cội của mọi website, bất kể website nào cuối cùng thì cũng build thành html css và js cho người dùng xem mà thôi. Lý do thứ hai là website tĩnh load cực nhanh (gần như realtime) do đó được google đánh giá cao trong việc đánh index, rất tốt cho SEO. Bằng chứng là các chỉ số SEO khi check Lighthouse của website này gần như đạt full.

Lý thuyết là vậy nhưng trên thực tế, web mình SEO chưa tốt lắm do website còn mới, chưa có backlink, bài đăng có bài lên top google search, có bài nằm tít top 15, 20. Nhưng có một điểm cộng là đăng bài xong được duyệt index khá nhanh, khoảng 2 3 tiếng là đã xuất hiện trên google tìm kiếm, mình đăng ký google news thì được duyệt luôn trong ngày, bình thường mình toàn phải chờ 4,5 ngày mới có kết quả.

Quay trở lại với vấn đề làm sao để tạo trang tin tức bằng HTML, CSS mà không dùng back-end và database. Thực ra là vẫn cần back-end và database, nhưng nó không dính líu gì đến website tĩnh cả. Ý tưởng ban đầu của mình là thay vì sử dụng ngôn ngữ back-end làm server side rendering hoặc tạo API, thì mình sẽ dùng nó để generate ra file HTML. Ví dụ khi người dùng tạo bài viết mới, mình sẽ tạo ra file tiêu-đề-của-bài-viết.html, đồng thời sửa lại trang index.html để cập nhật chỗ xuất hiện của bài viết, ngoài ra sửa thêm file sitemap.xml (để hỗ trợ google đánh index) và file atom.xml (đăng ký google news). Tác vụ sửa và xóa bài viết cũng tương tự. Sau khi tạo/sửa file xong mình sẽ tiến hành tự động deploy bằng code back-end luôn, thường deploy web tĩnh chỉ mất khoảng 2 3 giây là xong. Nếu kiểm tra website chạy bằng CMS/Framework gì bằng các tool kiểm tra trên mạng thì sẽ cho ra kết quả là HTML và CSS (Thì đúng là như vậy thật mà).

image.png

Nhiều bạn sẽ thắc mắc sử dụng tới 2 server một lúc (1 để build website tĩnh có back end và database, 1 để build web tĩnh) như vậy rất tốn chi phí đúng không? Thực ra chi phí cho server này là 0 đồng. Lý giải cho điều này, việc build web tĩnh không đòi hỏi cấu hình website mạnh cũng như băng thông không cần lớn, do đó chúng ta có thể dùng server miễn phí của AWS. Hiện mình đang dùng server free 1 năm của amazon. Còn server website tĩnh thì hiện tại rất nhiều nơi cho phép build web tĩnh free, và mình thì đang dùng hosting của Vercel App, do Vercel app có điểm cộng là không giới hạn băng thông và dung lượng cho phép lưu trữ lớn, viết cả ngàn bài báo cũng không hết. Tóm lại mặc dù dùng 2 server nhưng hoàn toàn miễn phí. Ngoài ra các bạn muốn tăng tốc độ website lên realtime thì có thể thuê hosting ngay tại Việt Nam như bên tenten, matbao ... giá cũng khoảng 30 - 50k/1 tháng. Làm web tĩnh cũng an toàn do không sợ bị tấn công database và back-end (hacker không biết địa chỉ IP dùng để build web tĩnh) và tốc độ tải trang thì nhanh khỏi bàn.

Một ưu điểm khác của cách làm này là bạn có thể clone mọi web tin tức hoặc bán hàng mà bạn muốn trong khi chất lượng SEO thậm chí còn tốt hơn website gốc. Nếu bạn muốn tích hợp một số tính năng như comment, like, share, đăng nhập, đăng ký, mua hàng, giỏ hàng thì chỉ việc thêm API vào server và gọi từ website tĩnh sang là được.

Công nghệ mà mình giới thiệu có tên chung là Static Generation. Hiện nay có rất nhiều Framework đang hướng tới công nghệ này để tối ưu SEO có thể kể đến như: NextJs, Gasby, NuxtJs, Jekyll. Nhưng thực tế việc các bạn sử dụng ngôn ngữ back-end hay framework gì không còn quan trọng, vì đầu ra cuối cùng giống nhau đều là website chỉ có HTML CSS, riêng mình thì lựa chọn Ruby on rails vì đây là Framework mình chắc tay nhất.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Một số quy tắc và name class phổ biến cho Front-end Dev

Trong CSS, các thủ tục setting đóng vai trò to lớn, nhưng bên cạnh đó, cách đặt tên theo các từ đơn sao cho phù hợp cũng quan trọng không kém . Đặt tên rất khó, nhưng cũng rất quan trọng .

0 0 91

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 56

- vừa được xem lúc

Tài nguyên nghiên cứu sâu Html

1. Articles and standards. . HTML 5.

0 0 196

- vừa được xem lúc

Tìm hiểu về Event.preventDefault(), Event.stopPropagation() và Event.stopImmediatePropagation()

Chúng ta thương thấy 3 method này và có thể dẫn dến bối rối và nhầm lẫn giữa chúng:. . Event.preventDefault().

0 0 50

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 72

- vừa được xem lúc

Thủ thuật nhỏ để căn chỉnh image với object-fit

Chào các bạn,. Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm.

0 0 48