你想要搭建一個既經濟實惠、高性能、可擴展且安全的網站，而又無需管理繁瑣後台的工作和懂編碼技術嗎？
今天，我將分享一個高性價比的解決方案，幫助你在微軟 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
7. 總結
恭喜！
在這篇文章中，你已經學會了如何在 Azure Static App靜態應用上使用 Hugo 構建一個高性能且安全的網站，而且甚至不需要進行管理工作。 此外，你還了解到如何輕鬆地與 CI/CD 整合，以提升你的生產力。
如果你想快速構建一個網站，這篇文章將是一個很好的參考和開始。
如果你認為這篇文章有益，請通過👏這篇文章或追蹤我們來表達您的支持，以便在未來獲得最新的教程。
感謝您的閱讀！
原文發佈於 Game Tech Tutorial
