Cách xây dựng một trang blog với Gatsby

Các khung như React chỉ gửi JavaScript xuống ứng dụng khách, sau đó được sử dụng để tạo các phần tử trên màn hình. HTML tải trên trang là tối thiểu, vì tất cả các nội dung được tạo ở phía máy khách sau khi mọi thứ đã được tải.

Trong các dự án có dữ liệu động, chẳng hạn như blog hoặc cửa hàng, JavaScript phải xuất hiện trước khi bất kỳ dữ liệu nào khác có thể được tìm nạp. Ngay cả khi sử dụng các kỹ thuật tăng tốc độ như tách mã, nếu gói không tải xuống, toàn bộ trang web sẽ ngừng hoạt động.

• Công cụ thiết kế web để giúp bạn làm việc thông minh hơn

Các trình tạo trang web tĩnh lấy nội dung động và tạo các trang được xây dựng sẵn sàng để phục vụ. Nếu dữ liệu thay đổi, dự án có thể được xây dựng lại và nội dung mới được phục vụ. Kết quả cuối cùng được cải thiện tốc độ, khả năng mở rộng và - không có kết nối không đổi với cơ sở dữ liệu - bảo mật. Mặc dù cách tiếp cận không lý tưởng để liên tục thay đổi dữ liệu như một trang web tin tức, nhiều dự án có thể có lợi.

Gatsby. là một trình tạo trang web tĩnh được xây dựng khi phản ứng. Thông qua việc sử dụng GraphQL và plugin, nó có thể lấy dữ liệu từ các nguồn khác nhau và truyền chúng vào các thành phần. Khi điều này được thực hiện, nó sẽ phân tích dự án và tạo các tệp HTML để phục vụ cho khách hàng, trong khi phản ứng và logic ứng dụng được tải xuống trong nền.

Để biết thêm tùy chọn xây dựng trang web, hãy xem Top của chúng tôi người tạo ra trang web chọn. Cần sự hỗ trợ phù hợp? Đây là những web hosting Dịch vụ bạn cần.

Tải về các tập tin cho hướng dẫn này.

• 10 máy phát trang web tĩnh tốt nhất

Bắt đầu

Để bắt đầu, chúng ta có thể có Gatsby Giàn giáo ra một dự án cơ bản cho chúng tôi. Nó cung cấp một máy chủ phát triển, chúng tôi có thể sử dụng cùng với một vài công cụ dành cho nhà phát triển hữu ích. Đảm bảo Node và NPM được cập nhật và chạy NPX Gatsby New Gatsby-Site Trên dòng lệnh, với "Gatsby-Site" là thư mục để xây dựng.

Trong thư mục đó, Gatsby cung cấp một vài lệnh như một phần của quy trình khởi tạo. Chạy những thứ này sẽ làm cho việc xây dựng trang web dễ dàng hơn nhiều. Chạy NPM chạy phát triển Để khởi động máy chủ phát triển và xem bất kỳ thay đổi nào được cập nhật tự động trong trình duyệt.

Tất cả nội dung sống trong thư mục / src và bất kỳ tệp thiết lập nào được đặt trước với "Gatsby-" trong gốc của dự án. Tất cả mọi thứ hoạt động thông qua các thành phần, mà không cần phải có bất kỳ cấu trúc hoặc hành vi bổ sung nào để được xây dựng sẵn với Gatsby.

Nội dung của thư mục / src / trang là đặc biệt. Gatsby sẽ chọn bất kỳ thành phần nào trong thư mục đó để tạo một trang. Mở Index.js và xóa nội dung của thành phần. Lưu ý rằng trang cập nhật trong trình duyệt khi chúng tôi lưu.

 Const indexpePage = () = & gt; (
  & lt; bố trí & gt;
    {/* Trống */}
  & lt; / bố trí & gt;
) 

Xây dựng một trang

Mỗi bài đăng trên blog cần trang riêng của nó. Có thể tạo một thành phần trang cho mỗi bài đăng mới nhưng điều này tạo ra một rào cản đối với những người không được sử dụng để phản ứng và cũng sẽ yêu cầu bảo trì nhiều hơn trong tương lai khi thiết kế thay đổi.

Gatsby có một thư viện đầy đủ các plugin đã sẵn sàng để thay đổi cách nó tạo các trang, có thể tìm thấy tại gatsbyjs.org/plugins. Ở đó, chúng ta có thể tìm thấy hai loại plugin - 'nguồn' và 'Transformer'.

