前言
上次我們提到 GatsbyJS, 它是一個可以獲取任意數據, 並生成靜態化網站的系統. 這一次, 就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧.
GatsbyJS 入門 (一): 打造開箱即用的現代化前端網站
前提
Git
Node: 從 8.5.0 或更高版本開始的任何 8.x 版本
從零開始啟動項目
GatsbyJS 提供了一個命令行工具, 我們可以使用它來快速啟動項目.
gatsby new 命令的默認 Starter 為:
如果你想體驗我的博客風格的話, 你也可以選擇使用我的博客的 Starter:
https://github.com/calpa/gatsby-starter-calpa-blog
運行方法
安裝 gatsby-cli
NPM install -global gatsby-cli
命令來建立 Gatsby 的項目文件夾
gatsby new my-awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
開始跑工程
cd my-awesome-blog NPM start
你的網站會在 http://localhost:8000 裡面運行.
開始寫代碼 你可以使用任意編輯器來編輯代碼, 如果你修改 src/pages/*.JS, 例如 404.JS.
保存之後你就可以看到你的瀏覽器是實時同步的.
如果想要透過 GraphQL 解析數據層, 你也可以訪問 http://localhost:8000/___graphql .
值得一提的是:
在運行 gatsbyjs-starter-calpa-blog 的時候, 它會自動打開 webpack Bundle Analyser, 路徑是 http://127.0.0.1:8888/ . 你可以透過這個打包分析器來閱讀打包代碼的組成部分, 然後進行優化.
GatsbyJS 網站架構
.
├── data
│ └── template
├── gatsby
├── public
├── scripts
├── src
│ ├── API
│ ├── components
│ ├── pages
│ │ ├── guestbook
│ │ └── tags
│ ├── reducers
│ ├── styles
│ └── templates
└── static
└── favicons
/data : 放置網站的數據, 例如配置 (config), 頁面頂部大圖 (header), 文章 (posts) 這裡會有兩種配置方法, 一: 是在同一個項目裡面開發頁面框架, 修改文章數據. 二: 是使用遠端數據庫, 例如 Contentful 來獲取數據, 本地不作數據儲存.
/data/template: 網站數據模板, 你可以參考如何本地的默認配置, 然後進行修改.
/scripts: 所需要運行的非 gatsby 腳本
/src: 所有你在前端看到的代碼, 例如頁面模板, 展示層
/gatsby: 專門放置 Gatsby 構建代碼, 已細分為獲取數據, 構建, 部署, 瀏覽器運行的不同生命週期.
/static: 你可以把需要直接複製貼上的檔案放到這個目錄下, GatsbyJS 會調用 fs.copy 來直接複製貼上到 public 目錄
/public: GatsbyJS 生成的靜態網站文件夾
系統是使用模板式的設計, 模板為首頁的列表設計, 和文章的內文設計, 他們位於 /src/templates/page.JS 以及 /src/templates/blog-post.JS.
部署項目
如果你對於項目感到滿意的話, 那麼你可以運行 gatsby build,GatsbyJS 會優化網站, 並產生 html 和每個路由對應的 JavaScript 代碼檔案.
你可以使用 gatsby serve 來啟動一個本地服務器, 來瀏覽生成的網站效果.
後記
這個系列應該會寫十篇左右, 每週出一篇.
GatsbyJS 入門 (一): 打造開箱即用的現代化前端網站
来源: https://juejin.im/entry/5bf750d751882528c4467483