/

Gatsby介紹

Gatsby介紹

Gatsby是一個使用React構建應用程序和網站的平台。

它是一個允許你使用一系列技術和實踐來構建的工具，這些技術和實踐被統稱為JAMstack。

Gatsby是當前前端開發領域中最火熱的工具之一。為什麼呢？我認為有以下幾個原因：

  • “JAMstack”方法用於構建Web應用程序和網站的大幅增長
  • 行業中對於”Progressive Web Apps”（漸進式Web應用程序）技術的快速采用，這也是Gatsby的關鍵功能之一
  • 它是使用React和GraphQL構建的，這兩個技術非常流行和備受追捧
  • 它功能強大
  • 它的速度很快
  • 文檔很好
  • 網絡效應（有人使用它，創建站點，製作教程，更多人了解它，形成一種循環）
  • 一切都是JavaScript（不需要學習新的模板語言）
  • 它隱藏了複雜性，但允許我們逐步定制每一步

以上都是很好的優點，Gatsby絕對值得一試。

它是如何工作的？

使用Gatsby，您可以使用React組件來構建應用程序。

您通常會使用Markdown編寫在站點中呈現的內容，但您也可以使用任何類型的數據源，例如無頭CMS或像Contentful這樣的Web服務。

Gatsby會構建站點，並將其編譯為靜態HTML，可以部署在任何Web服務器上，例如Netlify、AWS S3、GitHub Pages、常規託管提供商、PAAS等。您只需要找一個可以提供普通HTTP頁面和內容給客戶端的地方。

我在上面的列表中提到了漸進式Web應用程序。Gatsby會自動將您的站點生成為PWA，並使用服務工作器加快頁面加載和資源緩存。

您可以通過插件來增加Gatsby的功能。

安裝

您可以在終端中運行以下命令安裝Gatsby：

1
npm install -g gatsby-cli

這將安裝gatsby命令行工具。

（當有新版本時，可以使用相同的命令進行更新）

您可以運行以下命令創建一個新的”Hello World”站點：

1
gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

此命令將在mysite文件夾中創建一個全新的Gatsby站點，使用位於https://github.com/gatsbyjs/gatsby-starter-hello-world的starter。

Starter是您可以基於的示例站點。另一個常見的starter是default，可在https://github.com/gatsbyjs/gatsby-starter-default上找到。

您可以在這裡找到所有可用的starter的列表

運行Gatsby站點

在終端完成安裝starter之後，可以運行以下命令來運行網站：

1
2
cd mysite
gatsby develop

這將在本地主機的8000端口上啟動一個新的Web服務器並提供網站。

以下是我們的Hello World starter的運作示例：

檢查站點

如果用您喜歡的代碼編輯器（我使用VS Code）打開您創建的站點，您會發現有3個文件夾：

  • .cache：一個包含Gatsby內部代碼的隱藏文件夾，您在現在不需要更改其中的任何內容
  • public：在構建站點後包含生成網站的靜態文件
  • src：包含React組件的文件夾，這裡只有index組件
  • static：將包含靜態資源，例如CSS和圖片

現在，對默認頁面進行簡單的更改非常容易，只需打開src/pages/index.js文件，將“Hello World！”更改為其他內容，然後保存。網頁應立即熱重載該組件（這意味著網頁實際上不會刷新，但內容會更改 - 這是由底層技術支持的一個技巧）。

要添加第二個頁面，只需在此文件夾中創建另一個.js文件，與index.js具有相同的內容（調整内容）並保存。

例如，我創建了一個名為second.js的文件，具有以下內容：

1
2
3
import React from 'react'

export default () => <div>Second page!</div>

然後，我在瀏覽器中打開了http://localhost:8000/second：

頁面鏈接

您可以通過引入Gatsby提供的名為Link的React組件來鏈接這些頁面：

1
import { Link } from "gatsby"

並在組件的JSX中使用它：

1
<Link to="/second/">Second</Link>

添加CSS

您可以使用JavaScript import引入任何CSS文件：

1
import './index.css'

您可以使用React樣式：

1
2
3
4
<p style={{
 margin: '0 auto',
 padding: '20px'
 }}>Hello world</p>

使用插件

Gatsby提供了很多功能，但許多其他功能都是通過插件提供的。

有3種類型的插件：

  • 源插件：從源頭獲取數據，創建節點，然後可以通過轉換器插件進行過濾
  • 轉換器插件：將源插件提供的數據轉換為Gatsby可以使用的形式
  • 功能插件：實現某種功能，例如添加站點地圖支持或其他功能

一些常用的插件包括：

要安裝Gatsby插件，需要分兩步。首先，使用npm安裝插件，然後將其添加到gatsby-config.js的配置中。

例如，您可以安裝Catch Links插件：

1
npm install gatsby-plugin-catch-links

在gatsby-config.js中（如果沒有，創建它，位於網站根文件夾中），將插件添加到導出的plugins數組中：

1
2
3
module.exports = {
 plugins: ['gatsby-plugin-catch-links']
}

至此，插件將開始工作。

構建靜態網站

完成對站點的調整後，如果您想生成生產靜態站點，可以運行以下命令：

1
gatsby build

此時，您可以使用以下命令啟動本地Web服務器檢查是否按預期工作：

1
gatsby serve

這將以最接近預期的方式渲染站點，與最終生產狀態相似。

部署

當您使用gatsby build構建站點後，您只需要部署位於public文件夾中的結果即可。

根據您選擇的解決方案，這裡可能需要不同的步驟，但通常您需要將站點推送到Git存儲庫，讓Git的提交後鉤子來處理部署。

這裡有一些受歡迎的主機平台的指南：在這裡。

tags: [“Gatsby”, “React”, “JAMstack”, “Progressive Web Apps”, “GraphQL”, “static site generator”, “web development”]