Một plugin nguồn sẽ lấy dữ liệu từ một nguồn và chuyển đổi chúng thành 'nút', đó là cách Gatsby liên quan đến thông tin trong một trang web. Dữ liệu có thể được tìm nạp cục bộ cho các tệp như hình ảnh hoặc từ xa cho dữ liệu ngoài như cơ sở dữ liệu.

Một plugin Transformer sau đó có thể lấy các nút này và tạo các nút mới để làm cho mọi thứ dễ dàng hơn đối với Gatsby để làm việc với. Ví dụ: các tệp yaml không thể được phân tích theo mặc định nhưng một plugin biến áp có thể biến cú pháp lồng nhau trong chúng thành các đối tượng để đọc các thành phần bên trong.

Markdown là một định dạng phổ biến được sử dụng cho văn bản vì nó linh hoạt, dễ đọc và có thể được chuyển đổi thành HTML. Plugin nguồn "Gatsby-Source-FileSystem" có thể đưa các tệp cục bộ và chuyển đổi chúng thành các nút, trong khi plugin chuyển đổi "Gatsby-Transformer-Ghi chú" sử dụng nhận xét để chuyển đổi Markdown thành một thứ mà chúng ta có thể nhận và truy vấn bằng GRAPHQL.

Dự án khởi động đã đi kèm với plugin nguồn. Cài đặt khác bằng cách chạy NPM Cài đặt Gatsby-Transformer-Ghi chú . Xin lưu ý rằng máy chủ phát triển có thể cần phải được khởi động lại để nó được chọn.

Thiết lập plugin.

Với cài đặt plugin, Gatsby cần được thông báo cách sử dụng nó. Tất cả logic này được giữ trong tệp "gatsby-config.js" được tạo khi bắt đầu. Nó đi kèm với một vài plugin đã được thiết lập ra khỏi hộp nhưng chúng ta cần thêm chúng ta vào hỗn hợp để có thể nhận và sử dụng Markdown.

Các plugin đơn giản không có quy trình thiết lập có thể được thêm vào dưới dạng chuỗi. Vì plugin chuyển đổi chỉ có một công việc, nó không cần thiết lập. Tuy nhiên, plugin nguồn phải được thông báo nơi tìm các bài viết. Thêm chúng vào dưới cùng của mảng Plugins.

 plugin: [
  [...]
  "Gatsby-Transformer-Ghi chú",
  Đồn là
    Giải quyết: `Gatsby-Source-FileSystate`,
    Tùy chọn: {
      Tên: `page`,
      Đường dẫn: `$ {__ Dirname} / src / trang`
    Không thể
  Không thể
] 

Bởi vì mỗi bài đăng sẽ trở thành trang riêng của nó, nó có ý nghĩa để thêm chúng vào thư mục SRC / Pages. Các tùy chọn cài đặt này đang nói với Gatsby để xem thư mục đó và rút bất kỳ tệp nào.

Tạo một bài đăng trên blog

Với các plugin tại chỗ, chúng ta có thể tạo bài viết đầu tiên của chúng tôi. Tạo một thư mục có tên là "My-First-Post" và thêm tệp Markdown "My-first-post.md" trong đó. Công ước này cho phép chúng tôi thêm bất kỳ tệp liên quan nào - chẳng hạn như hình ảnh - cùng với chính bài đăng.

Chúng ta cần thêm một số điểm đánh dấu vào bài đăng này để chúng tôi biết rằng nó hoạt động như mong đợi.

 ---
Đường dẫn: / Đăng / My-First-Post
Ngày: 2018-12-01.
Tóm tắt: Tóm tắt bài
Tags: [của tôi, đầu tiên, bài viết]
Tiêu đề: Bài đăng đầu tiên của tôi
---
Đây là bài viết đầu tiên của tôi! 

Nội dung giữa các dấu gạch ngang ở đầu tệp được gọi là 'vật chất trước'. Điều này sẽ chứa siêu dữ liệu xung quanh bài đăng đang được viết, chẳng hạn như ngày và tiêu đề. Tất cả dữ liệu này sẽ được chọn bởi Ghi chú và có thể được truy vấn trong GRAPHQL.

Mảnh quan trọng của vật chất trước trong trường hợp này là con đường giá trị. Đây là nơi bài đăng sẽ sống và sẽ cần phải là duy nhất. Gatsby sẽ đọc đường dẫn và tạo một trang mới ở đó.

Trước khi chúng ta có thể hiển thị các bài đăng, chúng tôi cần một thành phần trang để hiển thị bài đăng. Nó sẽ cần có khả năng lấy các giá trị dưới dạng đạo cụ và hiển thị nội dung dưới dạng một khối HTML.

Tạo một thành phần mới tại "src / blogpost.js". Thông tin về từng bài sẽ đi qua như một dữ liệu prop từ graphql.

 Nhập khẩu phản ứng từ 'phản ứng'
Nhập {GraphQL} từ 'Gatsby'
Mũ bảo hiểm nhập khẩu từ 'Mũ bảo hiểm phản ứng'
Nhập bố cục từ '../components/layout'
Xuất const blog = ({Dữ liệu: {MarkDownRemark}}) = & gt; Đồn là
  const {frontmatter, html} = markdowremark
  trở về (
    & lt; bố trí & gt;
      & lt; mũ bảo hiểm tiêu đề = {frontmatter.title} / & gt;
      & lt; div nguy hiểmsetinnerhtml = {__html: html}} / & gt;
    & lt; / bố trí & gt;
  )
} 

