GatsbyJS 入門(二):如何以 Starter 快速架構網站

上次我們提到 GatsbyJS,它是一個可以獲取任意數據,並生成靜態化網站的系統。這一次,就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧

GatsbyJS 入門(一):打造開箱即用的現代化前端網站

前提

  1. Git
  2. Node:從 8.5.0 或更高版本開始的任何 8.x 版本

從零開始啟動項目

GatsbyJS 提供了一個命令行工具,我們可以使用它來快速啟動項目。

Imgur
Imgur

gatsby new 命令的默認 Starter 為:

https://github.com/gatsbyjs/gatsby-starter-default

Imgur
Imgur

如果你想體驗我的博客風格的話,你也可以選擇使用我的博客的 Starter:

https://github.com/calpa/gatsby-starter-calpa-blog

運行方法

  1. 安裝 gatsby-cli npm install —global gatsby-cli
  2. 命令來建立 Gatsby 的項目文件夾 gatsby new my-awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
  3. 開始跑工程 cd my-awesome-blog npm start 你的網站會在 localhost:8000 裡面運行。
  4. 開始寫代碼 你可以使用任意編輯器來編輯代碼,如果你修改 src/pages/*.js,例如 404.js。

保存之後你就可以看到你的瀏覽器是實時同步的。

如果想要透過 GraphQL 解析數據層,你也可以訪問 localhost:8000/___graphql

Imgur
Imgur

值得一提的是:

在運行 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
  1. /data : 放置網站的數據,例如配置 (config), 頁面頂部大圖 (header), 文章 (posts) 這裡會有兩種配置方法, 一:是在同一個項目裡面開發頁面框架,修改文章數據。 二:是使用遠端數據庫,例如 Contentful 來獲取數據,本地不作數據儲存。
  2. /data/template: 網站數據模板,你可以參考如何本地的默認配置,然後進行修改。
  3. /scripts: 所需要運行的非 gatsby 腳本
  4. /src: 所有你在前端看到的代碼,例如頁面模板,展示層
  5. /gatsby: 專門放置 Gatsby 構建代碼,已細分為獲取數據,構建,部署,瀏覽器運行的不同生命週期。
  6. /static: 你可以把需要直接複製貼上的檔案放到這個目錄下,GatsbyJS 會調用 fs.copy 來直接複製貼上到 public 目錄
  7. /public: GatsbyJS 生成的靜態網站文件夾

系統是使用模板式的設計,模板為首頁的列表設計,和文章的內文設計,他們位於 /src/templates/page.js 以及 /src/templates/blog-post.js

部署項目

如果你對於項目感到滿意的話,那麼你可以運行 gatsby build,GatsbyJS 會優化網站,並產生 HTML 和每個路由對應的 JavaScript 代碼檔案。

你可以使用 gatsby serve 來啟動一個本地服務器,來瀏覽生成的網站效果。

後記

這個系列應該會寫十篇左右,每週出一篇。

GatsbyJS 入門(一):打造開箱即用的現代化前端網站

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。