Hướng dẫn cách tạo một trang web miễn phí không cần Wordpress

Hướng dẫn cách tạo một trang web miễn phí không cần WordPress

Hướng dẫn từng bước cách tạo một trang web miễn phí tải siêu nhanh với tên miền riêng và hosting miễn phí mà không cần dùng đến WordPress.

Đôi khi bạn chỉ muốn tạo một trang web đơn giản để chạy quảng cáo sản phẩm hay sự kiện.

Bạn không thể chỉ vì muốn có một vài trang web mà cài đặt WordPress khá nặng nề và tốn kém.

Giải pháp tốt nhất là bạn sử dụng các dịch vụ tạo landing page để tạo. Tuy nhiên, các dịch vụ này thường không miễn phí.

Thông thường bạn sẽ bị hạn chế ở rất nhiều mặt như tên miền riêng, mẫu thiết kế, dung lượng lưu trữ, pageviews,…

Có một cách hoàn toàn miễn phí mà rất lợi hại giúp bạn có được lập tức một trang web mà không cần đến WordPress lại đồng thời thoả mãn các điều kiện như:

  • Tên miền riêng (tên miền của bạn)
  • Tốc độ siêu tốc
  • Không giới hạn pageviews
  • Không giới hạn trang

Giải pháp đó là tạo trang web “tĩnh” và hosting nó bằng Github Page.

Nếu bạn thuần thục cách này, thậm chí bạn có thể tạo được một website hoàn chỉnh với cả blog “tĩnh”.

Cách tạo một trang web “tĩnh” miễn phí (static landing page)

Đầu tiên bạn cần một trang web tĩnh (HTML web).

Bạn có thể tự viết code HTML và CSS để tạo một trang web “tĩnh” nhưng tôi nghĩ cách này là quá khó cho tất cả mọi người.

Vì vậy, để dễ dàng hơn bạn nên dùng những dịch vụ xây dựng trang online với thao tác kéo thả tiện lợi và có chức năng export ra trang web tĩnh.

Trong quá trình nghiên cứu tôi thấy rằng có 2 dịch vụ tạo trang mạnh mẽ và dễ dùng cho hầu hết mọi người đó là:

  1. Ladipage (của Việt Nam)
  2. Brizy Cloud

Tôi hướng bạn dùng Ladipage hơn không phải vì lòng yêu nước mà là nó quá tốt và dễ. Thậm chí các dịch vụ landing page trên thế giới nên học hỏi Ladipage vì tốc độ tối ưu và trang web sau khi xuất ra chỉ với 1 file duy nhất.

Bạn cần tạo một tài khoản miễn phí Ladipage là có thể tạo trang ngay.

Giao diện sử dụng và trang mẫu hoàn toàn tiếng Việt vô cùng thân thiện, cách thêm các thông tin SEO và nhúng các dịch vụ thứ 3 dễ dàng thật tuyệt vời. Quá dễ dùng với mọi người.

Tao Trang Web Moi Trong Ladipage
Tạo trang mới trong Ladipage
Giao Dien Mau Cua Ladipage
Lựa chọn giao diện mẫu với nhiều chủ đề khác nhau của Ladipage
Giao Dien Su Dung Ladipage 1
Chèn Google Analytics, các thông tin SEO và các mã script bên ngoài dễ dàng

Sau khi bạn đã tạo được một trang như ý bạn sẽ export ra thành một trang web tĩnh HTML.

Html Export Trong Ladipage
Xuất trang web đã tạo và download về máy tính với định dạng html

Bạn đổi tên file thành index.html để tới bước kế tiếp.