Gói "Mũ bảo hiểm phản ứng" được gói với Gatsby cho phép chúng tôi cập nhật các giá trị thường sẽ sống trong & lt; Head & GT; của một trang html. Ở đây chúng tôi đang thiết lập tiêu đề của bài viết là & lt; Tiêu đề & GT; của chính trang. Có rất nhiều lựa chọn khác mà nó chấp nhận, mà bạn có thể tìm hiểu thêm về github.com/nfl/react-helmet. .

Truy vấn dữ liệu

Tại thời điểm này, Gatsby không có dữ liệu cung cấp năng lượng cho trang này. Chúng ta cần tìm nạp dữ liệu từ các tệp Markdown để điền thông tin này. Để thực hiện việc này, chúng ta có thể sử dụng GraphQL - một ngôn ngữ truy vấn được tạo bởi Facebook thu thập dữ liệu có liên quan vào các thành phần phản ứng. Nói tóm lại, GraphQL xác định cấu trúc dữ liệu sẽ được trả về thông qua việc sử dụng các đối tượng lồng nhau. Bằng cách đó, chúng tôi chỉ truy vấn dữ liệu, chúng tôi sẽ thực sự sử dụng.

Gatsby cung cấp một chức năng theo nghĩa đen mẫu có thể giải thích các truy vấn. Nó sẽ phát hiện bất kỳ việc sử dụng nó và truyền kết quả của nó dưới dạng đạo cụ vào thành phần. Điều này có nghĩa là chúng ta có thể thêm truy vấn trong cùng một tệp và giữ logic liên quan với nhau.

Xuất Const PageQuery = GraphQL`
  Truy vấn ($ PATH: String!) {
    MarkDownRemark (FrontMatter: {Path: {EQ: $ PATH}}) {
      html.
      Frontmatter {
        Ngày (Formatstring: "D mmmm yyyy")
        tiêu đề
      Không thể
    Không thể
  } `

Bên trong truy vấn này, chúng tôi đang yêu cầu Gatsby cho tất cả các nút Markdown với một đường dẫn phù hợp với trang chúng tôi đang bật. Nếu nó tìm thấy một, thì nó sẽ vượt qua HTML, ngày và tiêu đề được hiển thị của bài đăng trên thành phần.

Viết truy vấn theo cách này chỉ giới hạn cho các thành phần trang. Bất kỳ thành phần nào khác cần truy vấn cho các nút phải sử dụng & lt; staticquery & gt; và tải nó lên phía trước. Tại thời điểm này, máy chủ phát triển có thể cảnh báo về điều này cho Bài viết trên blog Thành phần, nhưng điều này là do nó không nhận thức được nó sẽ trở thành một thành phần trang. Hãy thay đổi điều đó.

Tạo trang

Theo mặc định, Gatsby chỉ tạo các trang cho các thành phần trong / src / trang , có nghĩa là chúng ta cần tạo các trang một số cách khác.

Gatsby cho thấy một vài phương thức từ quy trình xây dựng của nó để giúp truy cập các nút dữ liệu. Chúng có thể được truy cập thông qua "gatsby-node.js" trong thư mục gốc của dự án. Trong trường hợp này, chúng tôi sẽ sử dụng GraphQL để tìm nạp tất cả các bài đăng trên blog và để Createpages. Gọi lại Tạo một trang cho mỗi một. Vì đây là một hành động không đồng bộ, chúng ta cần trả lại lời hứa nên Gatsby có thể tiếp tục với quá trình xây dựng.

 Const Path = yêu cầu ('Path')
