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

拓展閱讀

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站點的更多信息,請參閱我們的插件和官方教程。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章