Tự làm website (phần 1): Website là gì ?

Xin chào, mừng các bạn đến với chuỗi bài viết “tự làm website” của mình. Chuỗi bài viết này sẽ là các bài viết chia sẻ về cách làm website và kinh nghiệm của cá nhân mình, đồng thời mình cũng chia sẻ kinh nghiệm của nhiều cao thủ khác. Hi vọng sau chuỗi bài viết này, các bạn có thể tự làm cho mình một cái website xịn sò nhé.

Mình không phải là dân IT nên ban đầu mình không biết bất cứ một dòng code nào. Thậm chí đến tận bây giờ mình cũng chỉ biết được vài dòng code đơn giản thôi. Vậy làm cách nào để mình có thể tự tạo ra một website mà không hề biết một ít code nào hết ? Mình sẽ viết lại chi tiết toàn bộ quá trình mình tự học và tự tập làm một cái website, từ đơn sơ cho đến xịn sò nhé.

Đầu tiên, muốn làm website thì bạn phải biết, nó là cái gì, và nó bao gồm những gì ?

1. Khái niệm về website

1.1. Website là gì ?

Khái niệm về website mà theo đúng chuyên ngành thì có lẽ hơi phức tạp, ở đây mình chỉ khái quát một cách đơn giản theo cách hiểu của mình thôi nha. Nếu bạn muốn tìm hiểu sâu hơn về website thì search google nha.

Nếu bạn đang đọc những dòng này, nghĩa là bạn đang xem website của mình. Trong website của mình thì có nhiều trang con (ví dụ trang về kinh doanh, trang về âm nhạc, trang về nông nghiệp, …). Và những trang con này hiển thị những nội dung như văn bản, hình ảnh, video, ….Vậy phải có một nơi nào đó để chứa những nội dung đấy chứ, nơi chứa những nội dung đó được gọi là máy chủ.

Tóm lại, có thể hiểu đơn giản website là một tập hợp các trang thông tin có chứa nội dung (dạng văn bản, chữ, số, hình ảnh, âm thanh, video, …) được lưu trữ trên máy chủ và có thể truy cập từ xa thông qua mạng internet.

Nếu xem website là một cuốn sách thì landing page hay webpage là một trang con website đó, nó có thể là một trang riêng biệt hoặc là một trang con thuộc “cuốn sách” website.

1.2. Các thành phần của website

Để dễ hình dung các thành phần cấu tạo nên website, mình sẽ giới thiệu mô hình ngôi nhà cho bạn dễ hình dung. Nó như sau:

Nhìn vào bảng so sánh trên thì bạn cũng hình dung ra được các thành phần cấu tạo nên website rồi hen, cụ thể hơn thì mình giải thích những phần chính như sau (mình sẽ không giải thích về database vì nó rất khó, bản thân mình thậm chí còn chưa hiểu rõ, còn những cái đơn giản như internet và traffic thì mình không giải thích thêm hen, mình sẽ chỉ nói rõ về hosting, source code, themes, SSL và domain nhé):

1.2.1. Mảnh đất để xây nhà – Máy chủ (hosting / vps / server)

Miếng đất chính là nơi để bạn xây ngôi nhà của bạn, có thể nói miếng đất nó chứa toàn bộ ngôi nhà trên đó. Tương tự, nếu bạn muốn xây dựng một website thì bạn phải có một nơi để mà chứa toàn bộ website của bạn, thì miếng đất trong trường hợp này chính là máy chủ.

Nếu tài chính bạn tốt, bạn có thể mua hẳn một miếng đất và toàn quyền sở hữu và sử dụng nó. Nhưng để có thể sở hữu một miếng đất và sử dụng nó, bạn phải có kiến thức về pháp lý, xử lý tranh chấp, làm hồ sơ, đóng thuế đất, … còn nếu không thì bạn phải thuê người có kiến thức (như luật sư chẳng hạn) để xử lý giúp bạn.

Tương tự, nếu tài chính bạn tốt, bạn có thể sắm hẳn cho mình một giàn máy chủ của riêng mình, nhưng để có thể cài đặt và triển khai máy chủ một cách ổn định thì bạn cũng cần phải có một chút kiến thức về IT, nếu không thì bạn có thể thuê người cài đặt và triển khai giúp bạn.

