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:
npm install -g gatsby-cli
這將安裝gatsby
命令行工具。
(當有新版本時,可以使用相同的命令進行更新)
您可以運行以下命令創建一個新的"Hello World"站點:
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上找到。
運行Gatsby站點
在終端完成安裝starter之後,可以運行以下命令來運行網站:
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
的文件,具有以下內容:
import React from 'react'
export default () => <div>Second page!</div>
然後,我在瀏覽器中打開了http://localhost:8000/second:
頁面鏈接
您可以通過引入Gatsby提供的名為Link
的React組件來鏈接這些頁面:
import { Link } from "gatsby"
並在組件的JSX中使用它:
<Link to="/second/">Second</Link>
添加CSS
您可以使用JavaScript import引入任何CSS文件:
import './index.css'
您可以使用React樣式:
<p style={{
margin: '0 auto',
padding: '20px'
}}>Hello world</p>
使用插件
Gatsby提供了很多功能,但許多其他功能都是通過插件提供的。
有3種類型的插件:
- 源插件:從源頭獲取數據,創建節點,然後可以通過轉換器插件進行過濾
- 轉換器插件:將源插件提供的數據轉換為Gatsby可以使用的形式
- 功能插件:實現某種功能,例如添加站點地圖支持或其他功能
一些常用的插件包括:
- gatsby-plugin-react-helmet:允許編輯
head
標籤內容 - gatsby-plugin-catch-links:使用History API來防止瀏覽器點擊鏈接時重新加載頁面,而是使用AJAX加載新内容
要安裝Gatsby插件,需要分兩步。首先,使用npm
安裝插件,然後將其添加到gatsby-config.js
的配置中。
例如,您可以安裝Catch Links插件:
npm install gatsby-plugin-catch-links
在gatsby-config.js
中(如果沒有,創建它,位於網站根文件夾中),將插件添加到導出的plugins
數組中:
module.exports = {
plugins: ['gatsby-plugin-catch-links']
}
至此,插件將開始工作。
構建靜態網站
完成對站點的調整後,如果您想生成生產靜態站點,可以運行以下命令:
gatsby build
此時,您可以使用以下命令啟動本地Web服務器檢查是否按預期工作:
gatsby serve
這將以最接近預期的方式渲染站點,與最終生產狀態相似。
部署
當您使用gatsby build
構建站點後,您只需要部署位於public
文件夾中的結果即可。
根據您選擇的解決方案,這裡可能需要不同的步驟,但通常您需要將站點推送到Git存儲庫,讓Git的提交後鉤子來處理部署。
這裡有一些受歡迎的主機平台的指南:在這裡。