Gatsby上手指南 - 讓你的靜態網站用react來高逼格的寫

注意：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用做依賴包管理，不熟悉的話自行惡補基礎

1、命令行安裝Gatsby開發環境

 npm install --global gatsby-cli 

2、使用Gatsby開發環境

1. 建立一個新的網站項目，命令行定位到相應的目錄，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
2. 執行 cd helloworld 定位到當前目錄
3. 執行  gatsby develop ，此時Gatsby會自動啓動熱更新後臺服務器，地址爲:  localhost:8000 
4. 本身能夠嘗試修改  src/pages  目錄下的文件，保存後，會立刻熱更新到瀏覽器的頁面上。
5. 執行  gatsby build ，此時Gatsby會在 public 目錄下構建生產環境用的優化過的靜態網站所需的一切靜態資源、靜態頁面與js代碼。若是要發佈到本身的網站空間上，能夠直接把此目錄下面全部東西(除.map爲後續的文件名的文件)丟過去本身的空間。若是有用過hexo的朋友們應該會比較熟悉，目錄結構相似。
6. 執行  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實戰項目

A4紙網的開發 [ 在線demo ] [ 源代碼 ]

 

交流與學習

1. 本文做者：Nelson Kuang，別名：Fast Mover  歡迎你們留言及多多指教
2. Github地址：https://github.com/hiooyUI/hiooyui.github.io/tree/source
3. 版權聲明：歡迎轉載學習 => 請標註信息來源於 http://www.cnblogs.com/fastmover/p/8317339.html