Chuyển blog sang nền tảng GatsbyJS

Trong bài viết này mình sẽ giới thiệu về nền tảng blog tĩnh GatsbyJS và những trải nghiệm đầu tiên khi mình chuyển blog sang nền tảng này.

I. Tại sao là GatsbyJS?

Trước đây mình đã sử dụng qua Wordpress, rồi sau đó là Jekyll để viết blog. Điểm mạnh của Wordpress là có rất nhiều plugin và giao diện sẵn khá đẹp và dễ dùng. Tuy nhiên sau một thời gian dùng Wordpress mình thấy thích sự đơn giản và "siêu tốc độ" của một trang web tĩnh hơn, vậy nên mình chuyển qua Jekyll - Host trên Github Pages luôn (Mình đã từng có 2 bài viết hướng dẫn anh em dùng Jekyll tại đây và đây nữa nhé).

Tuy mình khá hài lòng với Jekyll rồi, nhưng hôm trước đang ngồi xem cái tutorial của React để làm quen và áp dụng làm project trên trường thì thấy có blog của một ông anh sử dụng GatsbyJS (nôm na là cái nền tảng để tạo website tĩnh như Jekyll nhưng lại sử dụng React). Điều đặc biệt là tốc độ của nó quá khủng (gồm cả tốc độ load trang ban đầu và di chuyển qua lại giữa các bài viết). Ngó qua thì thấy cấu trúc bài viết rất giống bên Jekyll, vì thế mình đã quyết định chuyển cái blog của mình qua đó luôn. Một số ưu điểm của GatsbyJS có thể kể ra như sau:

TỐC ĐỘ: Là một framework để tạo web tĩnh (tương tự như Jekyll), tối ưu tốc độ và bảo mật cho website. Việc chuyển qua lại giữa các trang trong website cũng 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. Việc cấu hình các plugin cho phép tối ưu việc tải ảnh và preload (tải trước nội dung của các link người dùng có thể ghé qua) sẽ cho trang web của bạn một tốc độ cực cao.
SEO FRIENDLY (Thân thiện với các công cụ tìm kiếm): Nhiều bạn có thể lo ngại về việc website của bạn sẽ bị ảnh hưởng chất lượng SEO khi sử dụng GatsbyJS. Tuy nhiên bạn không cần lo lắng về điều đó vì GatsbyJS cung cấp khả năng server rendering, lần đầu crawler của các máy tìm kiếm tải trang web, chúng sẽ nhận được toàn bộ nội dung trang.
CÔNG NGHỆ HOT TREND: Sử dụng một loạt các công nghệ đang là "hot trend" hiện nay như React, Webpack, GraphQL (cài này giúp bạn có thể lấy dữ liệu bài viết từ rất nhiều nguồn khác nhau, ví dụ như các file dạng Markdown, các CMS (Contentful, WordPress), ...).
HỖ TRỢ Progressive Web Apps: Thêm website của bạn vào màn hình home của di động và người dùng có thể dùng nó như một app di động luôn.

II. Mình đã thực hiện chuyển website sang GatsbyJS thế nào?

1. Setup một trang web mới sử dụng GatsbyJS

Việc chuyển đổi nền tảng website sang GatsbyJS khá đơn giản. Trước tiên bản phải chọn một theme và bắt đầu setup một trang blog mới. Lang thang trên mạng một thời gian mình cũng tìm được một theme khá đẹp là Lumen. Mình dự định sẽ lưu website trên Github và sử dụng công cụ Netlify để deploy trang web.

Dịch vụ của Netlify khá tốt khi họ hỗ trợ mình deploy tự động từ Github. Bạn cũng có thể trỏ tên miền tới và nhận một chứng chỉ SSL miễn phí. Để deploy bắt đầu setup một trang với theme Lumen, click vào đây: https://app.netlify.com/start/deploy?repository=https://github.com/alxshelepenok/gatsby-starter-lumen.

2. Chuyển bài viết cũ sang blog mới

2.1. Chuyển blog từ Jekyll sang Gatsby:

Trước đây mình viết blog trên Jekyll. Thật may là cấu trúc bài viết của GatsbyJS và Jekyll giống nhau, vậy nên việc chuyển hết sức đơn giản. Sau khi chọn theme và deploy lên Netlify, mình chọn cách clone toàn bộ repo vừa tạo bởi Netlify về (từ Github). Sau đó chỉ việc copy các bài viết và trang vào thư mục content/posts, content/pages và copy các nội dung khác (hình ảnh, tệp, video) vào thư mục static. Bạn có thể xem định dạng của các bài viết mẫu ở trong 2 trang đó và sửa các file Markdown cho phù hợp. Tiếp đó bạn sửa file config.js để cấu hình các thông tin của website. Sau khi đẩy các thay đổi lên Github thì dịch vụ Netlify sẽ tự động lấy về và deploy cho bạn.

Việc xem trang web ở localhost có thể được thực hiện với lệnh:

gatsby develop

Theme Lumen cũng hỗ trợ bạn một giao diện chỉnh sửa nội dung (thêm, sửa, xóa các bài viết, hình ảnh khá dễ dàng qua Netlify CMS). Trước tiên bạn phải vào trang Netlify để kích hoạt Netlify's Identity service, sau đó mở địa chỉ <website-của-bạn>/admin để có thể đăng ký một người dùng và thực hiện viết bài qua giao diện đó. Tuy nhiên mình thích cách viết bài qua VS Code và đẩy lên Git hơn.

2.2. Chuyển blog từ Wordpress sang Gatsby

Mình cũng cần chuyển một số bài viết từ blog blog.vietanhdev.com hiện đang sử dụng Wordpress sang blog mới, vậy nên mình cũng tìm hiểu về việc này. Trước tiên bạn cần sử dụng plugin Jekyll Exporter để export các bài viết, trang và hình ảnh sang dạng markdown, tải về và thực hiện copy vào blog mới như trên.

3. Thiết lập thêm các chức năng khác

3.1. Sử dụng latex trong các bài viết

Mình có sử dụng các công thức toán trong một số bài viết (ví dụ như bài này). Sau khi tìm hiểu mình quyết định chọn katex cho blog của mình. Việc cài đặt hết sức đơn giản:

Cài thêm plugin:

yarn add gatsby-transformer-remark gatsby-remark-katex katex

Kích hoạt plugin trong file cấu hình: bạn cần mở file gatsby-config.js và thêm plugin gatsby-remark-katex vào phần gatsby-transformer-remark tương tự như bên dưới.

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-katex`,
          options: {
            // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
            strict: `ignore`
          }
        }
      ],
    },
  },
],

Nạp file SCSS:

Vì mình sử dụng theme Lumen nên mình sẽ vào /src/assets/scss/_base.scss để thêm dòng @import "~katex/dist/katex.min.css"; để nạp stylesheet cho katex. Sau khi thêm file sẽ có nội dung tương tự như sau:

@charset "UTF-8";

@import "normalize-scss";
@import "~katex/dist/katex.min.css";
@import "~prismjs/themes/prism.css";
@import "base/generic";

Chèn công thức toán:
- 1. Inline Mode: $a^2 + b^2 = c^2$
- 1. Display Mode:

$$
a^2 + b^2 = c^2
$$

3.2. Thêm chức năng tìm kiếm

Việc thêm chức năng tìm kiếm khó hơn một chút, đòi hỏi mọi người phải có một chút kiến thức về React và tham khảo hướng dẫn này để thêm chức năng tìm kiếm cho website sử dụng dịch vụ của Algolia: https://janosh.io/blog/gatsby-algolia-search.

Vậy là mình đã hoàn thiện việc chuyển blog sang GatsbyJS rồi. Sau khi kiểm tra tốc độ bằng Google PageSpeed Insights mình nhận được kết quả lần lượt 100 và 95 điểm cho Desktop và Mobile - con số quá tuyệt vời!.

Kết quả Google PageSpeed Insights Desktop

Kết quả Google PageSpeed Insights Mobile

Nhân tiện mình tìm thấy một blog viết về việc tạo blog với Gatsby bằng tiếng Việt khá chi tiết. Xin chia sẻ để các bạn xem: https://completejavascript.com/tao-trang-blog-voi-gatsby-js/.