Nếu tài chính của bạn không tốt hoặc bạn không có thời gian để cài đặt hoặc triển khai, bạn có thể đi thuê máy chủ (tương tự như việc thuê đất, thuê mặt bằng) để sử dụng, và bên cung cấp dịch vụ máy chủ sẽ lo hết từ A đến Z việc cài đặt, triển khai, sửa chữa, bảo trì, … tất tần tật. Bạn chỉ việc nạp tiền vào và sử dụng thôi. Giá thuê thường rất rẻ, giao động từ vài chục nghìn đến vài triệu đồng / tháng tùy nhu cầu của bạn.

Hình 1: Báo giá của gói hosting (máy chủ) cơ bản ở Azdigi năm 2021 (chưa bao gồm khuyến mãi), một trong những đơn vị cung cấp dịch vụ máy chủ tốt nhất Việt Nam.

1.2.2. Vật liệu xây dựng – Mã nguồn (source code)

Để mà định nghĩa chính xác và đầy đủ về mã nguồn thì rất là phức tạp. Hiểu sơ bộ thì mã nguồn chính là nguyên liệu để tạo ra website. Mã nguồn có hai loại mã nguồn là:

• Mã nguồn đóng: Được viết bởi các lập trình viên làm việc cho các tổ chức, dùng cho nội bộ và có tính bảo mật cao, chỉ những người được cấp quyền thì mới có thể thao tác được với mã nguồn. Mã nguồn đóng có thể được thương mại hóa, bạn phải trả phí thì mới có thể sử dụng được.
• Mã nguồn mở: Được phát triển bởi cộng đồng,có thể dùng công khai, cho phép cộng đồng có thể tham gia vào chỉnh sửa, đóng góp hoàn toàn miễn phí. Mã nguồn mở giúp cho các sinh viên, học sinh và những người muốn tìm hiểu về lập trình có một bộ mã nguồn hoàn chỉnh để tham khảo cũng như phục vụ cho mục đích học tập, nghiên cứu. Và tất nhiên, tính bảo mật của nó không thể cao bằng mã nguồn đóng.

Và ở chuỗi bài “tự làm website” này, mình sẽ hướng dẫn các bạn làm website dựa trên mã nguồn mở WordPress. Mình sẽ không đi quá sâu vào khái niệm WordPress, mình sẽ chỉ hướng dẫn các bạn sử dụng thôi hen.

WordPress là một trong những mã nguồn mở phổ biến và lớn nhất thế giới. Ban đầu wordpress được phát triển bởi một các lập trình viên trên thế giới, sau đó họ hình thành nên một nhóm nhỏ để cùng phát triển mã nguồn này. Và cộng đồng ngày càng lớn thì những đóng góp của họ càng to lớn và giúp cho mã nguồn WordPress càng lúc càng hoàn thiện.

WordPress được viết bằng ngôn ngữ lập trình PHP và sử dụng hệ quản trị cơ sở dữ liệu MySQL.

WordPress ra đời lần đầu tiên vào 27/05/2003. Bạn nào thuộc 8x, 9x đời đầu thì chắc hẳn sẽ biết về Yahoo 360 (Yahoo Blog), rất nhiều anh chị đã tham gia viết Blog như một thú vui giải trí, thậm chí là dùng để làm việc (vì thời đấy làm gì có Facebook, Instagram, Zalo đâu).

Lúc đấy thì Yahoo 360 nổi trội hơn WordPress rất nhiều, nhưng khi Yahoo 360 đi xuống thì những anh chị có thói quen viết Blog đã dần chuyển qua WordPress. Khi đó WordPress đã có những người dùng Việt Nam đầu tiên, dần dần lượng người dùng càng đông và trở thành cộng đồng lớn như hiện nay.

Có rất nhiều mã nguồn mở có công năng tương tự như WordPress, thậm chí là dễ sử dụng hơn WordPress nhưng tại sao mình vẫn sử dụng WordPress, vì một vài lí do sau đây:

