blog-engine-07-gatsby 建極速網站和應用程式 基於React的最佳框架,具備效能、可擴充套件性和安全性。

老马啸西风發表於2024-03-27

擴充閱讀

blog-engine-01-常見部落格引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 對比

blog-engine-02-透過部落格引擎 jekyll 構建 github pages 部落格實戰筆記

blog-engine-02-部落格引擎jekyll-jekyll 部落格引擎介紹

blog-engine-02-部落格引擎jekyll-jekyll 如何在 windows 環境安裝,官方文件

blog-engine-02-部落格引擎jekyll-jekyll SEO

blog-engine-04-部落格引擎 hugo intro 入門介紹+安裝筆記

blog-engine-05-部落格引擎 Hexo 入門介紹+安裝筆記

blog-engine-06-pelican 靜態網站生成 官方文件

blog-engine-06-pelican 靜態網站生成 windows 安裝實戰

blog-engine-07-gatsby 建極速網站和應用程式 基於React的最佳框架,具備效能、可擴充套件性和安全性

blog-engine-08-vuepress 以 Markdown 為中心的靜態網站生成器

blog-engine-09-nuxt 構建快速、SEO友好和可擴充套件的Web應用程式變得輕鬆

blog-engine-10-middleman 靜態站點生成器,利用了現代 Web 開發中的所有快捷方式和工具

前言

由於個人一直喜歡使用 markdown 來寫 個人部落格,最近就整理了一下有哪些部落格引擎。

感興趣的小夥伴也可以選擇自己合適的。

Gatsby

Gatsby 是一個基於React的免費開源框架,它幫助開發者構建極速網站和應用程式。

它結合了動態渲染站點的控制性和可擴充套件性以及靜態站點生成的速度,創造了全新的網路可能性。

Gatsby幫助專業開發者高效建立可維護、高效能、內容豐富的網站。

從任何地方載入資料。Gatsby可以從任何資料來源獲取資料,無論是Markdown檔案、像Contentful或WordPress這樣的無頭CMS,還是REST或GraphQL API。使用源外掛載入資料,然後使用Gatsby的統一GraphQL介面進行開發。

超越靜態網站。享受靜態網站的所有優勢,但沒有任何限制。Gatsby站點是完全功能的React應用程式,因此您可以建立高質量的動態Web應用程式,從部落格到電子商務網站再到使用者儀表板。

選擇您的渲染選項。除了靜態站點生成(SSG)之外,您還可以根據頁面選擇替代渲染選項,即延遲靜態生成(DSG)和伺服器端渲染(SSR)。這種粒度控制使您能夠在不犧牲一個方面的情況下最佳化效能和生產力。

效能已經內建。預設情況下透過效能稽核。Gatsby自動進行程式碼拆分、影像最佳化、內聯關鍵樣式、懶載入、預取資源等操作,以確保您的站點快速執行,無需手動調整。

為每個站點使用現代技術棧。無論資料來自何處,Gatsby站點都是使用React和GraphQL構建的。為您和您的團隊構建統一的工作流程,無論資料來自相同的後端還是不同的後端。

以分母為單位大規模託管。Gatsby站點不需要伺服器,因此您可以將整個站點託管在CDN上,成本僅為伺服器渲染站點的一小部分。許多Gatsby站點可以完全免費託管在Gatsby Cloud和其他類似服務上。

在任何地方使用Gatsby的集中式資料層。使用Gatsby的Valhalla內容中心,您可以將Gatsby的資料層引入任何專案中。透過統一的GraphQL API訪問它,用於構建內容站點、電子商務平臺以及原生和Web應用程式。

學習如何在您的下一個專案中使用Gatsby。

💻 在5分鐘內在本地開始使用Gatsby

您可以透過以下四個步驟在本地開發環境上快速啟動並執行新的Gatsby站點:

初始化一個新專案。

這裡需要提前安裝 npm.

npm init gatsby

給它命名為"My Gatsby Site"。

配置選項:

What would you like to call your site?
√ · My Gatsby Site
What would you like to name the folder where your site will be created?
√ gatsby/ my-gatsby-site
√ Will you be using JavaScript or TypeScript?
· JavaScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· No (or I'll add it later)
√ Would you like to install additional features with other plugins?
· Add Markdown support (without MDX)

以開發模式啟動站點。

然後,轉到您新站點的目錄並啟動它:

cd my-gatsby-site/
npm run develop

開啟原始碼並開始編輯!

您的站點現在正在 http://localhost:8000 上執行。

在您選擇的程式碼編輯器中開啟my-gatsby-site目錄並編輯src/pages/index.js。

儲存您的更改,瀏覽器將實時更新!

在這一點上,您已經擁有一個完全功能的Gatsby網站。有關如何自定義Gatsby站點的更多資訊,請參閱我們的外掛和官方教程。

相關文章