Trước khi bạn đến bước kế tiếp, một số lưu ý cực kỳ quan trọng về hạn chế mà Ladipage miễn phí như sau:

  • Form tạo bởi Ladipage sẽ chỉ gửi thông tin qua email mà không thể dùng những chức năng khác như API hay các dịch vụ email marketing liên kết. Bạn nên dùng Form từ bên thứ 3 để nhúng vào trang (dùng HTML Element khi tạo trang) như Pabbly Form hay các dịch vụ tương tự độc lập. Không nên dùng Form của Ladipage.
  • Bạn phải điền đầy đủ các thông tin SEO và mạng xã hội, cũng như Google Analytics để khi xuất file html sẽ tự động kèm theo.
  • Tài khoản miễn phí sẽ tự động remark trang với một widget nhỏ bên dưới, nhưng khi bạn xuất file html thì sẽ tự động loại bỏ remark này. Bạn có thể yên tâm.
  • Tài khoản miễn phí sẽ bị hạn chế kho mẫu thiết kế sẵn, trong khi tài khoản trả phí sẽ truy cập đầy đủ kho thiết kế mẫu. Dù vậy, vẫn là khá đủ cho bạn lựa chọn.
Bang Gia Cua Ladipage
Bảng giá và so sánh tính năng của tài khoản miễn phí Ladipage

Ở bước này, nếu bạn bắt đầu đam mê và muốn dùng Ladipage trả phí theo tháng để dễ dàng thoải mái hơn thì bạn hãy ngưng bài viết và mua gói trả phí. Tất cả đều là lựa chọn của bạn nếu thấy đó là giải pháp hợp lý.

Cập nhật: Hiện tài khoản miễn phí Ladipage đã không còn tính năng xuất file HTML nữa, thật đáng tiếc. Bạn có thể dùng Brizy Cloud thay thế.

Nếu bạn đã quen với Brizy Page Builder thì Brizy Cloud là một lựa chọn không tệ cho bạn. Dù file xuất ra kèm theo folder asset nhưng cũng không vấn đề gì vì cách làm cũng tương tự Ladipage.

Chú Ý

Tính năng tự đồng bộ server của Brizy Cloud sẽ không dùng được.

Sau khi bạn đã có trong tay một file index.html thì việc kế tiếp sẽ là host file đó để tạo thành một trang web “live”.

Hosting miễn phí cho trang web tĩnh: Github Page

Bạn có thể host trang web tĩnh trên rất nhiều host như Amazon S3, Google Cloud, pCloud, Google Drive,…nhưng có một cách host hoàn hảo hơn đó là Github Page.

Dành cho những bạn chưa biết thì Github là công cụ phải biết của mọi lập trình viên. Github giống như một USB online cao cấp dung lượng 1GB và Github Page là tính năng để biến USB đó “live”.

Microsoft đã mua lại Github với giá 7.5 tỷ USD (năm 2018) và sau đó miễn phí không giới hạn số lượng private repository cho tất cả mọi người biến Github vốn đã quá tốt trở thành siêu phổ biến trên toàn cầu. Github thật sự là một đầu tư nghiêm túc của Microsoft.

Lý do bạn nên dùng Github Page là:

  • Miễn phí.
  • Không giới hạn Public Repository (1 Repo là một website).
  • Tốc độ cao.
  • Miễn phí chứng chỉ SSL.
  • Có thể dùng tên miền riêng (custom domain).

Để host file index.html bạn đã có trên máy tính, bạn cần có tài khoản Github và tạo xong một Public Repository.

Bạn làm theo hướng dẫn bên dưới để tạo nhanh một Public Repository.

Tao Mot Public Repository Moi
Bước 1: Sau khi có tài khoản Github, bạn bắt đầu tạo một Public Repository mới
Tao Public Repository Voi Ten Ngan Gon
Bước 2: Đặt tên cho Repo, chọn Public và bấm nút khởi tạo
Tai Len File Index Da Tao
Bước 3: Tải file index.html ở trên máy tính bạn (đã download ở từ Ladipage)

Sau khi bạn đã upload index.html lên Github, chờ khoản 10 phút bạn truy cập vào usergithubname.github.io trên trình duyệt để thử xem trang web của bạn đã “live” chưa.

Nếu đã thấy trang web của bạn nghĩa là xin chúc mừng bạn cơ bản đã thành công.