• Nó thật sự là cực kỳ dễ sử dụng cho người dùng cuối (end user) vì nó được tạo ra cho người không biết code có thể dễ dàng sử dụng.
• Cộng đồng hỗ trợ rất đông (đông hơn rất nhiều lần so với các nền tảng khác) nên bạn có thể dễ dàng giao lưu, học hỏi, trao đổi kiến thức.
• Rất nhiều giao diện WordPress chuyên nghiệp và miễn phí.
• Các gói chức năng mở rộng (plugin) rất đa dạng (có miễn phí và trả phí), có cả những plugin do lập trình viên người Việt Nam tạo ra, phát triển và thương mại trên thế giới.
• Thân thiện với lập trình viên.
• Đa ngôn ngữ.
• Có thể xây dựng và phát triển được nhiều loại hình website đặc thù như blog cá nhân, website bán hàng, sàn giao dịch BĐS, …

Tuy nhiên, không phải cái gì cũng hoàn hảo, WordPress cũng có những mặt hạn chế của nó, chẳng hạn như:

• WordPress không phải là siêu nhân, nó không thể làm được tất cả mọi thứ. WordPress chỉ nên dùng cho những website có lượng traffic từ nhỏ đến trung bình, chứ những website có traffic siêu khủng như sàn thương mại điện tử thì bạn phải cấu hình rất nhiều thứ, cho nên nếu chỉ dựa vào kiến thức cơ bản mà không có kiến thức chuyên sâu thì không thể dùng WordPress để làm những website có lượng traffic khủng được đâu.
• Nếu bạn muốn làm một website đơn giản hoặc theo các mẫu có sẵn thì bạn không cần có kiến thức về lập trình, bạn chỉ cần bấm nút và kéo thả là xong. Nếu bạn muốn có một website đẹp theo ý của bạn thì ít nhất bạn cũng phải có một số kiến thức về front-end (thiết kế giao diện). Còn nếu bạn muốn có một website vừa đẹp mà lại vừa có những chức năng theo ý của bạn thì bạn phải có thêm kiến thức của phần back-end nữa.
• Tất nhiên là độ bảo mật của WordPress không thể nào cao cấp bằng mã nguồn đóng (thậm chí mã nguồn đóng còn bị hack nữa mà). Tuy nhiên bạn vẫn có thể bảo mật cho website của bạn bằng những cách đơn giản như không cài các plugin bậy bạ không rõ nguồn gốc, sử dụng những dịch vụ cung cấp máy chủ uy tín, không cài những giao diện có chứa mã độc, cài những plugin bảo vệ website của bạn, …

1.2.3. Nội thất – Giao diện (themes)

Sau khi bạn cài đặt WordPress vào máy chủ thì WordPress như là một ngôi nhà thô vậy, nó chưa có gì hết. Việc cần làm kế tiếp là bạn phải trang trí cho nó. Nếu bạn có kiến thức về front-end thì bạn có thể tự thiết kế giao diện theo ý của bạn, còn nếu không thì bạn chỉ cần cài đặt những giao diện có sẵn (gói nội thất có sẵn) và sử dụng thôi.

Với những giao diện có sẵn, bạn có thể kéo thả và sắp xếp lại theo ý muốn của mình (tương tự như việc bạn dùng gói nội thất có sẵn và sau đó tự sắp xếp lại vị trí bàn, ghế, kệ, tủ, … sang các vị trí khác theo ý muốn của mình ý).

Hình 2: Một kho giao diện được thiết kế sẵn trên themeforest.net

Về giao diện có sẵn thì sẽ có ba dạng:

