在 Netlify 上部署 GatsbyJS 專案

目錄

1. 開始之前
2. 新增 GatsbyJS 專案
3. 部署開始

開始之前

在開始之前，以下是我的開發環境。

開發環境

• Windows 10
• 安裝 Node.js v12.19.0
• 安裝 Git
• 擁有 Github 帳戶
• 擁有 Netlify 帳戶

新增 GatsbyJS 專案

首先需要 Gatsby CLI 工具以方便快速開發 GatsbyJS 專案，以下透過 npm 在全域環境安裝 Gatsby CLI 工具。

npm install -g gatsby-cli

安裝好 Gatsby CLI 工具後，執行以下指令來新增一個名為 deploy-gatsby-to-netlify 的專案。

接著的 URL 的用途是指定以 gatsby-starter-hello-world 這個 Github 版本庫的程式碼為起始專案。

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

如果不指定起始專案，GatsbyJS 會自動使用預設專案作為起始專案。

執行完成後，可以透過以下指令在 localhost:8000 上看到網頁。

cd deploy-gatsby-to-netlify
gatsby develop

Hello World 起始專案

預設起始專案

部署開始

開始部署之前，Netlify 有提供兩個部署方法:

• 透過 Git 版本庫來設置
• 上傳網頁專案的資料夾

這裡以透過 Git 版本庫來部署。

首先，在 Github 新增一個版本庫，並且命名為 deploy-gatsby-to-netlify，然後將 deploy-gatsby-to-netlify 專案 Push 上去。

接著登入 Netlify，在 Overview 頁面點選 New site from Git。

點選 Github。

這時候會彈出一個視窗要求登入 Github，登入完成後在原本網頁的下方選取要部署的版本庫。

如果沒有看到想要部署的版本庫，可以依照下述的方式設定：

點選最下方的 Configure the Netlify app on GitHub 連結，會彈出一個視窗要求安裝 Netlify 到 Github，點選要安裝的帳戶。

安裝後的下一個畫面，到接近最下方的 Repository access 設定 Netlify 對版本庫的存取權限，可以依個人需求選擇授權存取全部的版本庫，或是只授權存取指定的版本庫。

在最後一個頁面的下方點選 Deploy Site 便完成部署了。👏👏👏

在這個頁面可以指定 Netlify 要監控哪一個 Git 分支，也可以設定建置指令和指定公開目錄的路徑，另外在 Show Advanced 裡可以設定環境變數供專案存取。（當然這些也可以事後在 Netlify 裡更改。）

部署後畫面會被導向到專案的概觀頁面，這時候會看到專案正在被建置。

在專案名稱下方可以看到一個連結，以我的為例是 loving-hypatia-19da8f.netlify.app，當建置完成時，點擊下去就可以看到網頁成功部署並且公開到網路上了。🎉🎉🎉

Netlify 會隨機產生域名，所以每個人的網址會不一樣喔！