擁有自己的田地

嘗試的樂趣

架設網站的過程不複雜，分成三大段。這整個過程最困擾我的是選擇網站的主題/themes以及修改版面，有的主題預設的功能繁多，下載直接套用，不太需要設定什麼；有的則是風格簡約，那就必須要自行寫程式碼增加一些想要的功能。我選了簡約風格的主題，當然代價就是花心力去寫程式碼。幸好，Chat GPT很懂自己，她寫的程式碼非常管用，我可能有時候問的方式不對，在設定版面的過程走了些彎路，不過，當設定成功那一刻的興奮感也是難以言喻的大。

若要長期經營網站，建議申請一個自己網域。古人說寫文章就像農夫下田耕種一樣，一個拿鋤頭一個拿毛筆，所以又叫筆耕。農夫總是希望擁有自己的田地，現代人也是如此，希望敲著鍵盤產出來的東東可以不用隨著社群媒任意變更的使用者政策起舞，包含強逼安插廣告，所以，自己架設網站，開始在自己的田裡耕種吧！

架站三部曲

一、首先用Hugo架設靜態網站 ⇒

二、接著把原始碼提交到Github ⇒

三、最後由主機託管商Cloudflare部署。

接下來是我在Linux Mint上的操作步驟。

第一部架設hugo網站

1、從終端機用套件管理員下載hugo和git程式

sudo apt install hugo git-all

安裝好之後輸入

hugo version

查看安裝的hugo版本，後面交由主機託管商部署時會用到。至於安裝git，不同Linux發行版或其它作業系統請參閱 git安裝說明

2、建立hugo網站的根目錄

可以在任何一個目錄底下設立hugo的根目錄並命名之，我在~/底下以my_website為名稱建立hugo根目錄。建立後所有的原始碼、設定檔、文章及一切所需要的檔案都會放在這裡。

在~/目錄底下輸入

hugo new site my_website

3、進入根目錄後初始化git儲存庫，為了後面推送到Github

cd my_website

git init

此時my_website裡會生成一個隱藏目錄 .git，終端機的路徑後面會出現帶一個小圓點的master

4、安裝網站的主題

按照步聚安裝 Diary主題。還要設定根目錄下的hugo.toml、在archetypes目錄下的deflaut.md加入文章的front matter…等等，網頁內有步驟。

5、建立第一篇文章

hugo會從content/posts/這目錄裡抓文章，所以我們要把文章新增到這目錄底下。

可以寫一篇文章就建立一個目錄，用文章標題來命名目錄，目錄裡的檔案一律叫index.md，如此做可以方便以後整理。我以寫程式常用的示範語helloworld當作第一篇文章的標題。

hugo new post/helloworld/index.md

hugo用 Markdown語法寫文章，我用Typora文字編輯器來寫。話說，最後一個免費的版本為 v0.11.18

typora

(Typora首頁)

6、在本機預覽hugo網站

在推送上Github之前先看hugo生成的靜態網站是什麼樣子，輸入

hugo server

若成功生成的話會出現http://localhost:1313，按下ctrl+滑鼠左鍵即可開啟瀏覽器預覽網頁。以後若因為修改頁面而設定錯誤，終端機也會告訴你哪個檔案的第幾行有問題，這時，就多問問AI找答案吧。

若輸入hugo則會建立HTML，根目錄下會生成一個public/資料夾

第二部把網站原始碼推送到Github

如此做之目的是為了讓主機託管商可以從Github的儲存庫拉取原始碼並部署到全球。

由於Github clone儲存庫的方式改變了，現在必須用SSH clone Github的儲存庫。所以，我們要先在 Github 申請一個帳號並且

1、先打一支SSH金鑰出來連結Github

a 安裝OpenSSH和Git套件

sudo apt install openssh-client openssh-server git

b 設定全域本機聯絡資訊，執行後會在~/.ssh/id_rsa.pub產生SSH金鑰，用此來連結Github

git config --global user.name "名字"
git config --global user.email "email"

c 查看並複製金鑰內容。用cat指令瞄一下內容

輸入

cat ~/.ssh/id_ed25519.pub

會出現ssh-keygen -t ed25519 -... "email"。在email之前的一長串字母即是ED25519演算法生成的金鑰。

d 到Github網站右上方的帳戶頭像內點選按鈕setting，接著點選在頁面左側的按鈕SSH and GPG keys、再點選綠色的按鈕New SSH key。然後出現新的頁面，在上面title櫚位任意為金鑰取名，在下面把剛剛複製那一長串金鑰貼上key欄位，最後按下方的按鈕Add SSH key就完成了！設定好之後就能用SSH來clone儲存庫，也能夠push & pull了。

2、在Github設一個私人(private)的儲存庫

a 我儲存庫的名字因網站名稱的關係取hugo，可以隨意取，什麼內容都不要加入。

github repository

b 複製HTTPS儲存庫網址https://github.com/帳號名稱/儲存庫名稱.git

c 改變目錄到hugo網站的根目錄，將遠端Git儲存庫設定為剛建立的Github儲存庫。執行

cd my_website

git remote add origin "網址"

3、將hugo網站根目錄的檔案推送至剛建立的Github儲存庫，輸入

git add -A

git commit -m "網站更新"

git push -u origin main

以後在網站根目錄/contents/posts/新增目錄及Markdown檔案就可撰寫文章了，寫完再推送到Gitbub儲存庫，Cloudflare就會自動拉取了。

4、寫一鍵推送到Github的shell Script

為了省事，我請Chat GPT幫我寫一個sh腳本，讓我只要執行一個檔案就可以同時下好幾個指令。Chat GPT最懂自己了！她還建議我把腳本命名為deploy.sh，內容如下：

#!/bin/bash
# 自動部署 Hugo 網站到 GitHub，並由 Cloudflare Pages 自動部署

# 切換到網站根目錄（保險起見）
cd "$(dirname "$0")"

# 檢查是否為 Git 倉庫
if [ ! -d ".git" ]; then
  echo "❌ 這個資料夾不是 Git 倉庫，請先初始化：git init 並設定遠端倉庫"
  exit 1
fi

# 確認目前是在 main 分支
current_branch=$(git symbolic-ref --short HEAD)
if [ "$current_branch" != "main" ]; then
  echo "⚠️ 目前不在 main 分支，而是 $current_branch"
  echo "→ 若你要部署到 Cloudflare，請切換回 main：git checkout main"
  exit 1
fi

# 檢查是否有任何變更
if [[ -n $(git status --porcelain) ]]; then
  now=$(date +"%Y-%m-%d %H:%M:%S")
  commit_msg="自動部署：$now"

  echo "🔍 偵測到變更，準備提交..."
  git add .
git commit -m "$commit_msg"
  git push origin main

  echo "✅ 成功推送到 GitHub main 分支！Cloudflare Pages 將自動部署最新內容。"
else
  echo "✅ 沒有任何變更，跳過提交與推送。"
fi

把deply.sh檔放在根目錄，下次我寫完文章或設定好版面要推送網站原始碼到Github時，只要輸入./deploy.sh就可以一鍵完成。