拓展閱讀
blog-engine-01-常見博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 對比
blog-engine-02-通過博客引擎 jekyll 構(gòu)建 github pages 博客實(shí)戰(zhàn)筆記
blog-engine-02-博客引擎jekyll-jekyll 博客引擎介紹
blog-engine-02-博客引擎jekyll-jekyll 如何在 windows 環(huán)境安裝厦幅，官方文檔
blog-engine-02-博客引擎jekyll-jekyll SEO
blog-engine-04-博客引擎 hugo intro 入門介紹+安裝筆記
blog-engine-05-博客引擎 Hexo 入門介紹+安裝筆記
blog-engine-06-pelican 靜態(tài)網(wǎng)站生成 官方文檔
blog-engine-06-pelican 靜態(tài)網(wǎng)站生成 windows 安裝實(shí)戰(zhàn)
blog-engine-07-gatsby 建極速網(wǎng)站和應(yīng)用程序 基于React的最佳框架沾鳄，具備性能慨飘、可擴(kuò)展性和安全性
blog-engine-08-vuepress 以 Markdown 為中心的靜態(tài)網(wǎng)站生成器
blog-engine-09-nuxt 構(gòu)建快速、SEO友好和可擴(kuò)展的Web應(yīng)用程序變得輕松
blog-engine-10-middleman 靜態(tài)站點(diǎn)生成器译荞，利用了現(xiàn)代 Web 開發(fā)中的所有快捷方式和工具
前言
由于個人一直喜歡使用 markdown 來寫 個人博客瓤的，最近就整理了一下有哪些博客引擎。
感興趣的小伙伴也可以選擇自己合適的吞歼。
Gatsby
Gatsby 是一個基于React的免費(fèi)開源框架圈膏，它幫助開發(fā)者構(gòu)建極速網(wǎng)站和應(yīng)用程序。
它結(jié)合了動態(tài)渲染站點(diǎn)的控制性和可擴(kuò)展性以及靜態(tài)站點(diǎn)生成的速度篙骡，創(chuàng)造了全新的網(wǎng)絡(luò)可能性稽坤。
Gatsby幫助專業(yè)開發(fā)者高效創(chuàng)建可維護(hù)丈甸、高性能、內(nèi)容豐富的網(wǎng)站尿褪。
從任何地方加載數(shù)據(jù)睦擂。Gatsby可以從任何數(shù)據(jù)源獲取數(shù)據(jù)，無論是Markdown文件杖玲、像Contentful或WordPress這樣的無頭CMS顿仇，還是REST或GraphQL API。使用源插件加載數(shù)據(jù)摆马，然后使用Gatsby的統(tǒng)一GraphQL接口進(jìn)行開發(fā)臼闻。
超越靜態(tài)網(wǎng)站。享受靜態(tài)網(wǎng)站的所有優(yōu)勢囤采，但沒有任何限制述呐。Gatsby站點(diǎn)是完全功能的React應(yīng)用程序，因此您可以創(chuàng)建高質(zhì)量的動態(tài)Web應(yīng)用程序蕉毯，從博客到電子商務(wù)網(wǎng)站再到用戶儀表板市埋。
選擇您的渲染選項(xiàng)。除了靜態(tài)站點(diǎn)生成（SSG）之外恕刘，您還可以根據(jù)頁面選擇替代渲染選項(xiàng)缤谎，即延遲靜態(tài)生成（DSG）和服務(wù)器端渲染（SSR）。這種粒度控制使您能夠在不犧牲一個方面的情況下優(yōu)化性能和生產(chǎn)力褐着。
性能已經(jīng)內(nèi)置坷澡。默認(rèn)情況下通過性能審核。Gatsby自動進(jìn)行代碼拆分含蓉、圖像優(yōu)化频敛、內(nèi)聯(lián)關(guān)鍵樣式、懶加載馅扣、預(yù)取資源等操作斟赚，以確保您的站點(diǎn)快速運(yùn)行，無需手動調(diào)整差油。
為每個站點(diǎn)使用現(xiàn)代技術(shù)棧拗军。無論數(shù)據(jù)來自何處，Gatsby站點(diǎn)都是使用React和GraphQL構(gòu)建的蓄喇。為您和您的團(tuán)隊(duì)構(gòu)建統(tǒng)一的工作流程发侵，無論數(shù)據(jù)來自相同的后端還是不同的后端。
以分母為單位大規(guī)模托管妆偏。Gatsby站點(diǎn)不需要服務(wù)器刃鳄，因此您可以將整個站點(diǎn)托管在CDN上，成本僅為服務(wù)器渲染站點(diǎn)的一小部分钱骂。許多Gatsby站點(diǎn)可以完全免費(fèi)托管在Gatsby Cloud和其他類似服務(wù)上叔锐。
在任何地方使用Gatsby的集中式數(shù)據(jù)層挪鹏。使用Gatsby的Valhalla內(nèi)容中心，您可以將Gatsby的數(shù)據(jù)層引入任何項(xiàng)目中愉烙。通過統(tǒng)一的GraphQL API訪問它狰住，用于構(gòu)建內(nèi)容站點(diǎn)、電子商務(wù)平臺以及原生和Web應(yīng)用程序齿梁。
學(xué)習(xí)如何在您的下一個項(xiàng)目中使用Gatsby催植。
?? 在5分鐘內(nèi)在本地開始使用Gatsby
您可以通過以下四個步驟在本地開發(fā)環(huán)境上快速啟動并運(yùn)行新的Gatsby站點(diǎn)：
初始化一個新項(xiàng)目。
這里需要提前安裝 npm.
npm init gatsby
給它命名為"My Gatsby Site"勺择。
配置選項(xiàng)：
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)
以開發(fā)模式啟動站點(diǎn)创南。
然后，轉(zhuǎn)到您新站點(diǎn)的目錄并啟動它：
cd my-gatsby-site/
npm run develop
打開源代碼并開始編輯省核！
您的站點(diǎn)現(xiàn)在正在 http://localhost:8000 上運(yùn)行稿辙。
在您選擇的代碼編輯器中打開my-gatsby-site目錄并編輯src/pages/index.js。
保存您的更改气忠，瀏覽器將實(shí)時更新邻储！
在這一點(diǎn)上，您已經(jīng)擁有一個完全功能的Gatsby網(wǎng)站旧噪。有關(guān)如何自定義Gatsby站點(diǎn)的更多信息吨娜，請參閱我們的插件和官方教程。