• Giao diện do các nhà thiết kế hàng đầu thế giới làm (như Flatsome, Newspapaper, … là những giao diện nổi tiếng nhất nhì trên thế giới), bạn chỉ việc mua của họ và sử dụng, trung bình thì những giao diện này sẽ có giá khoảng 59$ / năm. Gói này sẽ bao gồm key kích hoạt, hướng dẫn sử dụng và gói hỗ trợ tận răng nếu có sự cố. Với dạng giao diện này thì sẽ có đầy đủ chức năng bên trong (chức năng thanh toán, thêm sản phẩm, liên hệ hotline, …) và lớp áo thẩm mỹ (màu sắc, bố cục, …), bạn chỉ việc sử dụng thôi.
• Giao diện do các lập trình viên thiết kế lại dựa trên các giao điện do các nhà thiết kế thế giới làm. Sẽ có một số theme do các nhà thiết kế thế giới làm lại không phù hợp với văn hóa và hành vi ở Việt Nam, nên các lập trình viên sẽ làm lại sao cho phù hợp dựa trên cái theme gốc đó. Kiểu như các lập trình viên sẽ mua theme Flatsome với giá 59$, sau đó họ sẽ thiết kế lại và bán lại cho bạn với giá giao động từ 100$ cho đến 300$ tùy loại, hoặc là bạn tự mua theme Flatsome rồi giao cái theme đấy cho họ làm. Ưu điểm của việc này là với mức giá trung bình (không quá cao) bạn vẫn sẽ giữ lại được các chức năng chính của theme gốc (hoặc có thể thay đổi tùy theo ý bạn), chỉ khác lớp vỏ (lớp áo) bên ngoài do các lập trình viên thiết kế lại thôi.
• Giao diện do các lập trình viên thiết kế lại 100% (hay còn gọi là dạng code tay). Dạng này thì khủng rồi, giá thành cực đắt tùy theo nhu cầu của bạn. Ở dạng này thì bạn chỉ cần nói cái bạn muốn, lập trình viên sẽ viết lại và thiết kế toàn bộ theo ý của bạn, từ chức năng bên trong đến lớp áo bên ngoài.

Hình 3: Mẫu theme quốc dân Flatsome đang được bán trên themeforest.net

Thường thì giao diện mẫu sẽ bao gồm data (hình ảnh, văn bản, video, …) demo để bạn tham khảo, sau đó bạn có thể xóa bỏ và thay thế những data của bạn.

Ở trong chuỗi bài viết này, mình sẽ hướng dẫn các bạn sử dụng mẫu theme quốc dân Flatsome. Tại sao gọi nó là theme quốc dân ? Vì nó cực kì dễ sử dụng, nó được sinh ra là để làm website bán hàng và luôn nằm trong top những theme bán chạy nhất thế giới. Ngoài ra nó còn rất dễ tùy biến, thậm chí là bạn có thể biến nó thành một dạng blog hoặc một website tạp chí.

Hình 4: Mẫu theme demo của theme bán hàng Flatsome, theme bán chạy nhất mọi thời đại Tham khảo tại đây.

Hình 5: Mẫu theme đã được các lập trình viên chỉnh sửa dựa trên theme gốc Flatsome theo hướng website bán hàng. Tham khảo tại đây.

Hình 6: Mẫu theme đã được các lập trình viên chỉnh sửa dựa trên theme gốc Flatsome theo hướng website tin tức. Tham khảo tại đây.

Lưu ý: việc mua themes bản quyền, chính chủ đàng hoàng thì sẽ mất 59$ nhưng dùng lâu dài, còn nếu dùng những bản theme share ở trên mạng thì miễn phí cũng có, giá thấp cũng có nhưng rủi ro cao hơn (mã độc, theme lậu, …).

Thường thì dạng theme share này là người bán sẽ mua theme gốc 59$ rồi bán lại cho nhiều người cùng dùng với giá rẻ hơn rất nhiều (hoặc share free luôn), nhưng tất nhiên là người bán sẽ giữ key gốc, còn người mua thì chỉ xài bản không có key kích hoạt thôi. Những bản không được kích hoạt thì vẫn update và sử dụng bình thường nhưng phải update bằng tay (còn có key gốc thì sẽ tự động update).

Ở thời điểm hiện tại thì việc share theme này vẫn chưa có gì đáng nói nhưng biết đâu được, trong một tương lai gần nào đó, phía nhà cung cấp có thể tạo ra cơ chế một người một theme / một key, các theme không có key sẽ bị xóa sổ hết để đảm bảo quyền lợi của nhà cung cấp và người mua, lúc đấy thì tình hình sẽ rất phiền phức.

