1. Giới thiệu dự án và ngôn ngữ lập trình chính

Gatsby Starter Docs là một dự án mã nguồn mở dựa trên GatsbyJS, được thiết kế để tạo trang web tài liệu hoặc hướng dẫn. Dự án này cung cấp HTML được render trước và tệp JS được tải tự động theo từng phần, giúp trang web có hiệu suất tốt. Ngôn ngữ lập trình chính của dự án là JavaScript, với việc sử dụng React để phát triển các thành phần.

2. Vấn đề thường gặp và cách giải quyết cho người mới bắt đầu

Vấn đề 1: Cấu hình thông tin cơ bản của dự án

Mô tả vấn đề: Người mới bắt đầu có thể không biết cách cấu hình thông tin cơ bản của trang web như tiêu đề, mô tả, tác giả, v.v.

Các bước giải quyết:

1. Mở tệp `gatsby-config.js` trong thư mục gốc của dự án.
2. Cấu hình thông tin liên quan trong đối tượng `siteMetadata`, ví dụ:

   
       siteMetadata: {
         title: 'Trang tài liệu của tôi',
         description: 'Đây là trang tài liệu được tạo bằng Gatsby Starter Docs',
         author: 'Tên của bạn',
         // Các tùy chọn cấu hình khác...
       },
       

3. Lưu tệp và khởi động lại máy chủ phát triển.

Vấn đề 2: Thêm và hiển thị tài liệu mới

Mô tả vấn đề: Người mới có thể không rõ cách thêm nội dung tài liệu mới vào trang web và hiển thị nó trên trang.

Các bước giải quyết:

1. Tạo tệp markdown mới trong thư mục `content`, ví dụ: `my-new-doc.md`.
2. Viết nội dung tài liệu trong tệp markdown và sử dụng Frontmatter để thêm dữ liệu meta, ví dụ:

   
       ---
       title: "Tài liệu mới của tôi"
       date: "2023-10-01"
       description: "Đây là tài liệu về một chủ đề cụ thể"
       ---
   
       Đây là nội dung tài liệu...
       

3. Đảm bảo rằng chức năng `createPages` trong tệp `gatsby-config.js` được cấu hình đúng để tự động tạo trang tài liệu.
4. Khởi động lại máy chủ phát triển và truy cập liên kết đến tài liệu mới trong trình duyệt.

Vấn đề 3: Tùy chỉnh kiểu dáng trang web

Mô tả vấn đề: Người mới có thể muốn tùy chỉnh kiểu dáng của trang web nhưng không chắc chắn cách thực hiện.

Các bước giải quyết:

1. Tạo tệp CSS mới trong thư mục `src`, ví dụ: `custom-styles.css`.
2. Thêm mã CSS tùy chỉnh vào tệp CSS.
3. Thêm đoạn mã sau vào tệp `gatsby-browser.js` để đưa vào kiểu dáng tùy chỉnh:

   
       exports.onClientEntry = () => {
         require('./src/custom-styles.css');
       };
       

4. Lưu tất cả các thay đổi và khởi động lại máy chủ phát triển, kiểm tra xem kiểu dáng trang web có được cập nhật hay không.