在這篇文章中，我將詳細記錄如何從零開始架設一個 Hugo 部落格，並將它部署到 FTP 伺服器上，整個過程包括安裝、配置以及可能會踩雷的部分，讓你少走彎路。

1. 安裝 Hugo 和準備專案

安裝 Hugo

首先，我們需要安裝 Hugo。Hugo 是一個非常簡單且高效的靜態網站生成器，特別適合用來搭建部落格。

  1. 前往 Hugo 官方網站 下載適合你作業系統的版本。
  2. 安裝完畢後，確保 hugo 命令可以在命令提示字元中執行。你可以在終端機中輸入 hugo version 來確認安裝成功。

創建 Hugo 專案

打開命令提示字元並執行以下指令來創建一個新的 Hugo 專案：

hugo new site "G:\yourPath"

注意： 如果專案路徑包含中文或日文，可能會造成一些問題，建議避免使用特殊字符。選擇一個簡單的英文名稱和路徑會比較穩定。

2. 設定 Hugo 配置檔案

在你的 Hugo 專案中，會有一個配置檔案 config.toml，但在我的專案中，我發現的是 hugo.toml。這是常見的錯誤之一。確保你找到並使用正確的配置檔案。

如果你發現你的專案中只有 hugo.toml，那麼它就是 Hugo 的配置檔案。這是我當時遇到的一個小困擾，但解決後一切順利。

配置範例：

baseURL = "yorUrl"
languageCode = "zh-tw"
title = "your-title"
theme = "your-theme"

確保你填寫了正確的 baseURL，這對於網站的部署是非常關鍵的。

3. 建立文章

Hugo 使用簡單的命令來生成文章。例如，你可以使用以下指令創建一篇新的文章：

hugo new posts/hello-world.md

這會在 content/posts 目錄下創建一個 Markdown 檔案，你可以在其中編寫你的文章內容。

4. 設定主題

選擇一個適合的 Hugo 主題，這裡我選擇了 Hugo 官方的主題之一。你可以在 Hugo Themes 找到許多免費的主題，並將它們下載到專案中。

下載完畢後，將主題設定到 config.toml（或 hugo.toml）檔案中的 theme 屬性。

theme = "ananke"

5. 編譯和本地測試

完成配置後，你可以本地預覽網站。在命令提示字元中輸入以下指令來編譯並啟動本地伺服器：

hugo server

這會在 localhost:1313 上啟動一個本地伺服器，並讓你即時查看變更。

6. 部署到 FTP

完成網站設計後，接下來就是把網站上傳到 FTP 伺服器。這是我選擇的方式來部署 Hugo 生成的靜態網站。使用 WinSCP 命令行工具來自動化這個過程非常方便。

安裝 WinSCP 並配置命令行工具

  1. 下載並安裝 WinSCP。
  2. 確保安裝了命令行工具 winscp.com，並將其加入到系統環境變數中。

寫一個批次檔（.bat）

創建一個批次檔來自動將檔案上傳到 FTP 伺服器：

open ftp://your-host@your-username
lcd public  # 這是 Hugo 編譯後的本地資料夾
cd /
put *.* -preservetime  # 上傳所有檔案並保留時間戳
put -resume -r css img js posts  # 遞迴上傳指定資料夾
exit

這個批次檔會將 Hugo 生成的檔案（如 index.html）和資料夾（如 css、img）上傳到 FTP 伺服器。確保你的 lcd 指令指向正確的本地資料夾。

7. 保留舊網站並切換

如果你不想刪除舊網站，可以在上傳之前將舊的 index.html 重新命名為 index_old.html，這樣就能同時保留舊的版本。

mv index.html index_old.html  # Linux 或 macOS 使用的命令，Windows 可以手動重命名

8. 部署與維護

完成上傳後，你的網站就會在 FTP 伺服器上更新了。你可以定期使用批次檔來同步本地變更並將新的文章、圖片等內容上傳。

9. 注意事項

在過程中，以下是我踩到的一些雷區，希望能幫助大家避免相同的問題：

  • config.toml 和 hugo.toml：確保你編輯的是正確的配置檔案，有時候 Hugo 專案會使用不同的命名方式。
  • 路徑包含特殊字符：如果專案路徑包含中文或日文字符，可能會出現一些無法預期的錯誤，最好使用英文路徑。
  • FTP 上傳：在上傳前請先備份舊網站資料，以免覆蓋錯誤。

結語

從零開始搭建一個 Hugo 部落格並上傳到 FTP 伺服器的過程其實並不難，只要依照步驟操作，就能輕鬆完成。不過，記住在配置和上傳的過程中，細心檢查每個步驟，避免踩雷，這樣就能順利架設自己的網站了！

希望這篇文章能對你有所幫助，祝你搭建出美麗的部落格！