Để tạo những trang khác bạn chỉ việc tạo trang trên Ladipage, xuất file và upload lên. Trang chủ cho website bạn sẽ được đặt tên là index.html. Các trang khác bạn sẽ đặt tên như lien-he.htmlpolicy.html.

Chú ý là tên của file cũng chính là trang URL. Ví du: usergithubname.github.com/lien-he.html.

Tạo tên miền riêng cho trang web miễn phí bằng Cloudflare và Github Page

Bản thân Github Page có một số giới hạn bạn cần chú ý đó là:

  • 1 GB lưu trữ
  • 100 GB bandwidth

Như bạn thấy, băng thông chỉ là 100GB. Vì vậy, tiết kiệm băng thông là cần thiết.

Nếu bạn tạo trang bằng Ladipage thì tất cả ảnh bạn tạo và upload trong quá trình tạo trang sẽ được lưu ở Ladipage và ảnh còn được CDN của Ladipage nữa.

Cực kỳ tiết kiệm băng thông, vì vậy tôi mới khuyến khích bạn dùng Ladipage thay vì các dịch vụ khác.

Tuy nhiên, vẫn trên tinh thần tiết kiệm càng nhiều càng tốt. Đề phòng bạn có quá nhiều traffic thì sao.

Tại sao lại cần dùng Cloudflare bỗ trợ cho Github Page?

Là một combo vô cùng hữu dụng bổ sung những thiếu sót của Github Page. Cloudflare giúp bạn 4 việc chính sau:

  1. Quản lý DNS để bạn có thể có tên miền riêng cho Github Page.
  2. Cấp chứng chỉ SSL miễn phí tự động.
  3. Cache.
  4. Tối ưu tốc độ.

Cấu hình tên miền riêng cho trang web

Đây là phần cực kỳ quan trọng.

Bạn vào thẻ setting trong Public Repository >> Chọn thẻ Settings như hình

Vao The Setting Cua Github Page
Bước 1: Vào thẻ Setting của Public Reposity mà bạn đã tạo
Github Pages Setting
Bước 2: Chọn Master Branch.
(Bạn cần đảm bảo là đã upload file index.html thì mới chọn được master branch)
Custom Domain Cua Github Page
Bước 3: Đánh tên miền của bạn vào ô Custom Domain và copy Github User URL của bạn

Trước hết, bạn cần ĐẢM BẢO bạn đã chuyển Name Server tên miền của bạn sang Cloudflare để Cloudflare quản lý DNS cho bạn. (Xem hướng dẫn tham khảo cách chuyển Nameserver của Namesilo sang Cloudflare nếu bạn chưa biết).

Bạn vào Tab DNS của Cloudflare và tạo một CNAME record với @ và trường giá trị là usergithub.github.io (URL mà bạn đã copy ở trên).

Cach Cau Hinh Custom Domain Trong Cloudflare Voi Github Pages
Bước 4: Tạo CNAME record ở Cloudflare và Save

Bạn nhớ bật đám mây màu cam lên.

Chú Ý

Cách tạo CNAME record này áp dụng khi bạn dùng tên miền chính. Nếu bạn dùng tên miền phụ như pages.domain.com thì ở ô Name bạn sẽ điền là pages thay cho @.

Thiết lập Cache Everything trên Cloudflare

Không giống như WordPress website thông thường, bạn cần phải bật Cache Everything cho static site.

Mặc định Cloudflare sẽ không cache html nên bạn cần thiết lập cache html bằng Page Rule của Cloudflare.

Bên cạnh đó, sẵn tiện bạn cũng sẽ thêm 2 Cloudflare rule quan trọng là HTTPS always và Redirect 301 cho tên miền phụ www.

Thiet Lap Cloudflare Page Rule
Tạo Page Rule quan trọng “Cache Everything” và sẵn tiện tạo luôn 2 page rules phụ hữu ích
Chú Ý

Cloudflare chỉ miễn phí 3 rule cho tài khoản miễn phí mà thôi. Như bạn thấy trên hình, Cloudflare bắt bạn mua thêm Page Rule khi đã tiến đến giới hạn 3 Page Rule.

