這個網站的誕生

把網站的開發筆記放在這個網站本身，
這是個機生蛋、蛋生雞的問題。

[這個網站的誕生: 01] 建立一個免費的 vm

如何建立一個免費的 vm 根據 google cloud 的說明 https://cloud.google.com/free?hl=en 滿足以下條件的 vm 是可以不用收錢的 1 non-preemptible e2-micro VM instance per month in one of the following US regions: Oregon: us-west1 Iowa: us-central1 South Carolina: us-east1 30 GB-months standard persistent disk 1 GB of outbound data transfer from North America to all region destinations (excluding China and Australia) per month 因此等等在建立 vm 時，按照上面的條件建立，並且要注意的是建立兩個以上的 vm 還是要收錢的，免費的只有第一個建立 vm 步驟首先你會先需要建立一個 google cloud 帳號在 compute engin 中，點選上方的 “Create Instance” ...

[這個網站的誕生: 02] 在 vm 上建立 nginx server

取得 domain 架設網站需要先註冊一個 domain, 這裡我使用的是 Cloudflare，註冊好一個 domain 之後，在 DNS > Records 的地方新增一個 Record Type: A name: yamatrail.com IPv4 Address: 填入 vm 的 IP (在 google cloud 上取得) 這會告訴他當其他人在瀏覽器中輸入 yamatrail.com 時，會導到我們先前在 google cloud 上所建立的 vm 在 Cloudflare 產生憑證登入您的 Cloudflare 儀表板，選擇 yamatrail.com。點擊左側選單的 SSL/TLS，然後選擇 Origin Server (源伺服器) 子分頁。點擊「Create Certificate」按鈕。保持預設選項（私鑰類型 RSA，憑證有效期 15 年），直接點擊最下方的「Create」。這是最關鍵的一步：Cloudflare 會顯示兩個大框框的文字，分別是 Origin Certificate 和 Private Key。請立刻將這兩段文字完整複製出來，並分別儲存到您本地筆電的兩個純文字檔案中：將 Origin Certificate 的內容存為 yamatrail.com.pem。將 Private Key 的內容存為 yamatrail.com.key。注意：Private Key 只會顯示這一次，關閉頁面後就再也看不到了！之後就可以在 vm 上安裝並設定 nginx 了，在這之前可以先檢查 vm 的設定是否有允許 HTTP 及 HTTPS 連線 ...

[這個網站的誕生: 03] 使用 Hugo 產生網站

當我們設定好 vm 之後，先回到我們工作用的電腦，以我自己來說，這會是我的筆電。我們的網站編輯與開發都會在這台筆電上，下一篇文章才會說明如何把網站內容部署到 vm 中，總之，這篇文章的內容都在個人的筆電（或 PC）上操作。安裝套件 sudo apt update && sudo apt upgrade -y sudo apt install nginx git -y wget https://github.com/gohugoio/hugo/releases/download/v0.146.0/hugo_extended_0.146.0_linux-amd64.deb sudo dpkg -i hugo_extended_0.146.0_linux-amd64.deb hugo version 在筆電上先使用 hugo 建立一個 repo 出來，並且使用 git 做版控，然後推到自己的 github 上 hugo new site yamatrail-site cd yamatrail-site git init git add . git commit -m "Init commit" 使用這個指令可以新增一篇文章: hugo new content posts/hello-world.md vim content/posts/hello-world.md 設定 theme 這裡可先在 Hugo Themes 看看，再決定自己要用的主題，我自己用的是 PaperMod ...

[這個網站的誕生: 04] Github Actions 建立自動部署

建立網站部署流程總流程概覽我這裡的部署流程為：大多數的檔案編輯都在我的筆電上，檔案修改完之後推到 github 上，利用 github action 自動部署到 vm 當中。 ssh key 的準備：在筆電和 VM 之間建立一對專門用於自動化部署的 SSH Key，讓 GitHub Actions 才有權限可以登入 vm 中。設定 GitHub Repo：將 SSH 私鑰和伺服器資訊，以加密的方式儲存在 github repo 中的 Secrets 中。建立 GitHub Actions Workflow：撰寫 .github/workflows/deploy.yaml 設定檔，這會告訴 github 該做些什麼把網站內容放到 vm 中。觸發與驗證：將程式碼 git push 到 GitHub，觸發自動化流程，檢查流程是否正確。階段一：準備工作 - 建立 SSH 信任關係步驟 1：「筆電」上產生一對 SSH Key 在筆電上： # -t ed25519: 使用更現代、更安全的加密演算法 # -C "..." : 註解，方便你辨識這對 Key 的用途 # -f ~/.ssh/hugo_deploy_key: 指定金鑰檔案的路徑與名稱，避免覆蓋你現有的 id_rsa 或其他金鑰 ssh-keygen -t ed25519 -C "GitHub Actions for yamatrail.com" -f ~/.ssh/hugo_deploy_key 執行之後，會在 ~/.ssh/ 中產生公鑰與私鑰 ...