如何使用 Hugo 和 Azure 搭建高效能且低成本的網站？

Eric Wei

發佈於遊戲技術部落格

2023/11/18閱讀時間約 7 分鐘

你想要搭建一個既經濟實惠、高性能、可擴展且安全的網站，而又無需管理繁瑣後台的工作和懂編碼技術嗎？

今天，我將分享一個高性價比的解決方案，幫助你在微軟 Azure Static App靜態應用的服務上，使用 Hugo 構建一個高性能且安全的網站。

最棒的是什麼？

你甚至不需要了解任何編程知識，只需懂得如何使用 Markdown 在編輯器中創建頁面。

之前，我在 AWS 的 Lightsail 上創建了一個高可用性的 WordPress 網站。

然而，我發現要維持 WordPress 的高安全性需要持續的關注和額外的後台工作。

特別是，WordPress 的漏洞插件通常成為駭客入侵您網站的後門。

後來，我發現了 Hugo，可以用來構建靜態網站，甚至可以在幾分鐘內輕鬆地托管靜態網站在 Azure Static App靜態應用上，且不需要再擔心網站安全和效能的問題。

當然，您可以使用任何框架，如 Gatsby、Ghost、Hugo、Jekyll 來產生和部署靜態網頁到 Azure Static App靜態應用。

現在，你甚至可以利用 200 美元的免費信用額度，架設免費的網站。

讓我們開始吧。

內容大綱

介紹 Hugo 和 Azure 靜態網頁應用
需要的設定條件
使用 Hugo 創建靜態網站
設置 Azure 靜態網頁應用
使用 GitHub Action的 CI/CD 進行測試和部署
小秘訣
總結

1.介紹 Hugo 和 Azure 靜態網頁應用

Hugo：一個快速且現代的靜態網站生成器，用 Go 語言編寫，以其建立靜態網站的速度和效率著稱。

你只需了解 Markdown 格式，就能在不需任何 HTML、JavaScript 或 CSS 網頁編程語言知識的情況下創建體面的網頁。

Azure 靜態網頁應用：由 Microsoft Azure 提供的一項服務，用於托管靜態內容，如 HTML、CSS、JavaScript 和圖片。它與 GitHub 和 Azure DevOps 整合，用於 CI/CD 管道。

不要害怕靜態內容。你需要做的是在 Hugo 中運行單一命令行以構建靜態頁面，並將它們上傳到 Azure 靜態應用。

當然，這個過程可以自動啟動且整合於CI/CD 管道自動化，當你的Github Repo（代碼

）有任何推送事件時，會自動部署。

2.需要的設定條件

你要有

了解Markdown 和 Github 的基本知識。
一個 GitHub 和 Azure 開發者帳號。

3. 使用 Hugo 創建靜態網站

安裝 Hugo

如果你使用 macOS 並且使用 Homebrew，你可以通過以下方式安裝 Hugo

brew install hugo

首先，創建你的新 Hugo 網站。

//創建 Hugo 示例網站

hugo new site demo-website// Goto hugo example site

cd demo-website

設置主題

git init

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/anankeecho theme = \"ananke\" >> config.toml

新增頁面

hugo new posts/my-first-post.md

啟動 Hugo 服務器

你可以在以下位置測試並查看你的頁面

hugo server -D// Open your page

http://localhost:1313/4. Customizing Your Site

Tips:

hugo server 是一個用於建立網站和生成靜態內容的命令，方便你本地測試。
如果你想在本地測試聯盟連結或廣告，你可以執行。

// This command can simulate the production usage

hugo serve -e production

4. 設置 Azure 靜態網頁應用

一旦你的 Hugo 網站準備好了，你需要將你的網站上傳到 Github。
然後登錄到 Azure → 創建一個新的靜態網頁應用 → 連接你的 GitHub 庫和分支。然後點擊審查 + 創建

5. 使用 GitHub Action的 CI/CD 進行測試和部署

你可以編輯一個頁面並將這個更改推送到 Github。

然後 Github → 在Action 標籤下，你可以檢查是否完成了構建和部署工作。

如果它顯示一個綠色圖標，這意味著部署工作成功。

然後你可以前往 Azure 靜態應用 → 點選Visit your site

6.小秘訣

Azure Static App靜態應提供許多功能，幫助您節省時間。

自定義域名：您可以在 Azure 靜態網頁應用設置中輕鬆添加自定義域名。
SSL 證書：Azure 為自定義域名提供免費的 SSL 證書。
成本管理：在 Azure 門戶中監控您的使用情況，確保您保持在預算範圍內。
與 AWS Amplify 相比，Azure Static App靜態應用比 AWS Amplify 更為簡單，因為在設置網站時不會遇到奇怪的問題而卡住您。

Hugo

您可以輕鬆找到或購買合適的模板來構建您的遊戲促銷或個人網站。
要設置其他常見功能，如 Google Analytics 和評論（https://disqus.com）
您可以編輯 ./<您的 Hugo 代碼>/config/_default/params.toml 以啟用它們。

vim ./<Your Hugo Code>/config/_default/params.toml

# google analytics

googleAnalytics = "<Replace Google Analytics ID>" # example: UA-123-45, for more info, read the article https://support.google.com/analytics/answer/1008080?hl=en

# disqus short name

disqusShortname = "<Replace disqus ID>" # get your shortname form here : https://disqus.com

# Create Robots.txt for SEO

enableRobotsTXT = false