Cài đặt Full SSL Cloudflare

Ở thẻ SSL/TLS của Cloudflare, bạn cần chuyển sang Full. Chờ một chút để Cloudflare tạo chứng chỉ cho site của bạn.

Ssl Cho Github Page
Bật “Full” để trang web bạn có HTTPS

Bạn nhớ là bạn phải đảm bảo đã bật đám mây màu cam cho tên miền riêng record đã tạo ở thẻ DNS bước 1 ở trên.

Xong, bây giờ bạn thử đánh tên miền của bạn vào trình duyệt để kiểm tra xem trang web của bạn đã live chưa nhé.

Tăng cường SEO trang web Github Page của bạn

Về SEO thì bạn sẽ tạo thêm một vài file nữa bao gồm:

  1. Trang 404 (404.html)
  2. robot.txt
  3. sitemap.xml

Bạn tạo một trang 404 tùy chỉnh tương tự với cách tạo trang như trên và upload lên Github Page.

Với robot.txt thì bạn tạo một file robot tiêu chuẩn thông thường bao gồm sitemap như sau:

User-agent: *
Sitemap: http://www.example.com/sitemap.xml

Để tạo sitemap bạn có thể dùng công cụ https://www.xml-sitemaps.com/ miễn phí. Bạn nên tạo sitemap sau khi bạn đã cấu hình xong tên miền riêng. Khi đó bạn sẽ vào và nhập tên miền riêng của bạn để tạo sitemap và upload lên Github.

Xml Sitemap
Nhập tên miền bạn của bạn vào và công cụ sẽ tự động tạo sitemap cho bạn (download và up lên Github)

Mỗi lần bạn upload trang mới, bạn phải tạo lại sitemap và upload sitemap mới lên Github. Thật ra, bạn có thể tự động tạo sitemap bằng Jellky nhưng bạn sẽ không có quá nhiều trang nên tôi nghĩ cách tạo sitemap thủ công này sẽ dễ với bạn hơn.

Bạn cần thêm site vào trong Google Search Console như thông thường để Google chỉ mục trang web bạn.

Lời kết…

Tôi đã làm một trang mẫu cho bạn tham khảo: https://github.cuongthach.com với việc chèn Facebook Live Chat và Opt-in Popup.

Cách tạo này ứng dụng rất tốt khi bạn muốn tạo một website công ty chủ yếu để tăng độ tin cậy và cung cấp thông tin liên hệ với đối tác nhờ hiện diện trên internet. Áp dụng rất tốt cho mô hình B2B.

Một trường hợp khác hữu dụng đó là tạo nhanh một trang CV online hoàn hảo (Porfolio Page), giúp bạn có một điểm cộng lớn trong mắt nhà tuyển dụng hay đối tác.

Bạn cũng có thể ứng dụng cách này để tạo trang bán hàng online đơn giản (nếu bạn chỉ bán một vài sản phẩm) sẽ giúp bạn tiết kiệm chi phí tạo website và vẫn có thể chạy quảng cáo.

Bạn hoàn toàn cũng có thể ứng dụng vào các mục đích khác như tạo trang tuyển dụng, sự kiện, chiến dịch khuyến mãi,…tùy vào mong muốn của bạn.

Mặc dù bạn hoàn toàn có thể viết blog được bằng cách này nhưng mình nghĩ là không nên vì WordPress đã quá tốt cho blog với SEO tốt hơn. Khi bạn viết blog bằng Github thì sẽ đòi hỏi nhiều kỹ năng của lập trình viên, cái mà bạn có thể sẽ mất rất nhiều thời gian học dùng.

Trong khi WordPress lại quá thuận tiện cho blog, bạn nên dùng WordPress để viết blog thay vì blog “tĩnh”.

Nếu bạn gặp khó khăn trong quá trình thực hiện, hãy để lại bình luận bên dưới, tôi luôn sẵn lòng giúp bạn!