前言 上次我們提到 GatsbyJS,它是一個可以獲取任意數據,並生成靜態化網站的系統。這一次,就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧。 前提- Git
- Node:從 8.5.0 或更高版本開始的任何 8.x 版本
從零開始啟動項目GatsbyJS 提供了一個命令行工具,我們可以使用它來快速啟動項目。 gatsby new 命令的默認 Starter 為: 如果你想體驗我的博客風格的話,你也可以選擇使用我的博客的 Starter: 運行方法保存之後你就可以看到你的瀏覽器是實時同步的。 值得一提的是: 在運行 gatsbyjs-starter-calpa-blog 的時候,它會自動打開 Webpack Bundle Analyser,路徑是 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 來啟動一個本地服務器,來瀏覽生成的網站效果。
|