xuất.createpages = ({hành động, graphql}) = & gt; Đồn là
  Trả về GRAPHQL (`
    Đồn là
      allmarkdownremark {
        cạnh {
          nút {
            Frontmatter {
              con đường
            Không thể
          Không thể
        Không thể
      Không thể
    Không thể
  `)
} 

Phần đầu tiên của cuộc gọi lại là một truy vấn tìm nạp đường dẫn cho mỗi bài đăng, vì mỗi trang riêng lẻ sau đó sẽ nhận được dữ liệu của riêng mình. Cuộc gọi GRAPHQL trả về một lời hứa sẽ chứa tất cả các bài đăng. Chúng ta có thể sử dụng dữ liệu từ đó để tạo một số trang.

. Sau đó (kết quả = & gt; {
  nếu (kết quả.errors) {
    Lời hứa trả về.Rject (kết quả .Errors)
  Không thể
  Const blosposttemplate = path.resolve ('src / linh kiện / blogpost.js')
  kết quả.data.allmarkdownremark.edges.foreach (({node}) = & gt; {
    hành động.createpage ({
      Đường dẫn: Node.frontMatter.Path,
      Thành phần: Blogpostemplate,
    })
  })
}) 

Nếu truy vấn gặp lỗi, hãy tạm dừng quy trình xây dựng để tìm ra lý do tại sao. Nếu mọi thứ đều ổn, lấy thành phần được thực hiện và gọi tạo trang phương thức để tạo một trang tại đường dẫn được cung cấp.

Với các trang tạo, tất cả những gì cần thiết bây giờ là một cách để tìm thấy chúng. Chúng ta có thể sử dụng một truy vấn trên thành phần trang chỉ mục hiện có để làm điều đó.

 Xuất Const PageQuery = GraphQL`
  truy vấn {
    AllMarkDownRemark (Sắp xếp: {Các trường: [Frontmatter___Date], Thứ tự: Desc}) {
      cạnh {
        nút {
          Frontmatter {
            con đường
            tiêu đề
          Không thể
        Không thể
      Không thể
    Không thể
  Không thể
`; 

Trong truy vấn này, chúng tôi chỉ quan tâm đến các tiêu đề và đường dẫn đến bài viết. Chúng tôi cũng chuyển một số thông số để nhận xét để có được các bài đăng gần đây nhất theo thứ tự ngược lại. Truy vấn này đặc biệt là kiểm tra ngày từ mặt trước trên mỗi bài. Cú pháp cho mỗi truy vấn sẽ phụ thuộc vào plugin được sử dụng để tạo nó.

Cuối cùng, thành phần cần cập nhật để sử dụng dữ liệu. Thành phần "liên kết" được cung cấp bởi Gatsby cho phép nó biết những thành phần nào cần thiết để hiển thị liên kết đó và sẽ đảm bảo nó tìm nạp các gói phù hợp cho phù hợp.

 Const indexpe = ({data}) = & gt; Đồn là
  trở về (
    & lt; bố trí & gt;
      {data.allmarkdownremark.edges.map (
        ({Node: {FrontMatter: {PATH, TITLE}}}) = & gt; (
          & lt; khóa liên kết = {path} đến = {path} & gt;
            {tiêu đề}
          & lt; / link & gt;
        ))}
    & lt; / bố trí & gt;
  )
} 

Với điều đó, blog của chúng tôi đã được thực hiện. Tất cả những gì còn lại là thông minh lên và có Gatsby xây dựng một trang web sẵn sàng sản xuất. Bằng cách chạy NPM RUN BUILD. Nó có thể loại bỏ bất kỳ cải tiến nào được sử dụng để phát triển và tạo ra các gói sẵn sàng để triển khai. Sau khi hoàn tất, thư mục "công khai" sau đó có thể được tải lên bất cứ nơi nào có thể phục vụ các trang web tĩnh. Có tập tin để lưu trữ cho blog của bạn? Hãy chắc chắn rằng chúng an toàn trong sự rực rỡ lưu trữ đám mây .

Bài viết này ban đầu được công bố trong số phát hành 314 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. MUA VẤN ĐỀ 314 TẠI ĐÂY hoặc là Đăng ký tại đây .

Những bài viết liên quan:

• 16. Nền tảng blog miễn phí tốt nhất
• Sử dụng WordPress như một CMS không đầu
• Cách mã nhanh hơn, bật lửa JavaScript