Skip to content
KYND Dev
Github

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

— Tips — 4 min read

1. Mở đầu

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 này. Đây là bài post đầu tiên trên blog, mình sẽ note lại từng bước cách mà mình đã tạo ra blog này.

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ể tìm hiểu thêm về gatsby tại đây

2. Cách tạo trang web bằng Gatsby

Chọn blog template:

Để tạo một blog/ website bằng Gatsby, Đầu tiên các bạn vào trang chủ của gatsby để chọn cho mình những mẫu blog ưa thích, Ở mỗi mẫu blog, mọi người có thể ấn vào visit demo để xem trước có ưng ý mình không. Potions Class

Mình đã chọn gatsby-starter-minimal-blog để làm blog này.

Sau khi chọn được template các bạn bấm vào View Source để chuyển qua Github repo của blog và clone source code về máy tính

Ở trang Github của blog template sẽ có hưỡng dấn chi tiết cách tạo trang web , cài đặt các phụ thuộc và tuỳ chỉnh nội dung trang. 

1git clone https://github.com/LekoArts/gatsby-starter-minimal-blog project-name 
2cd project-name

Cài đặt các phụ thuộc:

Nếu bạn nào chưa cài NodeJs thì sẽ phải cài trước để có thể cài đặt các dependencies của blog, mọi người tải về và cài đặt NoteJs rất đơn giản tại đây. Sau khi cài đặt NoteJS chạy lệnh sau đây để cài đặt dependencies: 

1npm install --legacy-peer-deps

Chạy thử web bằng câu lệnh 'npm run develop' và vào địa chỉ: http://localhost:8000 để xem website nhé

Tiếp theo là tuỳ chỉnh:

  • Chỉnh sửa nội dung các pages ở trang content

  • Thay đổi các file tĩnh của trang như hình ảnh, icon ở static folder. Mình recommend dùng trang này để generate tất cả file tĩnh một cách tự động https://favicon.io/favicon-converter/, chỉ cần upload file ảnh mình thích và có thể tải xuống tất cả các kích thước cần thiết.

  • Chỉnh sửa hero text (Hi. I am …) và bottom text (Phần Project …) bằng cách tạo thư mục tương ứng trong folder src. Ở template của mình thì chỉ cần tạo file bottom.mdx và hero.mdx trong thư mục src/@lekoart/gatsby-theme-minimal-blog/texts/

  • Chỉnh sửa site footer bằng cách tạo file footer.jsx tại folder src/@lekoart/gatsby-theme-minimal-blog/components/

  • Để web tải lại tất cả các tuỳ chỉnh , các bạn phải tạo folder hooks với 2 file như sau: …. 

    1npm run build 
    2npm run develop

Triển khai website lên github pages:

Mọi người có thể host website các trang khác nhau nhưng ở đây mình chọn github pages vì nó dễ dàng và miễn phí. Github Pages là một dịch vụ được cung cấp bởi Github, nó cho phép người dùng có thể triển khai websites trực tiếp từ repository. Các bạn có thể triển khai website lên github pages với nhiều lựa chọn như

  • Triển khai trên đường dẫn trong repository ví dụ username.github.io/reponame/ hoặc /docs

  • Triển khai với tên miền con của github với tên người dùng như username.github.io hoặc orgname.github.io

  • Triển khai trên root folder github subdomain như username.github.io và cài đặt một tên miền ngoài

Ở bài viết này, mình hướng dẫn cách thứ 2, triển khai với tên miền con của github với tên người dùng. Các bạn có thể thiết lập các lựa chọn khác theo hưỡng dẫn tại đây

  1. Tạo github page: Để triển khai web trên github page các bạn tạo 1 github repo với tên là: <TÊN GITHUB>.github.io (ví dụ với mình là : [duckyngo.github.io(duckyngo.github.io)]). Ở repo đó, các bạn vào Setting => Pages => Chọn branch master và save nó như hưỡng dẫn sau đây

  2. Triển khai Gatsby project lên Github Pages.
    Cài đặt 'gh-page' package: Cách dễ nhất để triển khai website lên Github Page đó là dùng gh-pages

    1npm install gh-pages --save-dev

  3. Triển khai lên domain con của Github:

  • Thêm một câu lệnh tuỳ chỉnh vào file package.json để build và copy những file đã build vào đúng branch cho Github Page một cách tự động

  • Các bạn mở file package.json ra và dán dòng lệnh này vào phần script:

    1"deploy": "gatsby build && gh-pages -d public -b main"

Kết quả sẽ trông như thế này:

1{
2  "private": true,
3  "name": "minimal-blog",
4  "description": "Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.",
5  "version": "1.3.11",
6  "author": "LekoArts <[email protected]>",
7  "license": "0BSD",
8  "starter-name": "gatsby-starter-minimal-blog",
9  "scripts": {
10    "deploy": "gatsby build && gh-pages -d public -r https://[email protected]/duckyngo/duckyngo.github.io.git",
11    "deploy-main": "gatsby build && gh-pages -d public -b main",
12    "build": "gatsby build",
13    "develop": "gatsby develop",
14    "develop:cypress": "cross-env CYPRESS_SUPPORT=y yarn develop",
15    "build:cypress": "cross-env CYPRESS_SUPPORT=y yarn build",
16    "start": "gatsby develop",
17    "serve": "gatsby serve",
18    "clean": "gatsby clean"
19  },
20  ...
21}

Sau khi chạy lện run deploy các bạn sẽ thấy trang web của mình tại username.github.io

Hạn chế: Đến đây các bạn có thể tự tạo cho mình một blog cá nhân riêng nhưng mỗi lần update hoặc thêm 1 bài viết trên trang, các bạn lại phải build và deploy nó trên máy tính của mình đã được cài đặt hết những phụ thuộc của trang blog. Nó sẽ hơi phức tạp nếu các bạn muốn post bài trên điện thoại , ipad hoặc một máy tính mới. Mình đã giải quyết nó bằng cách dùng CI/CD nên mình có thể sửa, post bài mọi lúc mọi nơi và việc build và deploy sẽ được tự động hoá hoàn toàn, mình sẽ chia sẻ cách tự động hoá tích hợp (CI/ CD) trang blog của bạn bằng Github action ở bài viết tiếp theo.

3. Kết luận

Mình đã hưỡng dẫn cách xây dựng một blog cá nhân bằng gatsby và triển khai nó lên github pages cũng như tuỳ chỉnh một số nội dung trong blog. Đúng như mục đích của blog này, mình đã take note lại các bước mình tạo ra blog và chia sẻ cùng mọi người. Xin cảm ơn.

Tài liệu đọc thêm:

https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/