Blog Học Code Online đã được sinh ra như thế nào (phần mở đầu)
HọcCodeOnline là trang blog cá nhân chia sẻ về lĩnh vực IT với mục đích chính là chia sẻ kinh nghiệm trong những tháng ngày lăn lội trong ngành của mình. Đây là trang blog cá nhân nên sẽ có nhiều yếu tố cá nhân trong đó, nếu có gì sơ suất, mong các bạn góp ý và lượng thứ.
Vậy Blog này đã được sinh ra như thế nào?
Blog này được làm với Gatsby. Gatsby là một "static site generator", về cơ bản nó cũng không khác gì create-react-app, bạn sẽ viết code bằng JS rồi khi build nó sẽ bundle thành các file HTML, CSS và JS mà bạn có thể vứt lên bất kỳ web host tĩnh nào (ví dụ như ở đây là mình host bằng Amazon S3).
Cách viết một blog bằng Gatsby thực chất rất đơn giản. Bạn có thể chọn 1 Starter hay 1 Theme bất kì nào đó (ví dụ như mình đã chọn hello-friend-starter), rùi custom lại và ... tèn ten, nó đã thành blog của bạn ;).
Ưu điểm của Gatsby là ... nhanh và rất nhanh. Do tất cả các style, html và javascript sẽ được load trong lần tải đầu tiên, khi người dùng ấn vào một bài viết trong trang web của bạn, nội dung mới sẽ được tải về dưới dạng JSON và hiển thị lên, không cần load lại toàn bộ trang (Gatsby sử dụng GraphQL cho việc này). Ngoài ra các bạn có thể tích hợp thêm những Plugin khác ví dụ như cho phép tối ưu việc tải ảnh và preload sẽ cho trang web của bạn một tốc độ cực cao. Còn 1 ưu điểm của Gatsby nữa là bảo mật. Vì chỉ là html tĩnh và được host tĩnh... nên chả có gì để hack cả :D.
Tuy nhiên nhắc đến ưu chắc hản sẽ có nhược. Nhược điểm của Gatsby là không có backend, tức là việc triển khai hệ thống tương tác, bình luận hay tìm kiếm sẽ phải qua bên thứ 3 hoặc... tự code. Và Gatsby chắc hẳn sẽ hợp vs những bạn đã biết code hơn là những bạn chỉ đơn thuần sử dụng blog cho việc blogging, vì muốn làm được thành 1 hệ thống CMS (Content Management System) hoàn chỉnh như wordpress sẽ phải bỏ ra đôi ít công sức :D.
Hiện tại có 1 framework có thể tích hợp vs Gatsby thành 1 CMS hoàn chỉnh đó là Strapi (bạn có thể tham khảo tại đây). Việc sử dụng Strapi với Gatsby thế nào, mình sẽ hướng dẫn cho các bạn sau nhé.
Vậy Blog này đã được host như thế nào?
Như mình đã nói ở trên, blog này được host tĩnh trên AWS S3. Tại sao mình chọn Amazon S3 mà không chọn những host provider khác? Vì... mình thích thì mình xài thôi :D.
AWS là 1 cloud provider đang thống trị thị trường hiện nay. Tiếp đến là Azure của Microsoft và đến Google Cloud Plattform của Google. AWS có free tier trong năm đầu cho tất cả mọi người và những gì trong free tier đó đủ để các bạn nghịch tan tành cái AWS luôn :D.
Amazon S3 là dịch vụ lưu trữ trên cloud của AWS. Tức là các bạn có thể lưu gì trên đó cũng được vậy, từ file text, ảnh, mp3 đến video đều được. Trong free tier các bạn có thể lưu trữ 5 GB miễn phí trên amazon S3. Ngoài ra AWS còn thu tiền các bạn qua băng thông và các bạn có 20 000 GET free và 2000 PUT free đối với Amazon S3. Ngoài việc lưu trữ file, Amazon S3 còn có thể host được web tĩnh. Tức là bạn có thể viết 1 file index.html với dòng chữ Hello World rồi up lên Amazon S3, thì file index.html của bạn có thể được truy cập online qua URL mà Amazon S3 cung cấp.
Việc build site Gatsby và setup hosting trên Amazon S3 cũng như lấy domain và tạo SSL cho domain đó, mình sẽ hướng dẫn các bạn ở bài viết tiếp nha.
Thân!