快打造靜態網站的利器？Gatsby！

Image by Johannes Plenio from Pixabay

前言

在這個科技日新月異的時代下，製作網頁的工具也是隨著時間演進下，不斷推陳出新。如果你曾經對於每天透過瀏覽器打開的網頁有一點的好奇心，會不會想要嘗試做一個自己專屬的網站呢？這時候我們就可以享受工具進步所帶來的效益了呢！這不是火箭科學，要進入無所不在的網頁世界，入門僅需要些許的耐心。讓我們以靜態網頁產生器為自己做出第一個網站吧！

靜態網頁

何謂靜態網頁？可以理解為就像是書籍或雜誌一樣，一但從印刷廠出版了，內容就不太會更動。當我們這樣比喻時，我們所寫的網頁檔案（印刷品）一但被放到主機上（送出印刷廠）內容幾乎不會變了，除非印刷廠再次印製新的內容，再次派送刊物，讀者（瀏覽網頁的人）才會獲得新的內容。

動態網頁

那動態網頁呢？就像不是在聽預錄好的專輯（預製的網頁檔），而是現場表演。只是背後根據使用者的行為，負責動態產生內容的是一整組應用程式和系統，有可能會有更多的資料庫和服務在背後運行，並不斷動態即時產生新的內容。

GatsbyJS

GatsbyJS 是一套靜態網站生成器，主要使用程式語言 JavaScript 的開源專案。前端框架則使用了時下熱門的 ReactJS。靜態網站生成器的工具通常會提供樣版設置的地方，可以快下載樣板後速進行套版。同時也會在本機運行一個伺服器即時對網頁的變動，編譯後反應內容讓我們可以看到變動後的內容。在有了以上基本概念後，讓我們開始從零建立我們的第一個靜態網頁吧。

開發環境準備

本文將以 MacOS 舉例，如果使用的是其他作業系統，只要確定有安裝到所需軟體即可。

首先我們會需要 Xcode 這是蘋果官方提供的程式開發套件，裡面會有編譯程式的相關必要工具。可以在蘋果官方的 App Store 找到並下載安裝它。接著我們將使用 Mac 上的套件管理工具 Homebrew 下載相關工具以及 GatsbyJS。

• 安裝 Homebrew

請打開 Mac 內建的應用程式終端機(Terminal)並輸入下列指令下載並安裝 Homebrew :

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 安裝 Node

Node 可以提供環境執行 Javascript 而無需透過瀏覽器，而 Gastby 是透過 Node 的打造的，所以我們需要先透過 Homebrew 安裝 Node。請在終端機輸入下列指令安裝：

brew install node

• 安裝 Gatsby

當我們安裝好 Node 後，我們將使用 Node 自帶的套件管理工具 npm (Node Package Manager) 來安裝 Gatspy ，請在終端機輸入下列指令：

npm install -g gatsby-cli

使用 npm install 並給予參數 -g (global) 時，npm 會將套件安裝在 npm 預設的全域的路徑底下，而不是該專案的資料夾 node_modules 裡。

建立 Gatsby 專案

我們先選擇使用官方提供的 Hello World 啟動檔案，它會提供 Gatsby 所需必要的相關檔案。使用 Gatsby 提供的指令建立專案：

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

建立完成後，在終端機使用指令進入所建立的資料夾中：

cd hello-world

然後我們可以透過啟動本幾伺服器的指令來啟動伺服器：

gatsby develop

沒意外的話，這時候在瀏覽器中輸入網址 http://localhost:8000/ 即可預覽這個專案透過 Gatsby 所建立的靜態網頁。此時左上角網頁應該會顯示 Hello World!

到這一步驟，我們確定有辦法透過 Gatsby Starter 的下載，然後透過運行伺服器去產生最終我們要的靜態網頁並在瀏覽器正常顯示。

使用部落格的 Starter

如果今天我們想要快速建立一個部落格呢？比較快的方式是使用官方網站上其他人做好的啟動包。我們可以在 Gatsby Starters 上找到想要的啟動包。我們以 Gatsby Starter Blog 為例。在終端機中回到你想下載該啟動包的位置然後輸入：

gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

完成後我們輸入 cd gatsby-starter-blog && gatsby develop 進入資料夾且運行伺服器，然後到瀏覽器預覽。

專案結構

在 Gatsby 專案架構下我們最會有特定的資料夾放置相關的檔案。在進行指令 gatsby develop 它會去依照資料夾的內容去編譯並輸出瀏覽器可讀取的三種檔案，分別是：HTML、Javascript 和 CSS。也會將你的網站所需要的相關資源譬如圖片放置進最終的輸出資料夾，提供網頁去讀取。通常資料夾結構會長得像以下：

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

• .cache：隱藏資料夾是 Gatsby 自動生成的快取，通常不會去修改內容。
• plugins：這是放置插件的地方，可以從 npm 安裝相關支援 Gatsby 的插件。
• public：是使用指令 gatsby build 後會將網站最終的輸出檔放置於此。
• src：這是 Source Code 的縮寫，放置主要撰寫網頁內容的地方。
  • pages：在這放置的 jsx 檔在最後輸出時會變成網頁網址的一個頁面，例如 about.js 在輸出網頁後可以透過 你的網域名稱/about 路徑進入這個頁面。
  • templates：這裡用來放置模板，例如部落格的每篇文章都使用同一個模板，適合放入於此。
• static：用來放置靜態資源例如圖片，在這個資料夾在輸出時不會被更動，而是直接會進入 public。

打包與部屬網站

在熟悉 ReactJS 基本的語法後，我們便有能力更動從 Starter 提供的樣板來改寫出我們個人化的網站內容。更進階的部分，研究如何使用已經被創造出的插件以實現某些功能，節省開發網站的時間。

假設我們已經撰寫網站內容完畢想要部署至某個空間時，我們需要在終端機使用指令：

gatsby build

這個指令會將網站所有內容打包輸出到 public 資料夾。部署方式是將資料夾的內容上傳到某個網頁服務空間。當瀏覽器透過網址訪問空間便能瀏覽網站。Gatsby 也提供了另一個指令讓我們在本機瀏覽部署版本的網頁內容：

gatsby serve

透過在瀏覽器網址輸入 http://localhost:9000/ 便可以瀏覽 Gatsby 打包後的網站。

總結

在技術的進步下，我們透過 Gatsby 用熱門的前端框架 ReactJS 撰寫網站，並且打包在本機運行伺服器並開發除錯。Gatsby 也有插件可以整合自動部署，以達到開發、打包、測試、部署的流程整合。如果能運用生態系的資源豐富度，我們也可以更快速且更有效率的開發靜態網頁。