Cho nên nếu tập làm, để nghiên cứu hoặc để trải nghiệm thì không cần phải mua theme gốc cho tốn kém, còn nếu bạn có ý định dùng website lâu dài thì mình khuyên là nên mua theme gốc với giá 59$ từ nhà cung cấp để an toàn về sau nhé.

1.2.4. Địa chỉ – Tên miền (domains)

Nếu nhà bạn không có địa chỉ, khách muốn ghé nhà bạn thì bạn phải hướng dẫn khách rất khó khăn (như là đi thẳng, tới gốc cây thì quẹo phải, tới tiệm tạp hóa thì quẹo trái, sau đó đi thêm 10 mét nữa thì gặp ngã tư rồi quẹo trái, …). Còn khi bạn có địa chỉ thì chỉ cần đọc địa chỉ nhà, khách sẽ tự tìm đến bạn.

Tương tự như vậy, nếu website của bạn không có địa chỉ – tên miền (domains) thì sẽ rất khó cho khách của bạn nếu muốn vào website. Nếu không có domain thì địa chỉ website của bạn sẽ hiển thị như là một dãy số rất dài và rất khó nhớ, còn nếu như có domain (chẳng hạn như domain của mình là sharkism.com) thì khách bạn chỉ cần nhập domain vào là có thể truy cập vào website của bạn.

Thường thì domain sẽ do các nhà cung cấp dịch vụ tên miền như Mắt Bão, Azdigi cung cấp và chi phí sẽ dao động từ vài trăm ngàn đồng cho đến vài triệu đồng / năm tùy vào loại domain mà bạn sử dụng (như domain phổ biến tại Việt Nam với đuôi .vn mua tại Mắt Bão sẽ có giá là 750.000^đ / năm đầu và phí gia hạn là 450.000^đ cho các năm sau – chưa bao gồm VAT). Ngoài ra họ cũng cung cấp nhiều dịch vụ khác liên quan đến tên miền như là bảo mật danh tính, bảo mật DNS, …

1.2.5. Khóa nhà – Chứng chỉ bảo mật (Secure Sockets Layer – SSL)

SSL là viết tắt của từ Secure Sockets Layer. SSL là tiêu chuẩn của công nghệ bảo mật, truyền thông mã hoá giữa máy chủ và trình duyệt (Chrome, Safari, FireFox, …). Tiêu chuẩn này hoạt động và đảm bảo rằng các dữ liệu truyền tải giữa máy chủ và trình duyệt của người dùng đều riêng tư và toàn vẹn.

SSL hiện tại cũng là tiêu chuẩn bảo mật cho hàng triệu website trên toàn thế giới, nó bảo vệ dữ liệu truyền đi trên môi trường internet được an toàn. SSL đảm bảo rằng tất cả các dữ liệu được truyền giữa các máy chủ web và các trình duyệt được mang tính riêng tư, tách rời.

Tóm lại, trình duyệt (Chrome, Safari, …) như là chuyến xe, bạn muốn đến nhà mình (website của mình) chơi thì phải nhờ trình duyệt đưa tới, và nếu nhà mình mà không có cái khóa nhà này thì trình duyệt sẽ không cho bạn vào nhà của mình đâu (một số trình duyệt dễ dãi sẽ cho bạn vào nhưng nó sẽ cảnh báo là nhà của mình nguy hiểm lắm đấy, bạn nên cân nhắc trước khi vào).

Hình 7: Trình duyệt báo lỗi “kết nối riêng tư” khi bạn truy cập vào một trang web thiếu SSL

Cũng tương tự như hosting và domain, các đơn vị cung cấp dịch vụ tên miền thường sẽ cung cấp thêm cả dịch vụ SSL, giá giao động từ 160.000^đ đến vài triệu đồng / năm tùy loại SSL bạn muốn (có loại SSL cá nhân và SSL doanh nghiệp nữa).

1.2.6. Kết luận

Để làm được một website hoàn chỉnh (ở mức traffic từ nhỏ đến trung bình) thì chi phí dự kiến và công việc cụ thể sẽ như sau:

• Hosting: mình mua ở AZDigi, gói rẻ nhất AZ Pro 1, giá là 29.000^đ / tháng, một năm là 348.000^đ, VAT 10% nữa là khoảng 383.000^đ / năm. Bạn có thể tham khảo gói hosting đó tại đây.
• Source Code: cài WordPress miễn phí, mình sẽ hướng dẫn các bạn cài (tự cài dễ lắm, bấm nút cái bụp là xong), còn nếu các bạn lười thì có thể gởi sticket yêu cầu bên dịch vụ cung cấp hosting cài giúp cho bạn, thường thì sẽ mất khoảng từ 5 đến 10 phút.
• Themes: mua theme Flatsome gốc giá bình thường sẽ là 59$ (khoảng 1.450.000^đ – đã bao gồm VAT và phí thanh toán quốc tế) dùng vĩnh viễn, thỉnh thoảng có khuyến mãi thì giá sẽ thấp hơn. Bạn có thể mua theme Flatsome gốc tại đây.
• Domain: Giá domain ở các nhà cung cấp không chênh lệch quá nhiều, mình mua ở Mắt Bão domain đuôi .vn thì là 750.000^đ / năm đầu tiên, VAT 10% nữa là 825.000^đ / năm và phí gia hạn những năm sau là 450.000^đ / năm (VAT 10% nữa là 495.000^đ / năm), hiện tại thì mình chỉ thanh toán 825.000^đ cho năm đầu tiên thôi (domain đuôi .com thì rẻ hơn, khoảng 239.000^đ / năm đầu tiên và phí gia hạn là 319.000^đ / năm – chưa VAT). Bạn có thể mua domain của AZDigi tại đây hoặc của Mắt Bão tại đây. Nếu hosting và domain mua ở cùng một đơn vị cung cấp thì bạn có thể gởi sticket yêu cầu họ trỏ domain về hosting cho bạn, còn nếu mua khác đơn vị thì bạn vẫn có thể gởi sticket yêu cầu họ nhưng phải cung cấp cho họ tài khoản hosting hoặc domain bên phía đối phương. Tuy nhiên, mình vẫn sẽ hướng dẫn bạn cách trỏ domain về hosting luôn.
• SSL: Giá SSL ở AZDigi gói rẻ nhất (đủ dùng) hiện tại đang là 159.000^đ / năm, VAT 10% nữa là 175.000^đ / năm. Bạn có thể tham khảo gói SSL tại đây. Cách cài SSL cũng tương đối lằng nhằng nên để đơn giản hơn, sau khi mua xong thì cứ gởi sticket cho bên cung cấp dịch vụ, họ sẽ cài cho bạn. Nếu bạn mua SSL ở đơn vị khác với đơn vị mà bạn mua hosting thì bạn vẫn có thể gởi sticket yêu cầu họ nhưng phải cung cấp cho họ tài khoản hosting bên phía đối phương. Tuy nhiên, mình vẫn sẽ hướng dẫn bạn cách cài SSL luôn.

Tóm lại, để tạo dựng một website cơ bản thì bạn sẽ tốn khoản 383.000 + 1.450.000 + 825.000 + 175.000 = 2.833.000^đ / năm (chưa tính công làm).

Tuy nhiên, để phục vụ cho việc học tập và thực hành thì mình sẽ dùng những tài nguyên chi phí thấp hơn, cụ thể:

• Hosting: vẫn mua gói AZ Pro 1 nhưng chỉ mua tối thiểu là 3 tháng thôi, vị chi là 96.000đ  / 3 tháng (đã bao gồm VAT).
• Source Code: miễn phí.
• Theme: dùng theme share, miễn phí.
• Domain: mua domain ít người dùng, thường sẽ là các domain có đuôi lạ (như là .xyz, .co, …), giá năm đầu sẽ là 65.000đ / năm (đã bao gồm VAT).
• SSL: không cần mua, mình sẽ hướng dẫn cách tự cài SSL luôn.

Như vậy, để tạo dựng một website để phục vụ cho mục đích học tập thực hành thì bạn chỉ tốn khoảng: 96.000 + 65.000 = 161.000^đ / năm

Quá rẻ luôn phải không nào, còn chần chừ gì nữa mà chưa triển khai luôn nè.

– Còn tiếp –