一、Gatsby 是什么马澈？
可建立一個訪問速度極快的靜態(tài)網(wǎng)站。
- 輕松發(fā)布：只需執(zhí)行
gatsby build命令弄息，所有網(wǎng)站數(shù)據(jù)都被打包到 public 文件夾中痊班，拷貝此文件夾到 nginx 即可完成網(wǎng)站發(fā)布。 - 不中斷：網(wǎng)站更新也只是文件覆蓋操作摹量，不會因更新而中斷服務(wù)涤伐。
- 速度快：網(wǎng)站所需數(shù)據(jù)在編譯期就獲取、壓縮缨称、優(yōu)化完成凝果，無需在打開網(wǎng)頁時再花費(fèi)時間從第三方獲取數(shù)據(jù)，所以網(wǎng)站的訪問速度非衬谰。快器净。
- 完善的插件庫生態(tài)：2500多個插件可免費(fèi)使用，極大縮短網(wǎng)站開發(fā)周期当凡。
使用場景
- 如果你有一堆用 Markdown 編輯的文章山害，想要發(fā)布到網(wǎng)上，又不想浪費(fèi)時間在編輯排版上沿量，那么用 Gatsby 生成一個博客網(wǎng)站浪慌，是一個非常不錯的解決方案。
二朴则、Gatsby 簡介
1权纤、圖解系統(tǒng)結(jié)構(gòu)
數(shù)據(jù)統(tǒng)一：從 不同數(shù)據(jù)源(下圖中 CMS、Private API 等) 獲取數(shù)據(jù)乌妒，形成統(tǒng)一的數(shù)據(jù)結(jié)構(gòu)（ GraphQL Data Layer）
數(shù)據(jù)查詢：通過 GraphQL 查詢 GraphQL Data Layer 中的數(shù)據(jù)
展示數(shù)據(jù)：通過React 編寫HTML頁面汹想，把數(shù)據(jù)展示出來。當(dāng)然也可以找一個UI庫撤蚊，讓頁面更美觀欧宜。
2、Gatsby 項目文件結(jié)構(gòu)
3席镀、官方demo
展示 Gatsby 的各種功能怎么使用。詳情夏漱，看這里豪诲！
4、網(wǎng)站的三種生成方式
純靜態(tài)網(wǎng)站挂绰；
延遲生成的靜態(tài)網(wǎng)站屎篱；
純服務(wù)端動態(tài)生成。
三、安裝 Gatsby 并新建網(wǎng)站
Gatsby 是在 Node.js 的基礎(chǔ)上建立践付，使用 Gatsby 之前必須先安裝 Node.js 且版本 ≥ 12.13秦士。使用 Gatsby CLI 工具，三句命令就可以新建一個靜態(tài)網(wǎng)站永高。詳情步驟隧土，看這里！
四命爬、怎么新增網(wǎng)站頁面曹傀？
瀏覽器打開的URL是怎么跟項目中的代碼頁面 (js文件) 對應(yīng)起來的？這種 URL 與 代碼文件 之間的對應(yīng)關(guān)系就稱之為頁面路由饲宛。那么Gatsby 中怎么新建代碼頁面皆愉？其頁面路由又有哪些規(guī)則？
1艇抠、新建頁面及其路由
2练链、用 markdown 文檔作為數(shù)據(jù)源來建立網(wǎng)站
3媒鼓、用 strapi(CMS) 作為數(shù)據(jù)源來建立網(wǎng)站
4绿鸣、使用 MDX 文件新增頁面
- MDX文件是指 在 markdown 文件中直接插入 jsx 代碼 的混合文件疚沐，怎么用在Gatsby中？詳細(xì)步驟潮模，看這里亮蛔！
五、其他重要功能
1擎厢、Gatsby 怎么加載顯示圖片究流？
2芬探、怎么跳轉(zhuǎn)到其他頁面神得？
3哩簿、怎么使用 css ？
4、怎么安裝和使用插件别智？
5亿遂、怎么查詢數(shù)據(jù)層數(shù)據(jù)浓若？
6、網(wǎng)站的中文全文搜索功能是越？
7倚评、怎么使用自定義字體浦徊？
8盔性、怎樣給網(wǎng)站根目錄增加前綴？
當(dāng)只能用 http://www.example.com/blog 這個域名呢岗，而不能用 http://www.example.com 來發(fā)布網(wǎng)站時冕香，Gatsby 項目中應(yīng)該怎么設(shè)置？詳情后豫，看這里悉尾！
六、SEO
1挫酿、網(wǎng)站流量統(tǒng)計
哪些人訪問了網(wǎng)站构眯？訪問了那些網(wǎng)站哪些頁面？訪問者來自于哪個省市區(qū)早龟？年齡多大惫霸？這些問題猫缭，可通過百度統(tǒng)計這個插件完成。詳細(xì)步驟它褪，看這里饵骨！
2、sitemap.xml
為gatsby的靜態(tài)網(wǎng)站增加sitemap.xml茫打，方便搜索引擎收錄居触、更新。詳細(xì)步驟老赤，看這里轮洋！
3、robots.txt
使用robots.txt 文件抬旺，禁止網(wǎng)絡(luò)爬蟲訪問某些頁面弊予。詳細(xì)步驟，看這里开财！
4汉柒、head
HTML中head部分的數(shù)據(jù)對于 SEO 極其重要，用 bolog 模板生成的 Gatsby 項目责鳍，已經(jīng)生成了SEO組件(src/components/seo.js)碾褂，直接使用，完成頁面title历葛、description等設(shè)置正塌。使用了插件 react-helmet。
七恤溶、部署
怎么部署發(fā)布gatsby項目乓诽？
第一步：有一個備案過的域名≈涑蹋可以在阿里云上進(jìn)行域名注冊和備案鸠天；
第二步：需要一個服務(wù)器。同樣也可以在阿里云上購買一個ESC帐姻；
第三步：在阿里云后臺設(shè)置域名解析到第二步的服務(wù)器稠集；
第四步：在服務(wù)器上安裝nginx；
-
第五步：在開發(fā)機(jī)器上編譯 gatsby 項目
gatsby clean gatsby build # 項目目錄下會生成 public 文件夾 第六步：把第五步中 public 文件夾 下所有內(nèi)容拷貝至 第四步中的nginx下卖宠，并設(shè)置好ngingx 配置文件巍杈；
第七步：可以通過域名訪問網(wǎng)站了。
