注意：Gatsby V2版本安裝及使用問題請移步《Gastby V2安裝過程中常見問題》，此文較舊，主要針對V1版Gatsby而介紹
前言
一直以來都是用之前比較流行的靜態網站生成器Hexo加Markdown來更新自己的靜態站博客。偶然的機會，遇到了又一靜態網站生成神器Gatsby ，直接迷上了，根本停不下來，原來靜態網站還可以用react來寫，組件化的思想解放了我們對靜態網站的想象空間，讓我們更新網站的方式直接上了一個檔次。
費話不多說，先上一張用Gatsby制作的靜態網站的效果圖，點我查看在線效果
關於Gatsby
什么是Gatsby? 官方介紹為Blazing-fast static site generator for React(用於React的超快靜態站點生成器)。
不再為web技術落后而頭痛。享受最新Web前端技術的強大功能--React.js，Webpack，現代JavaScript和CSS等等，所有這一切都將啟動並等待您的開始。
使用你自定義的數據。Gatsby豐富的數據插件生態系統允許您使用您想要的數據構建網站 - 來自一個或多個來源：使用GraphQL將數據從無頭CMS，SaaS服務，API，數據庫，文件系統等更直接地導入您的頁面。
輕松發布到互聯網。Gatsby.js是互聯網化的。 你可以不用理會數據庫和服務器的復雜部署，以及昂貴，耗時的設置成本，維護和縮放恐懼。 Gatsby.js將您的網站構建為“靜態”文件，可以輕松部署在數十種服務上。
使您的網站面向未來。不要用過去十年的技術建立一個網站。 網絡的未來是移動的，JavaScript和API - JAMstack。 每個網站是一個Web應用程序，每個Web應用程序是一個網站。 Gatsby.js是你一直在等待的通用JavaScript框架。
靜態漸進式Web應用程序。Gatsby.js是一個靜態PWA（Progressive Web App）生成器。 您可以將代碼和數據分開。 Gatsby只加載關鍵的HTML，CSS，數據和JavaScript，以便您的網站加載盡可能快。 一旦加載，Gatsby預取其他網頁的資源，所以點擊網站感覺非常快。
超越競爭。Gatsby.js建立最快的網站。 不需要等待請求時生成頁面，而是預先生成頁面，並將其提升到全球服務器雲端 - 隨時隨地傳送給用戶，無論他們身在何處。
Gatsby如何工作
無論數據來源如何，Gatsby都可以讓您使用您的數據構建閃電般的網站。 從以前遺留的CMS中解放您的網站，並將飛向未來。
Gatsby上手指南
注意：下面代碼因為結合了React，javascript使用的是ES6，需預裝node.js並會用了npm或者yarn用作依賴包管理，不熟悉的話自行惡補基礎
一、命令行安裝Gatsby開發環境
npm install --global gatsby-cli
二、使用Gatsby開發環境
- 創建一個新的網站項目，命令行定位到相應的目錄，helloworld是自定義的項目名稱。
gatsby new helloworld執行完命令后，目錄下會自動創建了helloworld項目文件夾和相應的項目文件，其目錄結構如下：- - helloworld
- - node_modules
- - public
- - src
- - layouts
- - index.js // 首頁布局
- - index.css
- - pages
- - index.js // 首頁主頁內容
- - page1.js // 內頁1內容
- - page2.js // 內頁2內容
- - static // 所有其他靜態資源如圖片、樣式等都可以放此目錄
- - .gitignore
- - gatsby-browser.js
- - gatsby-config.js
- - gatsby-node.js
- - gatsby-ssr.js
- - LICENSE
- - package.json
- - README.md
- 執行 cd helloworld 定位到當前目錄
- 執行 gatsby develop ，此時Gatsby會自動啟動熱更新后台服務器，地址為: localhost:8000
- 自己可以嘗試修改 src/pages 目錄下的文件，保存后，會馬上熱更新到瀏覽器的頁面上。
- 執行 gatsby build ，此時Gatsby會在 public 目錄下構建生產環境用的優化過的靜態網站所需的一切靜態資源、靜態頁面與js代碼。如果要發布到自己的網站空間上，可以直接把此目錄下面所有東西(除.map為后續的文件名的文件)丟過去自己的空間。如果有用過hexo的朋友們應該會比較熟悉，目錄結構類似。
- 執行 gatsby serve , 此時Gatsby會啟動靜態網頁服務器供你測試剛才“gatsby build”生成的靜態網頁。
（注意：上面步驟默認使用了 gatsby-starter-default 來創作網站應用項目，我們還可以選擇官方提供的 gatsby-starter-blog 和 gatsby-starter-hello-world 或者社區提供的 gatsby-starter-blog-no-styles、gatsby-material-starter、gatsby-typescript-starter、gatsby-starter-bootstrap和gatsby-blog-starter-kit等等豐富的模版來創建新的網站應用項目。點擊查看更多)
Gatsby實戰項目
交流與學習
- 本文作者：Nelson Kuang，別名：Fast Mover 歡迎大家留言及多多指教
- Github地址：https://github.com/hiooyUI/hiooyui.github.io/tree/source
- 版權聲明：歡迎轉載學習 => 請標注信息來源於 http://www.cnblogs.com/fastmover/p/8317339.html