Cách tạo blog cá nhân bằng nền tảng Gatsby và triển khai trên Github Pages

ducky · September 18, 2021, 3:57am

Trước giờ mình luôn muốn tạo một blog để sắp xếp lại và chia sẻ những điều mình học hỏi được
Có rất nhiều những nền tảng có thể giúp đăng tải những bài viết của mình dễ dàng hơn như Medium, Ghost…, Nhưng vì là một kỹ sư phần mềm nên mình muốn tự mình tạo và vận hành một blog cá nhân. Với suy nghĩ đó, gần đây mình có thời gian rỗi nên đã tạo blog của mình. Sau đây mình sẽ note lại từng bước cách mà mình đã tạo ra blog của mình.

Có một vài frameworks mà các bạn có thể chọn để làm blog cá nhân như WordPress, Wix, Gatsby, Jekyll…

Ở đây mình đã chọn Gatsby làm framework vì mình thấy nó đẹp và tương đối đơn giản, dễ dàng tuỳ chỉnh hoặc thêm vào 1 số plugin cần thiết. Gatsby là một nền tảng để tạo web tĩnh với hiệu suất cao được build từ ReactJS.

Mọi người có thể đọc thêm về cách tạo blog cá nhân bằng Gatsby tại đây

superthin · September 18, 2021, 3:58am

Tuyệt vời, web tĩnh chạy nhanh như tên bắn luôn, thích hợp với dân mê viết code. Gõ luôn bài viết trên trình soạn thảo văn bản lập trình rồi dùng git đẩy lên luôn là đơn giản, đầy màu sắc.

Điều hay ho khác đó là với mấy web tĩnh kiểu này, hacker cũng chẳng buồn tò mò chứ đừng nói đến việc thử thực hiện khai thác lỗ hổng.

ducky · September 18, 2021, 6:30am

Cảm ơn bạn. Mỗi bài đăng mình tạo một branch, bao giờ xong thì merge vào nhánh master lúc đó dùng Github Action để CI, CD. Tự mình vận hành 1 website và từ đó cũng hiểu được khá khá những kiến thức cơ bản bên web

Be0 · September 18, 2021, 8:11am

Mình cũng có ý định viết blog chỉ bằng reactJS thôi. Nội dung bài viết được fix cứng thẳng trong code hoặc content để trong file JSON nhưng dần dần thì source code sẽ to ra, file JSON càng dài vậy thì web có bị nặng và load chậm hơn không? Vì ReactJs là client side render, nếu user chỉ đọc đúng 1 bài viết mà phải download toàn bộ source code thì lag lắm. Nếu NextJS khắc phục được thì mình sẽ bắt tay vào làm luôn! Mong được tư vấn ạ

superthin · September 18, 2021, 8:33am

Mình thì chưa viết dòng code nào bằng ReactJS hoặc NextJS nhưng có vài phân tích để bạn tránh nhầm lẫn việc nặng/ nhẹ ở đây. Phân tích dựa trên trên góc độ JavaScript thuần và dùng kỹ thuật Ajax cũ (XHR) hoặc Ajax mới (Fetch API) thì:

JavaScript Framework là cố định, site nhiều bài hay ít bài viết thì nó cũng không phình to ra, còn nếu nó phình to ra là chuyện đã làm sao đó với nó, không phải bản chất ban đầu của framework. Không thể làm gì khác hơn để framework trở nên nhỏ hơn nhanh hơn được nếu không phải là cao thủ thượng thừa tự viết được framework. Đành chấp nhận thôi, đã chọn framework thì đây là điều chấp nhận được với người làm web và user truy cập. Vì nếu framework quá chậm, chả ai dùng.
File JSON là ta bố trí nhiều file để tránh dồn chung một cục, tải về nặng. Ví dụ như mỗi trang có 10 bài, mỗi bài ta hiện phần teaser thì khi người dùng click trang nào chỉ tải về file JSON tương ứng mà thôi. Với bài viết cũng tương tự, không lý do gì tải hết tất cả về làm gì. Nếu vậy thì chả phải dùng JavaScript làm gì cho rách việc, chứa tất cả các bài viết trong 1 file tĩnh HTML cho mau. (Mình từng thử làm tất cả bài viết vào file HTML, file dung lượng đó 12MB, chứa khoảng 600 bài viết , nạp cũng nhanh, lần đầu mất 15 giây, sau đó thì vì nó là một file dài, click vào anchor hash a href chạy lên chạy xuống nên nhanh chớp mắt. Cách làm này khá buồn cười, chủ yếu để trêu mấy bạn đồng nghiệp).

Bạn đã dùng JavaScript mà không tận dụng được việc “dynamic rendering” thì xem ra mang JavaScript vào chỉ để làm một việc vô bổ, có phải không nào?

Theo mình đoán ReactJS hoặc NextJS không khác gì nhau trong việc tải file JSON về. Điều ở đây là tư duy lập trình chứ không phải là công cụ.

Ntech_Developers · September 18, 2021, 8:18am

Mình thấy tạo để backlink hoặc viết share đơn cũng ok, nhưng để quản lý bài viết hay đặt Ads thì nên chọn nền tảng khác.

Cũng mới thử vọc xong

ducky · September 18, 2021, 10:53am

Đúng rồi bạn, kiểu blog cá nhân, tech blog thôi chứ cần tuỳ biến nhiều thì không được. Bạn thử nhanh thế, host trên gatsby cloud luôn à?

Ntech_Developers · September 18, 2021, 11:54am

Uhm cloud cho thêm cái sub domain như là wordpress, thấy ci cd ok do có github, nhưng mà nó hạn chế dung lượng và băng thông ah, chắc được mấy chục ccu là hết

Nguyen_Trung_Tin1 · September 18, 2021, 3:38pm

NextJS có staticSideRendering đó b

Be0 · September 19, 2021, 1:25am

Static render nghĩa là lúc dev code xong thì nextJS sẽ build thành các file HTML tại máy localhost của dev và chỉ diễn ra 1 lần, rồi dev mới deploy lên hosting và lúc này web sẽ toàn những file HTML riêng lẻ như website giai đoạn trước 2010 phải không bạn?

With static rendering , you’ll need to generate a single HTML file for every page that the user can access ahead of time. You’ll then serve these pages from a cloud service like S3, or from a server running something like nginx.

Cả gatsby cũng tương tự?

NguyenHo · September 20, 2021, 1:39am

Mình nghĩ nếu dùng CDN như cloudflare thì mỗi lần deploy lại code thì CDN có thể vẫn còn lưu code cũ, một phần CSS, JS không tới được thiết bị user.

superthin · September 20, 2021, 8:31am

Nếu muốn cập nhật ngay thì vào dịch vụ CDN để flush cache đi chứ. Nếu là bài mới đăng thêm, CDN sẽ nhận ra và sớm cập nhật sau đó không lâu.

Một khi CDN được cấu hình hợp lý, nó sẽ đủ nhanh nhạy để cập nhật những thay đổi từ website. Bất cứ ai có dùng đến cache thì đều phải hiểu bản chất của cái này, nếu không hiểu thì đừng dùng.

Be0 · October 21, 2021, 2:29pm

Bác ơi cho em hỏi, web của bác là static web không có backend, database. Vậy mỗi lần thêm bài viết mới chỉ cần connect FTP chọc thẳng vào hosting thêm đúng 1 file bài viết đó và thêm link vào menu (các file bài viết cũ không ảnh hưởng) hay build web lại từ đầu xong rồi xoá hết code cũ, uploud source code vừa mới buid? Thanks