Chuyển blog sang Gridsome, tạm biệt Hugo
Hành trình chuyển đổi blog từ Hugo sang Gridsome và những cải thiện đáng kể về hiệu suất. Bài viết phân tích chi tiết lý do thay đổi, ưu điểm của Gridsome như hệ sinh thái Vue.js, GraphQL tích hợp, và khả năng tùy biến cao. Kèm theo là so sánh điểm Lighthouse trước và sau khi chuyển đổi, cùng những kinh nghiệm thực tế khi làm việc với static site generator hiện đại.

Giới thiệu
Mình mới chuyển website sang Gridsome, bạn có thể review lại 1 vòng website thấy thế nào nhé.
Mục tiêu của bài viết này là giúp bạn hiểu sơ về Gridsome và tại sao mình bỏ Hugo để dùng nó.
Lúc trước mình viết bài bỏ Wordpress để qua static site với Hugo, nhiều bạn cũng bỏ theo rồi đó, biết đâu lần này cũng vậy 😅
Đây là điểm LightHouse trước và sau khi chuyển sang Gridsome:
Trước
Sau
Gần như full điểm, điểm Performance thấp là do mình có dùng mấy cái iframe của Spotify, sẽ tìm cách khắc phục sau 😂
Tại sao bỏ Hugo?
Khoảng 10 tháng trước, mình có đổi blog từ Wordpress sang Hugo và bắt đầu dùng static site generator từ đó.
Từ đó cũng đã quen với việc viết blog bằng Markdown luôn 😗
Mọi thứ đều ổn cho đến khi mình muốn chỉnh sửa giao diện lại blog.
Vì gần đây mình có làm thêm phần podcast nữa thêm cấu trúc các bài viết bị lộn xộn giữa podcast với blog thường.
Mình muốn sẵn cấu trúc lại blog và sửa lại giao diện luôn.
Và mình thấy là syntax của Hugo để làm frontend và query dữ liệu không 'thuận mắt' cho lắm.
Mình lại biết Vue.js - framework chuyên để làm frontend, thế nên mình chuyển qua Gridsome cho thuận tay.
Nhiều người bảo là lập trình viên thì ngôn ngữ hay framework không quan trọng.
Mình đồng ý nhưng mắc gì phải code cái mình không thích, trong khi không dùng cái mình thấy thuận mắt hơn đúng không nào?
Lát mình sẽ show code của Gridsome với Hugo cho mọi người tự so sánh nhé.
Gridsome là gì?
Tương tự như Hugo, Gridsome cũng là framework dùng để tạo các static website.
Hugo dùng Golang và các library frontend như Bootstrap.
Còn Gridsome dùng Javascript và framework frontend là Vue.js. Gridsome dùng GraphQL để lấy dữ liệu từ các file markdowns, json, api
Có thể nói Gridsome là thay thế (alternative) cho Gatsbyjs (dùng React.js)
Mình có hình giải thích tổng quan cấu trúc của Gridsome bên dưới
GraphQL là gì?
GraphQL - A query language for your API
GraphQL là ngôn ngữ để lấy dữ liệu. Định nghĩ thì có trên mạng hết rồi nha, mình ví dụ luôn cho dễ hiểu.
Mình cần lấy danh sách các podcast trên Spotify của mình, do đó mình dùng Spotify API.
- Bước 1 là call API từ Spotify và định nghĩa Schema cho kiểu dữ liệu Podcast (giống định nghĩa table bên SQL ý). Code call api trong file gridsome.server.js
- Bước 2 là query thử dữ liệu ở Explorer tool, khi bạn chạy Gridsome project thì explorer url ở local là: http://localhost:8080/___explore
Syntax query data thì bạn có thể Google nhé
Trường hợp này mình chỉ cần lấy các fields: id, name, uri, release_date thôi.
Code để query bên trái, data nhận được bên phải, cực kỳ trực quan đúng không nào.
- Bước 3: Sử dụng data trong Vue.js component thôi.
Gridsome và GraphQL có 'overkill' để chỉ làm 1 blog không?
Theo cảm nhận các nhân của mình thì không. Việc dùng Hugo còn rối rắm hơn.
Đây là đoạn code để list danh sách bài viết của Hugo
Danh sách bài viết
{{- range $i, $p := where .Site.RegularPages "Section" "eq" "posts" -}} {{- $thisYear := $p.Date.Format "2006" }} {{- $lastPage := $i | add -1 | index ( where .Site.RegularPages "Section" "eq" "posts") }} {{- if or (eq $i 0) ( ne ($lastPage.Date.Format "2006") $thisYear ) }} {{ $thisYear }} {{- end }}
{{ $p.Date.Format "01-02" }}
{{- cond (eq .Site.Params.titlecase true) (.Title | title | markdownify) (.Title | markdownify) -}}
{{- end -}}
Còn Vue thì khác, Vue nó tách riêng phần template (html), phần data, phần style (css) ra riêng làm 3, người ta gọi là seperate conerns ý.
Chưa kể có thể tạo các component để reuse một cách dễ dàng hơn Hugo nhiều
Tương tự đây là đoạn code để list danh sách bài viết bên Vue.js. Bạn có thể thấy là mình đã tách ra 2 components con là ListPosts và PaginationPosts
query Posts ($page: Int) { posts: allPost (sortBy: "date", order: DESC, perPage: 8, page: $page , filter: { draft: {ne: true}, categories: {containsNone: ["Podcast"]} } ) @paginate { totalCount pageInfo { totalPages currentPage } edges { node { id categories { title path } image title content date (format: "MMMM D, Y") timeToRead path } } } }
import PaginationPosts from '../components/PaginationPosts' import ListPosts from '../components/ListPosts'
export default { metaInfo: { title: 'Blog', }, components: { PaginationPosts,ListPosts }, } ```
Còn về GraphQL, mình thấy nó còn dễ tiếp cận, và dễ học hơn Golang. Chưa kể bạn có cái Explorer để vọc nữa.
## Nhược điểm của Gridsome là gì?
* Cộng đồng không nhiều bằng Hugo, nếu có lỗi gì lạ thì tự mò. (Yên tâm, mình chưa gặp lỗi gì cả)
* Ít plugin hơn. Cái table of contents cũng chưa có nữa
Nhưng không sao, mình đã biến những nhược điểm như ít plugin để làm blog tối giản nhất.
Mình đã bỏ luôn phần comment rồi. Viết [blog được 5 năm](https://niviki.com/tai-sao-ban-can-co-mot-blog-ca-nhan) nhưng chỉ có khoảng 150 comments và một đống comment spam.
Nên mình đã thay phần comment này bằng một lời nhắn

Ai thực sự cần mình giúp hoặc nghiêm túc góp ý có thể liên lạc thêm. Vừa tăng sự tương tác vừa giúp trải nghiệm đọc blog tốt hơn nữa.
Mình cũng tập trung viết nội dung chất lượng hơn là ngồi lọc comment.
## Kết
Vậy bạn có nên chuyển website của mình sang Gridsome không?
Nếu bạn đã biết Vue.js thì mình nghĩ là bạn nên thử nó 1 lần.
[https://gridsome.org/](https://gridsome.org/)
À, bạn thấy giao diện mới của website thế nào? Góp ý giúp mình nhé 🥰
Related Posts
Discover more content you might enjoy

Vibe Coding - Code lại blog từ đầu và rebrand thành khoa.blog
Chia sẻ chi tiết quá trình build lại blog từ đầu với vibe coding, từ việc chuyển đổi dữ liệu đến việc triển khai các tính năng mới, giúp người đọc hiểu rõ hơn về quá trình phát triển blog cá nhân.

Game Theory trong thời đại AI: Khi máy móc tham gia vào "trò chơi"
Bài viết phân tích sự giao thoa giữa lý thuyết trò chơi (Game Theory) và trí tuệ nhân tạo, giải thích cách AI đang thay đổi các nguyên lý cân bằng Nash và chiến lược tối ưu. Tác giả đưa ra các ví dụ thực tế về ứng dụng trong kinh doanh, giao thông và an ninh mạng.

Bài này không phải AI viết
Suy ngẫm chân thành về giá trị của việc viết thủ công trong kỷ nguyên AI. Dù AI có thể tạo nội dung hiệu quả, bài viết này là lời khẳng định về sự kết nối cá nhân và giá trị độc đáo mà con người mang lại cho văn bản của mình.

Vibe Coding và các nhược điểm của nó
Phân tích chi tiết các nhược điểm và rủi ro của phương pháp Vibe Coding - cách tiếp cận để AI viết code mà không cần sự giám sát của con người, giúp người đọc hiểu rõ hơn về những thách thức trong việc áp dụng công nghệ AI vào phát triển phần mềm.

Lừa đảo thời công nghệ phần 1
Bài viết phân tích các phương thức lừa đảo phổ biến trên mạng xã hội và internet, giải thích khái niệm 'false positive' trong việc nhắm mục tiêu nạn nhân và cảnh báo về việc sử dụng chatbot để dụ dỗ người dùng. Tác giả khuyến cáo người dùng cẩn trọng với các lời mời gọi trúng thưởng, quà tặng miễn phí trong thời đại công nghệ.

Tại sao nên làm một thẻ thanh toán quốc tế?
Bài viết giới thiệu về lợi ích của việc sở hữu thẻ thanh toán quốc tế như Visa và MasterCard, bao gồm khả năng thanh toán xuyên lục địa, mua sắm trực tuyến trên các nền tảng quốc tế, đăng ký PayPal và các ví điện tử khác, cùng với hướng dẫn cơ bản về cách làm thẻ tại ngân hàng ACB với chi phí hợp lý.