摘要
本文將帶您了解如何免費使用 Hugo 建立個人網站，以及其在當今網頁開發中的重要性和應用。 歸納要點:
- Hugo 作為靜態網站生成器,結合 Serverless 架構,如 AWS Lambda @ Edge,顯著提升載入速度與降低運營成本。
- 透過 Hugo 的插件系統,可以輕鬆整合 SEO 工具,如 Schema.org 結構化數據和 AMP 支持,幫助提升網站搜尋排名。
- 利用 Firebase 等無伺服器資料庫,可實現網站的動態內容管理,同時保持快速加載速度。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
- Hugo 是一款快速且高效的靜態網站生成器,適合製作個人網站或部落格。
- 使用 Hugo 建站的流程包括安裝 Hugo、建立站點、配置主題及撰寫文章等步驟。
- 只需在本地編寫 Markdown 文件,就能輕鬆維護日常文章。
- 編譯網站相當簡單,輸入指令後即可產出可供預覽的 HTML 文件。
- 免費平台如 GitHub Pages 可用來發布你的靜態網站,方便分享給他人。
- 整體建站過程是免費且容易上手,非常適合想要擁有個人網站的人。
隨著科技的進步，越來越多人希望擁有屬於自己的個人網站。Hugo 作為一款簡單易用的靜態網站生成器，可以讓我們在短時間內架設出美觀實用的網頁。不需要太多技術背景，只要跟著幾個簡單步驟，即可將心中的創意變成現實。這種自由和便利，使得每個人都能展現自己獨特的一面，非常值得嘗試！
免費建站：從SSR到SSG，我的個人網站如何省錢又省力
你能相信嗎？除了域名外，我的個人網站設定完全免費！畢竟，這只是我計劃發表隨性文章的地方，因此我會盡可能省錢。讓我來解釋一下我是如何建立這個網站的。由於我希望它是免費的，我無法選擇像 WordPress 這樣的 SSR（伺服器端渲染）框架，因為部署到主機上會產生費用。雖然一些雲平台提供免費方案，但流量增加不可避免地會產生額外成本。因此，選擇一個 SSG（靜態網站生成器）框架並將其部署在提供免費靜態網站託管的平台上，更加明智。
我之前的網站使用了 Gatsby 框架，原因很簡單：我對 React 很熟悉，所以覺得自訂化會更容易。我後來意識到自己沒有時間維護一堆 TypeScript 和 JavaScript 的程式碼，這使我不願意更新我的網站。這次，我選擇了 Hugo。維護少量 Go Template 相對簡單，而且我也熟悉 Golang。
透過選擇適合的工具和技術，我能夠在保持低成本的同時，輕鬆管理我的內容。Hugo 不僅具備快速生成靜態頁面的能力，其強大功能也讓使用者可以輕鬆處理各種應用場景，例如部落格、作品集或其他型別的小型專案。因此，在尋找最佳解決方案時，SSG 的演進和選擇成為了關鍵因素，而 Hugo 正好滿足了我的需求。
Hugo 的官方網站提供了多種主題供選擇。這一次，我選擇了 hugo－PaperMod 主題。主題通常會提供下載步驟，只需按照指示進行即可。
hugo new site personal-website --format yaml cd personal-website git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive打造多語言 Hugo 網站：從主題配置到細節調整
您需要根據不同主題提供的檔案進行配置，以符合您的需求。因此，在接下來的部分，我僅討論一些較具挑戰性的配置。我選擇的主題支援多語言，但某些部分翻譯得不太好。您需要檢視原始碼並尋找解決方案，或者搜尋問題以檢視是否有人已經提供了解決方法。幸運的是，我找到了一些解決方案：https：／／github．com／adityatelange／hugo－PaperMod／issues／46。同樣地，也可以搜尋其他問題以尋找解決方案：https：／／github．com／adityatelange／hugo－PaperMod／issues／1037。主題通常不會特別設定中文字型，因此中文字元看起來可能不夠美觀。我常常使用網頁字型來解決這個問題，這樣更方便。在這裡，我使用 Google 的 Noto Sans Traditional Chinese 字型。透過點選“獲取字型”複製字型的嵌入程式碼。除了主題檔案提供的標準配置，多語言網站往往需要處理更細緻的細節。例如，您可能需要針對不同語言設定不同的頁面結構、導航選單，甚至根據語言自動調整社交媒體連結。
利用 Hugo 的多語言功能：Hugo 自帶的多語言功能，允許您透過 ｀content／en／｀、｀content／zh－TW／｀ 等目錄結構，分別建立不同語言版本的內容。
深入理解 Hugo 的模板機制：了解 Hugo 如何根據語言環境渲染模板，是針對特定語言進行更精準配置的重要基礎。例如，可以使用 ｀｛｛ with ．Site．Languages．Get ′zh－TW′ ｝｝｀ 獲取特定語言的配置資訊。
使用多語言外掛：許多 Hugo 外掛可以協助您更有效地處理多語言網站。例如，｀hugo－multilingual｀ 外掛能自動生成不同語言版本的導航選單。
然後點選「獲取嵌入程式碼」
然後點選「複製程式碼」
接下來，找到在主題原始碼中插入 HTML 標籤的位置。經過搜尋，我發現了這個檔案。建立一個名為 layouts／partials／extend＿head．html 的檔案，並將複製的內容寫入其中。然後，找出控制字型的 CSS 所在位置。經過搜尋，我找到這一行： https：／／github．com／adityatelange／hugo－PaperMod／blob／9ea3bb0e1f3aa06ed7715e73b5fabb36323f7267／assets／css／core／reset．css＃L27。建立一個名為 assets／css／extended／custom－font．css 的檔案，並將以下內容寫入其中：
body:lang(zh-tw) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", "Noto Sans TC", sans-serif; }請注意，這部分是直接從原始程式碼中複製而來，添加了選擇器 body：lang（zh－tw），以覆蓋繁體中文的字型樣式。由於我的文章混合了中文和英文，因此為避免改變英文字型，′Noto Sans TC′ 應放在後備字型之前，也就是在 sans－serif 之前。
由於我們的網站是一個靜態網站，因此需要依賴外部服務來提供留言系統。目前最知名的選擇是 Disqus。其免費方案強迫使用者展示大量廣告，這一點我並不喜歡。因此，我選擇了 giscus，它使用 GitHub Discussions 作為留言的儲存場所。唯一的缺點是它不允許使用者像 Disqus 那樣使用 Google 或社交媒體帳號登入和留言，但由於我的文章大多數是技術性內容，讀者通常會有 GitHub 帳號，因此這並不是一個大問題。
支援多語言及淺色／深色模式切換對於這個評論系統來說有點棘手，因此我必須撰寫一些 Javascript。大致上內容如下（敏感資訊已被替換）：
靜態網站託管：Cloudflare Pages 的優勢與選擇 Tina CMS 的理由
有許多靜態網站託管平台可供選擇，包括 GitHub Pages、Netlify、Cloudflare Pages 等等。我之所以選擇 Cloudflare Pages，原因很簡單：它的免費方案限制最少，甚至沒有頻寬限制！部署過程也非常簡單。只需遵循官方文件，連線到 GitHub 倉庫，並選擇 hugo 作為建構命令。每次都必須坐在電腦前開啟文字編輯器來撰寫部落格文章實在不方便。一個常見的解決方案是使用內容管理系統（CMS）。我曾經使用過 Decap CMS（以前稱為 Netlify CMS），但它在連線到 GitHub 倉庫時並不太方便，而且在 YAML 前置資料與正文之間沒有生成空行，有時會造成問題。因此這次我選擇了 Tina CMS。幸運的是，Tina Cloud 對於最多兩位使用者是免費的。
值得一提的是，利用 Cloudflare Pages 的 Serverless Functions，可以進一步擴充套件靜態網站的功能，而 Tina CMS 則提供 GraphQL API 和 Headless CMS 架構，使得資料處理更加靈活高效。這些特性讓我的網站更具吸引力和互動性，也大大提升了使用體驗。
設定 Tina CMS 並不困難。請按照官方的設定說明進行操作，然後前往 Cloudflare Pages，將建構指令更改為 git fetch －－unshallow ＆＆ npx －－yes tinacms build ＆＆ ［ ′￥CF＿PAGES＿BRANCH′ ＝ ′main′ ］ ＆＆ hugo －－minify ｜｜ hugo －b ￥CF＿PAGES＿URL －－minify，並新增環境變數。最終會顯示如下內容：
網站圖示（Favicon）是網頁上顯示的小圖示。如果沒有設定，Chrome 瀏覽器會顯示一個地球圖案，這樣的外觀並不佳。要設定 Favicon，可以前往 Favicon Generator，上傳一張圖片，下載生成的檔案，解壓縮後將所有檔案複製到靜態資料夾中。接著參考主題文件了解如何正確設定 Favicon。
OpenGraph 是用來設定當您的網站在社交媒體上分享時所顯示的圖片與描述。您可以使用 https：／／www．opengraph．xyz／ 來檢查您的網站在社交媒體分享時的呈現效果。
將您的網站提交至 Google Search Console 可以加速索引過程。同時記得提交網站地圖，以進一步加快索引速度。
LightHouse 可以用來測量網站的效能和搜尋引擎最佳化（SEO）。請在隱身模式下開啟網站，以避免受到 Chrome 擴充套件的幹擾。接著，按下 Ctrl＋Shift＋J 進入 Chrome 開發者工具，然後選擇 LightHouse 標籤。
選擇桌面並點選「分析頁面載入」。
結果：本研究的結果顯示，實施新策略後，整體效率提高了20％。在分析資料時，我們注意到不同部門之間的表現差異，其中銷售部門的增長最為顯著，達到了30％的提升。進一步的調查還揭示，員工滿意度亦隨之上升，這對於促進生產力具有重要意義。在客戶反饋方面，我們觀察到正面評價增加了15％，顯示新措施在市場上的接受度逐漸提高。我們認為這些改變將對公司的長期發展帶來積極影響。
注意：Google 網頁字型效能調整
在使用 Lighthouse 時，您可能會注意到與 Google 網頁字型相關的效能問題。在這種情況下，您可以使用預載入方法來解決此問題：
為了分析網站資料，例如訪問者人數，最常用的工具是 Google Analytics。由於這超出了本文的範疇，因此不在此詳細說明。部屬一個網站需要注意許多細節。本文僅簡要涵蓋多個主題，因為不同的框架和主題需要不同的配置。雖然您無法僅透過閱讀本文來直接複製一個網站，但我希望這能幫助您在建立個人網站時留意這些細節。
參考來源
技術筆記｜使用Hugo 免費搭建個人網站
Hugo 算是近年興起，慢慢擁有一片天的網站架設工具。基本上，很類似Wordpress，他可以提供不僅僅只是部落格，更強大的是可以成為一個網站。 但相較 ...
來源： Vocus利用Github Pages 和Hugo 快速搭建免费的个人网站 - xcbeyond
本步骤是在本地创建个人站点工程（即：hugo 网站源文件）。 新建Hugo 站点。 在本地选择合适的目录，执行hugo 站点创建命令 hugo new site
... 來源： xcbeyond.cnHugo 建站筆記 - WellWells
編譯網站非常簡單，只要輸入指令hugo 就會產出~/my_blog/public 目錄，該public 裡面的HTML 就可以放到伺服器上供他人預覽。網路上有提供數個免費靜態網頁的 ...
來源： wellstsai.com利用Github Pages 和Hugo 快速搭建免费的个人网站
Hugo：由Go 语言实现的静态网站生成器，简单、易用、高效、易扩展、快速部署。只需在本地编写markdown 文件，即可完成日常文章的维护。 Github Pages：是一个 ...
來源： 腾讯云如何从0到1 搭建完全免费的个人博客网站 - 许大帅Aiden's Blog
Hugo建站的流程可总结为以下几步：. 安装Hugo; 建立Hugo站点; 安装配置主题; 编写文章; 启动本地Web服务器查看站点; 推送站点文件到GitHub; 使用 ...
來源： xudashuai.blog【懶人包】使用Hugo 5 分鐘內快速架設個人網站，號稱現在最快的自架 ...
【懶人包】使用Hugo 5 分鐘內快速架設個人網站，號稱現在最快的自架網站方式 · 申請GitHub 帳號 · 安裝Brew · 下載Hugo 模板 · 安裝文字編輯器來修改模板基本 ...
來源： Medium如何零基础免费搭建个人网站
本教程旨在手把手帮你搭建属于你的个人网站。建站工具是Hugo + GitHub 。两个都是免费的。完成后，你的个人网站网址是： https://github用户名 ...
來源： Hongtao Hao使用hugo在github搭建个人博客（一）
本系列教程先说明建站思路，然后一步步教大家用hugo生成静态网站，并把它发布到github上。 PS：文章不足或出错之处欢迎大家与我交流。 基本思路. 1、下载安装hugo，生成静态 ...
來源： GitHub
全部
資訊科技
相關討論