Hugo 靜態(tài)網(wǎng)站構(gòu)建手冊(cè)：https://jimmysong.io/hugo-handbook/

關(guān)鍵字：開源 博客 框架

?

1、GitHub?Pages

官網(wǎng)：https://pages.github.com/
文檔：https://docs.github.com/zh

Github?Pages?簡介

Websites for you and your projects. (為你的項(xiàng)目提供網(wǎng)站)。GitHub Pages 是通過 GitHub 托管和發(fā)布的公共網(wǎng)頁。Github Pages 本質(zhì)上是一個(gè)靜態(tài)網(wǎng)站托管系統(tǒng)，可以使用它為你的每一個(gè)倉庫制作一個(gè)靜態(tài)網(wǎng)頁入口。

• 搭建簡單而且免費(fèi)；
• 支持靜態(tài)腳本；
• 可以綁定你的域名；
• DIY自由發(fā)揮，動(dòng)手實(shí)踐一些有意思的東西git,markdown,bootstrap,jekyll；
• 理想寫博環(huán)境，git+github+markdown+jekyll；

Git、GitHub、GitHub?Pages

• Git 是一個(gè)開源的分布式版本控制系統(tǒng)。
• GitHub?是托管各種 git 庫的站點(diǎn)。
• GitHub?Pages 是免費(fèi)的靜態(tài)站點(diǎn)。可以免費(fèi)托管、自帶主題、支持自制頁面和Jekyll。

GitHub Pages?文檔

官網(wǎng)文檔(英文)：https://docs.github.com/en/pages
官網(wǎng)文檔(中文)：https://docs.github.com/zh/pages

GitHub Pages 是通過 GitHub 托管和發(fā)布的公共網(wǎng)頁。 啟動(dòng)和運(yùn)行的最快方法是使用 Jekyll 主題選擇器加載預(yù)置主題。 然后修改 GitHub Pages 的內(nèi)容和樣式。

創(chuàng)建 網(wǎng)站

首先需要?github?賬號(hào)，沒有就注冊(cè)一個(gè)。

1. 在任何頁面的右上角選擇 + ，單擊?新建倉庫。輸倉庫名。倉庫名必須以 .github.io?結(jié)尾?

然后勾選 "添加?README.txt"

2.?進(jìn)入創(chuàng)建的倉庫，點(diǎn)擊 設(shè)置，在 "左邊的側(cè)邊欄"? 的 "代碼和自動(dòng)化"?部分，點(diǎn)擊?頁面，在 "構(gòu)建和部署" 下的 "源"?選擇 "從分支部署"，在 "分支"?下選擇發(fā)布源?為?None，然后保存。

3. (可選)，打開倉庫中的?README.md?文件，可以保持默認(rèn)也可以編輯，這個(gè)文件是編寫你網(wǎng)站內(nèi)容的位置。

4.?修改并推送到 GitHub 后，最長可能需要 10 分鐘才會(huì)發(fā)布。

訪問發(fā)布后的網(wǎng)站。

更改標(biāo)題和說明。單擊倉庫的 “代碼” 選項(xiàng)卡，添加 _config.yml文件，編輯_config.yml 添加如下內(nèi)容，編輯完文件后，單擊“提交更改”

theme: jekyll-theme-minimal
title:?xxx?的 github pages 主頁
description: xxx的 github pages 主頁

站點(diǎn)添加主題：使用 Jekyll 向 GitHub Pages 站點(diǎn)添加主題 - GitHub 文檔

網(wǎng)站的 2種 pages 模式

兩種 pages 模式

• 個(gè)人或公司站點(diǎn)：User/Organization?Pages。
  ? ? 使用自己的用戶名，每個(gè)用戶名下面只能建立一個(gè)；主干上內(nèi)容被用來構(gòu)建和發(fā)布頁面
• 項(xiàng)目站點(diǎn)：Project?Pages。gh-pages分支用于構(gòu)建和發(fā)布；
  如果user/org pages使用了獨(dú)立域名，那么托管在賬戶下的所有project pages將使用相同的域名進(jìn)行重定向，除非project pages使用了自己的獨(dú)立域名；
  如果沒有使用獨(dú)立域名，project pages將通過子路徑的形式提供服務(wù)http://username.github.com/projectname；
  自定義404頁面只能在獨(dú)立域名下使用，否則會(huì)使用User Pages 404；

常用命令

$ git clone git@github.com:username/username.github.com.git?
//本地如果無遠(yuǎn)程代碼，先做這步，不然就忽略
$ cd .ssh/username.github.com //定位到你blog的目錄下
$ git pull origin master?
//先同步遠(yuǎn)程文件，后面的參數(shù)會(huì)自動(dòng)連接你遠(yuǎn)程的文件
$ git status //查看本地自己修改了多少文件
$ git add . //添加遠(yuǎn)程不存在的git文件
$ git commit * -m "what I want told to someone"
$ git push origin master //更新到遠(yuǎn)程服務(wù)器上

項(xiàng)目 站點(diǎn)：Project?Pages

• gh-pages分支用于構(gòu)建和發(fā)布；
• 如果user/org?pages使用了獨(dú)立域名，那么托管在賬戶下的所有project?pages將使用相同的域名進(jìn)行重定向，除非project?pages使用了自己的獨(dú)立域名；
• 如果沒有使用獨(dú)立域名，project?pages將通過子路徑的形式提供服務(wù)http://username.github.com/projectname；
• 自定義404頁面只能在獨(dú)立域名下使用，否則會(huì)使用User?Pages?404；

創(chuàng)建項(xiàng)目站點(diǎn)步驟：

$ git clone https://github.com/USERNAME/PROJECT.git PROJECT
$ git checkout --orphan gh-pages
$ git rm -rf .
$ git add .
$ git commit -a -m "First pages commit"
$ git push origin gh-pages

建立主站、二級(jí)應(yīng)用頁面

可以通過 User/Organization?Pages建立主站，而通過Project?Pages掛載二級(jí)應(yīng)用頁面。

入門

• 關(guān)于 GitHub Pages

• 創(chuàng)建 GitHub Pages 站點(diǎn)

• 使用自定義工作流

• 配置發(fā)布源

• 刪除 GitHub Pages 站點(diǎn)

• 取消發(fā)布 Pages 站點(diǎn)

• 創(chuàng)建自定義 404 頁面

• 使用 HTTPS 保護(hù)站點(diǎn)

• 將子模塊與 Pages 一起使用

• 排查 404 錯(cuò)誤

配置 自定義 域

• 在 GitHub Pages 中自定義域

• 管理自定義域

• 驗(yàn)證自定義域

• 排除自定義域的故障

2、部署?博客

使用?Github?Pages?創(chuàng)建并部署網(wǎng)站。

安裝 git 工具：https://git-scm.com/downloads

github?桌面版：https://desktop.github.com/

搭建靜態(tài)頁面網(wǎng)站的技術(shù)有很多，目前有三種主流技術(shù)選型：Hogo是 Go 語言，Hexo是 nodejs，jekyll 是 Ruby。都是靜態(tài)網(wǎng)站生成器。

Jekyll

官網(wǎng)

• 英文：https://jekyllrb.com/
• 中文：https://jekyllcn.com/

Jekyll?是一個(gè)簡單的博客形態(tài)的靜態(tài)站點(diǎn)生產(chǎn)機(jī)器。它有一個(gè)模版目錄，其中包含原始文本格式的文檔，通過一個(gè)轉(zhuǎn)換器（如?Markdown）和?Liquid?渲染器轉(zhuǎn)化成一個(gè)完整的可發(fā)布的靜態(tài)網(wǎng)站，你可以發(fā)布在任何你喜愛的服務(wù)器上。Jekyll?也可以運(yùn)行在?GitHub Page?上，也就是說，你可以使用 GitHub 的服務(wù)來搭建你的項(xiàng)目頁面、博客或者網(wǎng)站，而且是完全免費(fèi)的。說白了就是，只要安裝Jekyll的規(guī)范和結(jié)構(gòu)，不用寫html，就可以生成網(wǎng)站。

jekyll 與 github 的關(guān)系：GitHub?Pages一個(gè)由?GitHub?提供的用于托管項(xiàng)目主頁或博客的服務(wù)，jekyll 是后臺(tái)所運(yùn)行的引擎。

GitHub Pages 建立個(gè)人網(wǎng)站詳細(xì)教程：https://zhuanlan.zhihu.com/p/58229299

使用 Jekyll 設(shè)置站點(diǎn)

• GitHub Pages 和 Jekyll

• 使用 Jekyll 創(chuàng)建站點(diǎn)

• 使用 Jekyll 本地測試站點(diǎn)

• 將內(nèi)容添加到 Pages 站點(diǎn)

• 設(shè)置 Markdown 處理器

• 將主題添加到 Pages 站點(diǎn)

• Pages 的 Jekyll 構(gòu)建錯(cuò)誤

• 排查 Jekyll 錯(cuò)誤

Hugo (雨果)

Hugo 官網(wǎng)描述說是世界上最快的、最受歡迎的開源靜態(tài)網(wǎng)站生成器。hugo是用Go語言編寫的靜態(tài)網(wǎng)頁生成器，只需要一個(gè)命令?hugo?就可以在幾秒鐘內(nèi)生成一個(gè)靜態(tài)的博客頁面。

Website?|?Installation?|?Documentation?|

官網(wǎng)文檔

• Installation?安裝
• Getting started?開始
• Content management?內(nèi)容管理
• Templates?模板
• Functions?功能
• Methods?方法
• Quick reference?快速參考
• Variables?變量
• Hugo Modules?Hugo模塊
• Hugo Pipes?雨果派普斯
• CLI

快速入門、目錄結(jié)構(gòu)、hugo配置

• 如果是 Windows 用戶：不要使用 命令提示符，不要使用 "Windows PowerShell"。
• "PowerShell" 和 "Windows PowerShell" 是不同的應(yīng)用程序。
• 可以使用?"PowerShell" 或 Linux 終端（如 WSL 或 Git Bash）運(yùn)行?hugo?命令。

在使用 Hugo 靜態(tài)網(wǎng)站生成器時(shí)，你可能會(huì)遇到 hugo.toml 和 config.toml 這兩個(gè)配置文件。

• hugo.toml 是 Hugo 項(xiàng)目的主要配置文件，通常位于 Hugo 項(xiàng)目的根目錄下。它包含了許多配置選項(xiàng)，用于指定網(wǎng)站的各種設(shè)置，例如語言、頁面布局、URL 等。你可以使用文本編輯器打開 hugo.toml 文件，并根據(jù)你的需求進(jìn)行相應(yīng)的配置。
• config.toml 是 Hugo 的默認(rèn)配置文件名稱，也位于 Hugo 項(xiàng)目的根目錄下。它是一個(gè)用戶自定義的配置文件，用于存儲(chǔ)網(wǎng)站的自定義設(shè)置。你可以在 config.toml 文件中添加自己的配置選項(xiàng)，以滿足特定需求。Hugo 會(huì)自動(dòng)加載并應(yīng)用 config.toml 中的配置。
• 對(duì)于 Hugo 項(xiàng)目，只需要一個(gè)有效的配置文件，可以是 hugo.toml 或者 config.toml。如果同時(shí)存在這兩個(gè)文件，Hugo 會(huì)優(yōu)先加載 hugo.toml 文件。如果只有 config.toml 文件存在，則 Hugo 只加載該文件。
• 如果使用config.yml?配置文件需要注意：yml 是縮進(jìn)敏感

開始使用

• Create a site?創(chuàng)建站點(diǎn)
• Add content?添加內(nèi)容
• Configure the site?配置站點(diǎn)
• Publish the site?發(fā)布網(wǎng)站

基本用法

• Test your installation?測試安裝
• Display available commands顯示可用命令
• Build your site?構(gòu)建您的網(wǎng)站
• Draft, future, and expired content草稿、未來和過期內(nèi)容
• Develop and test your site開發(fā)和測試您的網(wǎng)站
• Deploy your site?部署站點(diǎn)

目錄結(jié)構(gòu)

• Site skeleton?站點(diǎn)骨架
• Directories?目錄
• Union file system?聯(lián)合文件系統(tǒng)
• Theme skeleton?主題骨架

配置 Hugo

• Configuration file?配置文件
• Configuration directory?配置目錄
• Merge configuration from themes從主題合并配置
• All configuration settings所有配置設(shè)置
• Configure build?配置構(gòu)建
• Configure cache busters?配置緩存破壞程序
• Configure server?配置服務(wù)器
• 404 server error page404 服務(wù)器錯(cuò)誤頁面
• Configure title case?配置標(biāo)題大小寫
• Configuration environment variables配置環(huán)境變量
• Configure with environment variables使用環(huán)境變量進(jìn)行配置
• Ignore content and data files when rendering渲染時(shí)忽略內(nèi)容和數(shù)據(jù)文件
• Configure front matter?配置前端
• Configure additional output formats配置其他輸出格式
• Configure minify?配置縮小
• Configure file caches?配置文件緩存
• Configure cacheDir?配置 cacheDir

配置?markup

• Default handler?默認(rèn)處理程序
• Goldmark?金標(biāo)志
• Asciidoc?阿西多克
• Highlight?高亮
• Table of contents?目錄
• Render hooks?渲染鉤子

術(shù)語表：https://gohugo.io/getting-started/glossary/

關(guān)于Hugo的教程和書籍列表

• Hugo In Action Home Page：https://www.manning.com/books/hugo-in-action
• Hugo In Action 主頁：https://www.manning.com/books/hugo-in-action

托管和部署

托管和部署 (Hosting and deployment)

• 概述
• 部署 Hugo
• 使用 Rclone 進(jìn)行部署
• 使用 Rsync 部署
• 托管部署到 21YunBox
• 托管部署到 AWS Amplify
• 托管部署到 Azure 靜態(tài) Web Apps
• 托管部署到 Cloudflare Pages
• 托管部署到 Firebase
• 托管部署到 GitHub Pages
• 托管部署到 GitLab Pages
• 托管部署到 KeyCDN
• 托管部署到 Netlify
• 托管部署到 Render

其他托管網(wǎng)站的平臺(tái)

• Netlify：做的一些 Vue 或者 React 想上線部署之后可以讓別人預(yù)覽，可以通過 Netlify 這個(gè)平臺(tái)實(shí)現(xiàn)
• Nanobox：本地開發(fā)工具，可以消除環(huán)境的復(fù)雜性，在部署和生產(chǎn)環(huán)境之間，進(jìn)行自動(dòng)化環(huán)境配置，通過虛擬化使得開發(fā)環(huán)境更簡潔
• AWS Amplify：亞馬遜出品的移動(dòng)應(yīng)用開發(fā)程序管理工具
• Firebase：Google 出品的 BAAS

hugo 主題?庫

hugo?官方的主題庫，可以搜索、下載喜歡的主題：https://themes.gohugo.io/

使用 Hugo 創(chuàng)建靜態(tài)網(wǎng)站

Github Pages 是一個(gè)靜態(tài)網(wǎng)站托管系統(tǒng)，可以為每個(gè)倉庫制作一個(gè)靜態(tài)網(wǎng)頁入口。它有兩種存在方式：

• 識(shí)別 master branch 根目錄下的：README.md 或者 index.html
• 識(shí)別 master branch 的 /docs 目錄下的：README.md 或者 index.html

也就是說：可以把我們的靜態(tài)網(wǎng)頁直接存在 master branch，并在 Github Repository 的 Setting 頁中打開 Github Pages 選項(xiàng)，就可以通過一個(gè)域名訪問到我們的想要的網(wǎng)站了。

將 Hugo 部署為 GitHub Pages 項(xiàng)目或個(gè)人/組織站點(diǎn)，并使用 GitHub Actions 自動(dòng)執(zhí)行整個(gè)過程

• Prerequisites?先決條件
• Types of sites?網(wǎng)站類型
• Procedure?程序
• Customize the workflow?自定義工作流
• Additional resources?其他資源

安裝?Hugo

下載：https://github.com/gohugoio/hugo

Hugo 有兩個(gè)版本：標(biāo)準(zhǔn)版和擴(kuò)展版。擴(kuò)展版功能：在處理圖像時(shí)編碼為 WebP 格式，可以使用任一版本解碼 WebP 圖像；使用嵌入式 LibSass 轉(zhuǎn)譯器將 Sass 轉(zhuǎn)譯為 CSS，使用 Dart Sass 轉(zhuǎn)譯器不需要擴(kuò)展版。查看 Hugo 是否安裝成功：hugo --help

使用 "hugo [command] --help" 查看對(duì)應(yīng)命令的幫助。

用法:
? hugo [flags]
? hugo [command]

可用命令:
? completion ?為指定的shell生成自動(dòng)完成腳本
? config ? ? ?打印 site 配置
? convert ? ? 將內(nèi)容轉(zhuǎn)換為不同的格式
? deploy ? ? ?將站點(diǎn)部署到云提供商。
? env ? ? ? ? 打印 Hugo 版本和環(huán)境信息
? gen ? ? ? ? 幾個(gè)有用的生成器的集合。
? help ? ? ? ?幫助
? import ? ? ?從其他站點(diǎn)導(dǎo)入您的站點(diǎn)。
? list ? ? ? ?列出各種類型的內(nèi)容
? mod ? ? ? ? 各種Hugo模塊幫助
? new? ? ? ? ?為?web 站點(diǎn)創(chuàng)建?網(wǎng)站內(nèi)容
? server ? ? ?一個(gè)高性能的 webserver
? version ? ? 打印 Hugo 版本和環(huán)境信息

Flags:
? -b, --baseURL string ? ? ? ? ? ? hostname (and path) to the root, e.g. https://spf13.com/
? -D, --buildDrafts ? ? ? ? ? ? ? ?include content marked as draft(草案、草稿)
? -E, --buildExpired ? ? ? ? ? ? ? include expired content
? -F, --buildFuture ? ? ? ? ? ? ? ?include content with publishdate in the future
? ? ? --cacheDir string ? ? ? ? ? ?filesystem path to cache directory
? ? ? --cleanDestinationDir ? ? ? ?remove files from destination not found in static directories
? ? ? --clock string ? ? ? ? ? ? ? set the clock used by Hugo, e.g. --clock 2021-11-06T22:30:00.00+09:00
? ? ? --config string ? ? ? ? ? ? ?config file (default is hugo.yaml|json|toml)
? ? ? --configDir string ? ? ? ? ? config dir (default "config")
? -c, --contentDir string ? ? ? ? ?filesystem path to content directory
? ? ? --debug ? ? ? ? ? ? ? ? ? ? ?debug output
? -d, --destination string ? ? ? ? filesystem path to write files to
? ? ? --disableKinds strings ? ? ? disable different kind of pages (home, RSS etc.)
? ? ? --enableGitInfo ? ? ? ? ? ? ?add Git revision, date, author, and CODEOWNERS info to the pages
? -e, --environment string ? ? ? ? build environment
? ? ? --forceSyncStatic ? ? ? ? ? ?copy all files when static is changed.
? ? ? --gc ? ? ? ? ? ? ? ? ? ? ? ? enable to run some cleanup tasks (remove unused cache files) after the build
? -h, --help ? ? ? ? ? ? ? ? ? ? ? help for hugo
? ? ? --ignoreCache ? ? ? ? ? ? ? ?ignores the cache directory
? ? ? --ignoreVendorPaths string ? ignores any _vendor for module paths matching the given Glob pattern
? -l, --layoutDir string ? ? ? ? ? filesystem path to layout directory
? ? ? --logLevel string ? ? ? ? ? ?log level (debug|info|warn|error)
? ? ? --minify ? ? ? ? ? ? ? ? ? ? minify any supported output format (HTML, XML etc.)
? ? ? --noBuildLock ? ? ? ? ? ? ? ?don't create .hugo_build.lock file
? ? ? --noChmod ? ? ? ? ? ? ? ? ? ?don't sync permission mode of files
? ? ? --noTimes ? ? ? ? ? ? ? ? ? ?don't sync modification time of files
? ? ? --panicOnWarning ? ? ? ? ? ? panic on first WARNING log?
? ? ? --poll string ? ? ? ? ? ? ? ?設(shè)置 poll 時(shí)間間隔, e.g --poll 700ms, 使用基于輪詢的方法來監(jiān)視文件系統(tǒng)的更改
? ? ? --printI18nWarnings ? ? ? ? ?print missing translations
? ? ? --printMemoryUsage ? ? ? ? ? print memory usage to screen at intervals
? ? ? --printPathWarnings ? ? ? ? ?print warnings on duplicate target paths etc.
? ? ? --printUnusedTemplates ? ? ? print warnings on unused templates.
? ? ? --quiet ? ? ? ? ? ? ? ? ? ? ?build in quiet mode
? ? ? --renderToMemory ? ? ? ? ? ? render to memory (only useful for benchmark testing)
? -s, --source string ? ? ? ? ? ? ?filesystem path to read files relative from
? ? ? --templateMetrics ? ? ? ? ? ?display metrics about template executions
? ? ? --templateMetricsHints ? ? ? calculate some improvement hints when combined with --templateMetrics
? -t, --theme strings ? ? ? ? ? ? ?themes to use (located in /themes/THEMENAME/)
? ? ? --themesDir string ? ? ? ? ? filesystem path to themes directory
? ? ? --trace file ? ? ? ? ? ? ? ? write trace to file (not useful in general)
? -v, --verbose ? ? ? ? ? ? ? ? ? ?verbose output
? -w, --watch ? ? ? ? ? ? ? ? ? ? ?watch filesystem for changes and recreate as needed

hugo new site?xxx? ? 創(chuàng)建站點(diǎn)

hugo new xxx? ? ? ? ? ?創(chuàng)建?站點(diǎn)內(nèi)容，即 網(wǎng)頁內(nèi)容文件。

創(chuàng)建?網(wǎng)站

hugo new site 命令創(chuàng)建一個(gè)新的 Hugo 網(wǎng)站時(shí)，如果指定的目錄不為空會(huì)報(bào)錯(cuò)。如果想要在非空目錄中創(chuàng)建 Hugo 網(wǎng)站，可以先?hugo new site temp-site?創(chuàng)建一個(gè)臨時(shí)的空目錄，再將臨時(shí)文件夾temp-site 中的內(nèi)容移動(dòng)到你想要的目標(biāo)目錄中。

• hugo new site ?在指定的目錄創(chuàng)建一個(gè)站點(diǎn)，新創(chuàng)建的站點(diǎn)有正確的結(jié)構(gòu)，但還沒有內(nèi)容和主題。
• 可以使用 hugo new [contentPath]? ? 創(chuàng)建 站點(diǎn)內(nèi)容(網(wǎng)頁文件)

添加?ananke?主題，并啟動(dòng)

在流行框架的基礎(chǔ)上搭建網(wǎng)站其實(shí)并不是一個(gè)技術(shù)活，千差萬別的網(wǎng)站體驗(yàn)則主要體現(xiàn)在網(wǎng)站主題的設(shè)計(jì)上。Hugo 提供豐富多樣的主題模板，可以在主題庫搜索喜歡的主題進(jìn)行安裝：https://themes.gohugo.io/

示例：安裝 https://github.com/theNewDynamic/gohugo-theme-ananke?主題

• 方法 1：作為 Hugo 模塊（推薦），需要安裝Go。
  在項(xiàng)目的根目錄初始化hugo模塊系統(tǒng)：hugo mod init github.com/<your_user>/<your_project>
  添加主題倉庫到?config.toml?文件：theme = ["github.com/theNewDynamic/gohugo-theme-ananke"]
• 方法 2：作為 git 子模塊。在Hugo站點(diǎn)根目錄中運(yùn)行：git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
• 方法 3：直接把主題 clone 到 theme 目錄下。示例克隆 jane 主題：git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane?
• git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
  git init
  git submodule--helper add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1

hugo server -D 是用于在 Hugo 靜態(tài)網(wǎng)站生成器中啟動(dòng)本地服務(wù)器的命令。

• hugo: 是 Hugo 靜態(tài)網(wǎng)站生成器的可執(zhí)行命令。
• server: 是 Hugo 提供的一個(gè)子命令，用于啟動(dòng)本地開發(fā)服務(wù)器。
• -D（或?--buildDrafts）: 是一個(gè)可選參數(shù)，用于告訴 Hugo 在構(gòu)建網(wǎng)站時(shí)包括草稿（draft）文章?？梢栽陬A(yù)覽網(wǎng)站時(shí)渲染未發(fā)布的草稿文檔。

為了成功運(yùn)行 hugo server -D 命令，需要先進(jìn)入 Hugo 項(xiàng)目的根目錄，然后再運(yùn)行該命令。成功運(yùn)行后將啟動(dòng)一個(gè)本地開發(fā)服務(wù)器，并自動(dòng)監(jiān)視你的 Hugo 項(xiàng)目文件夾中的更改。這意味著每當(dāng)你編輯或添加新的內(nèi)容時(shí)，服務(wù)器都會(huì)重新加載并顯示最新的更改。在瀏覽器中打開 http://localhost:1313 即可訪問 Hugo 生成的網(wǎng)站。

啟動(dòng)：hugo server? 后訪問效果如下。

添加?博文，并啟動(dòng)

進(jìn)入web?站點(diǎn)根目錄，執(zhí)行命令 hugo new post/test.md 或者 hugo new post/2021/test.md?創(chuàng)建博文。創(chuàng)建的文章會(huì)自動(dòng)生成一部分文本。

如果嫌棄手動(dòng)添加麻煩，目錄?themes\ananke\exampleSite?是個(gè)樣例站點(diǎn)，可以直接把?exampleSite?目錄下的 "content目錄 和?config.toml文件" 復(fù)制到自己創(chuàng)建站點(diǎn)的 根目錄下，然后把?config.toml?里面的內(nèi)容合并到?hugo.toml?里面，然后刪除?config.toml

再次啟動(dòng)：hugo server? 后訪問效果如下

總結(jié)步驟：

hugo?new site?my_hugo_web_src #?創(chuàng)建名為?my_hugo_web_src 的目錄，作為根目錄
cd my_hugo_web_src
git init ? ?##初始化倉庫
git remote add origin https://github.com/caecarxu/caecarxu.github.io.git ? ?##鏈接遠(yuǎn)程倉庫
git add .
git commit -m "first commit"
git push -u origin master
在此之后更新文章，使用hugo生成新的靜態(tài)頁面，并使用git push進(jìn)行同步
cd my_hugo_web_src
git add .
git status
git commit -m "add blog post"
git push
提示以下，commit -m 后面的東西是此次提交的備注，通常用來說明提交人的名字

或者

在倉庫頁面可以獲取到 clone 鏈接 git@github.com:$USER_NAME/xxx.github.io.git
git init -b main
git remote add upstream git@github.com:$USER_NAME/xxx.github.io.git

git push -f upstream main
這樣就部署成功了，等待幾分鐘后，訪問網(wǎng)址：xxx.github.io即可看到自己的博客內(nèi)容。

將網(wǎng)站部署到 Github Pages

Hugo 提供非常詳盡的?GitHub Pages 部署指引。步驟如下：

• 1. 部署到?Github Pages?時(shí)，需要把?hugo.toml 文件中 baseURL 修改為自己博客的網(wǎng)址，譬如 baseURL = "https://caecarxu.github.io/"
• 2. 然后執(zhí)行?hugo?命令生成靜態(tài)頁面文件，執(zhí)行成功后出現(xiàn)一個(gè) public 文件夾，里面就是網(wǎng)站的靜態(tài)頁面文件
• 3.?進(jìn)入?public?目錄，把目錄中所有文件上傳到?xxx.github.io?的倉庫中。
  進(jìn)入 public 文件夾，使用 git 上傳文件
  cd public
  git init ##初始化倉庫
  git remote add origin https://github.com/caecarxu/caecarxu.github.io.git ##鏈接遠(yuǎn)程倉庫
  git add .
  git commit -m "first commit"
  git push -u origin main
  在此之后更新文章，使用hugo生成新的靜態(tài)頁面，并使用git push進(jìn)行同步
  cd public
  git add .
  git status
  git commit -m "add blog post"
  git push
• 4. 每當(dāng)寫完文章，運(yùn)行?hugo?命令，Hugo 將自動(dòng)生成靜態(tài)網(wǎng)站到?public?文件夾中，只需要將該文件夾的內(nèi)容發(fā)布在網(wǎng)絡(luò)上即可。

部署成功后，網(wǎng)站依然略顯簡陋，可以通過配置 hugo.toml 中的配置項(xiàng)增加你想要的功能

增加 About 頁面

博客默認(rèn)菜單只有 4 個(gè)頁面選項(xiàng)：Home,?Archives,?Tags,?Categories，如果想新增?About?頁面，僅需以下 2 步：

• 新建 about 文件：hugo new about.md，命令將會(huì)創(chuàng)建?contents/about.md?文件
• 在 about.md 文件的 Front Matter 中輸入以下配置：
  ---
  title: "About"
  date: 2021-12-19T13:51:21+08:00
  draft: false
  menu: "main" ? ? # 在 main 新增選項(xiàng)?
  weight: 50 ? ? ? # About 選項(xiàng)的位置
  ---

重新部署博客，可以看到新增了 About 選項(xiàng)。

轉(zhuǎn)移目錄至側(cè)邊欄

添加評(píng)論系統(tǒng)

giscus 是一個(gè)基于 GitHub Discussions 的評(píng)論系統(tǒng)，包含多種主題可供選擇。你應(yīng)該首先跟隨?utterances 配置方法了解可選配置項(xiàng)，并根據(jù)個(gè)人偏好自動(dòng)生成一份包含個(gè)性化配置屬性的?HTML?代碼：

博客使用 utterances 作為評(píng)論系統(tǒng)：https://juejin.cn/post/6844903834712539150
giscus：https://giscus.app/zh-CN
給 hugo 博客添加評(píng)論功能：https://segmentfault.com/a/1190000039217582

SEO 優(yōu)化

寫博客不只是為了記錄，也是為了更好地去(man)幫(zu)助(xu)別(rong)人(xin)，為了讓搜索引擎更好地收錄你的博客文章，還需要做一些搜索引擎優(yōu)化(SEO)，Even 主題已經(jīng)提供了豐富的 SEO 優(yōu)化手段，我們只需設(shè)置一些配置項(xiàng)。

• 最好在?archtypes/default.md?中增加?keywords?和?description配置，便于搜索引擎索引。
  keywords: []
  description: ""

• 網(wǎng)站目錄 增加 robots 文件，便于爬蟲爬取網(wǎng)頁內(nèi)容。不過 Even 已經(jīng)提供了 robots 和相關(guān)的網(wǎng)頁地圖設(shè)置，因此這里無需操作。

• 提交博客地址到搜索引擎?Google

• 配置?Google Analytics，將獲取到的 Tracking ID 配置到?config.toml?中。
  googleAnalytics = "" ? ? ?# UA-XXXXXXXX-X

使用 GitHub Action 自動(dòng)發(fā)布文章

這里主要參考?搭建個(gè)人blog, 使用?master?分支發(fā)布文章，使用一個(gè)新的?source?分支進(jìn)行寫作，寫作完成后上傳?source?，GitHub Action 自動(dòng)將?source?分支的?publish?文件夾拷貝到?master?分支，從而完成文章的發(fā)布。

主要步驟如下：

1. 在 GitHub 上的個(gè)人網(wǎng)站倉庫xxx.github.io?新建?source?分支

2. 清除文件夾?xxx.github.io?中的內(nèi)容，并將個(gè)人網(wǎng)站?quickstart?中的所有內(nèi)容 copy 到?xxx.github.io?：
git clone --branch=source?https://github.com/xxx/xxx.github.io.git
rm -rf?woot!*
cp -rf quickstart/*?http://xxx.github.io

3. 生成?ACTIONS_DEPLOY_KEY
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

將生成的私鑰文件?gh-pages?(注意不是公鑰?gh-pages.pub) 中的內(nèi)容復(fù)制填寫到 GitHub 倉庫設(shè)置中，即在?xxx.github.io?項(xiàng)目主頁中，找到 Repository Settings -> Secrets -> 添加這個(gè)私鑰的內(nèi)容并命名為?ACTIONS_DEPLOY_KEY?。
然后在?xxx.github.io?項(xiàng)目主頁中，找到 Repository Settings -> Deploy Keys -> 添加這個(gè)公鑰的內(nèi)容，命名為?ACTIONS_DEPLOY_KEY?，并勾選 Allow write access。

4. 配置 workflow
創(chuàng)建 workflow 文件
mkdir -p .github/workflows/
touch .github/workflows/main.yml

在?main.yaml?中撰寫 workflow，內(nèi)容如下：
name: github pages

on:
push:
branches:
- source

jobs:
build-deploy:
runs-on: ubuntu-18.04

steps:
- uses: actions/checkout@master
- name: Checkout submodules
shell: bash
run: |
auth_header="$(git config --local --get http.https://github.com/.extraheader)"
git submodule sync --recursive
git -c "http.extraheader=$auth_header" -c protocol.version=2 submodule update --init --force --recursive --depth=1

- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
extended: true

- name: Build
run: hugo --gc --minify --cleanDestinationDir

- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./public
publish_branch: main

注意，如果你的倉庫是?master?分支作為主分支，將?publish_branch?后面的?main?修改為?master?;

5. 將 source 分支發(fā)送到遠(yuǎn)程
發(fā)送腳本?deploy.sh?:
#!/bin/bash
git add .
git commit -m "update article"
git push

推送到遠(yuǎn)程分支：
sh deploy.sh

推送成功后，可以在項(xiàng)目主頁中的 action 里面查看自動(dòng)部署是否成功，即?https://github.com/xxx/xxx.github.io/actions；

hugo?主題?推薦

最好的搜索方式是在 https://github.com/ 中，搜索關(guān)鍵詞：hugo theme
或者使用 搜索引擎，搜索：hugo theme site:github.com

github?搜索?主題

：https://github.com/search?q=hugo+theme&type=repositories

hugo-theme-stack?主題示例：https://demo.stack.jimmycai.com/

手動(dòng)安裝部署：https://stack.jimmycai.com/guide/getting-started

自動(dòng)化安裝部署：https://github.com/CaiJimmy/hugo-theme-stack-starter

Hugo 主題庫?搜索

HBS 主題：Bootstrap Theme for Personal Blog and Documentations
：https://themes.gohugo.io/themes/hugo-theme-bootstrap/

Hugo 流行主題 MemE：Github 地址：https://github.com/reuixiy/hugo-theme-meme
Hugo 流行主題 Clarity：Github 地址：https://github.com/chipzoller/hugo-clarity
Hugo 流行主題 Even：Github 地址：https://github.com/olOwOlo/hugo-theme-even
Hugo 流行主題 Octopress：Github 地址：https://github.com/parsiya/Hugo-Octopress
Hugo 流行主題 Tokiwa：Github 地址：https://github.com/heyeshuang/hugo-theme-tokiwa

從Hexo遷移到Hugo-送漂亮的Hugo Theme主題：https://zhuanlan.zhihu.com/p/40997372

知乎：有哪些好看的Hugo主題：https://www.zhihu.com/question/266175192

Hugo NexT 最新主題：https://gitee.com/hugo-next/hugo-theme-next

自動(dòng)化 部署

：https://blog.taoluyuan.com/posts/github-workflows/

可以通過 Github workflows CI/CD 自動(dòng)化部署 Github Pages hugo 免費(fèi)博客

GitHub Actions 介紹

• GitHub 文檔：https://docs.github.com/zh/actions/learn-github-actions/understanding-github-actions
• 官方介紹:GitHub Actions?是一種持續(xù)集成和持續(xù)交付 (CI/CD) 平臺(tái)，可用于自動(dòng)執(zhí)行生成、測試和部署管道。 可以創(chuàng)建工作流程來構(gòu)建和測試存儲(chǔ)庫的每個(gè)拉取請(qǐng)求，或?qū)⒑喜⒌睦≌?qǐng)求部署到生產(chǎn)環(huán)境

流程及原理介紹

主要介紹使用GitHub Actions 來實(shí)現(xiàn)自動(dòng)化部署博客網(wǎng)站 ,靜態(tài)網(wǎng)站生成使用的是Hugo,部署使用的是Github pages,并且使用自定義域名。?

1. 本地寫hugo-blog 博客,hugo-blog 是一個(gè)hugo的博客模板,使用hugo new site hugo-blog命令創(chuàng)建,可以在里面寫markdown文件
2. 寫好后推送到github hugo-blog 倉庫,觸發(fā)github actions ci/cd,執(zhí)行hugo命令生成靜態(tài)網(wǎng)站,并且推送到github-pages 倉庫
3. github-pages 倉庫接收到推送后,會(huì)自動(dòng)部署到github pages,公網(wǎng)可以通過 github pages 域名 訪問,也可以通過CNAME配置自定義域名訪問

Github Pages 介紹

• Github Pages 是一個(gè)靜態(tài)網(wǎng)站托管服務(wù),可以通過github pages 托管靜態(tài)網(wǎng)站,并且可以通過自定義域名訪問
• 創(chuàng)建github pages 倉庫,倉庫名必須是username.github.io格式,username是你的github用戶名,倉庫名必須是這個(gè),否則無法部署成功 訪問地址就是?https://username.github.io
• 自定義域名訪問,例如www.abc.com,在域名服務(wù)商添加CNAME記錄,指向username.github.io, 然后在github pages 倉庫設(shè)置中添加自定義域名, 這樣通過www.abc.com 就能訪問github pages
• 下面的 Actions 部分會(huì)介紹如何自動(dòng)化部署到github pages,并且配置自定義域名

Hugo 介紹

• Hugo 是一個(gè)靜態(tài)網(wǎng)站生成器,可以通過markdown文件生成靜態(tài)網(wǎng)站,官網(wǎng):https://gohugo.io/
• 寫好markdown文件后,執(zhí)行hugo命令,在public目錄生成靜態(tài)網(wǎng)站,然后 將public目錄推送到github pages 倉庫
• github actions工作流 就是通過hugo命令生成靜態(tài)網(wǎng)站,并且推送到github pages 倉庫

使用 Github Actions 自動(dòng)化部署

創(chuàng)建 Github Actions。在github 倉庫中(hugo-blog)創(chuàng)建.github/workflows目錄,并且在目錄中創(chuàng)建deploy.yml文件,文件名可以自定義,但是后綴必須是yml,例如deploy.yml,這樣就創(chuàng)建了一個(gè)github actions,并且會(huì)自動(dòng)執(zhí)行,下面介紹我的deploy.yml文件

name: deploy

on:
    push:
    workflow_dispatch:
jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  submodules: true
                  fetch-depth: 0

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"

            - name: Build Web
              run: hugo

            - name: Deploy Web
              uses: peaceiris/actions-gh-pages@v3
              with:
                  PERSONAL_TOKEN: ${{ secrets.BLOG_TOKEN }}
                  EXTERNAL_REPOSITORY: webws/webws.github.io
                  PUBLISH_BRANCH: master
                  PUBLISH_DIR: ./public
                  commit_message: ${{ github.event.head_commit.message }}
                  cname: ${{ secrets.DOMAIN }}

上面 GitHub Actions配置文件用于自動(dòng)部署Hugo博客到我的 GitHub Pages。以下是每個(gè)步驟的功能和解釋：

• 步驟1：Checkout。此步驟使用?actions/checkout?插件來檢出 GitHub 倉庫,具體使用文檔地址是?checkout?submodules: true?參數(shù)用于同時(shí)檢出子模塊，fetch-depth: 0?用于完整地檢出所有歷史記錄。
• 步驟2：Setup Hugo。此步驟使用?peaceiris/actions-hugo?插件來安裝最新版本的 Hugo。

  - name: Setup Hugo
    uses: peaceiris/actions-hugo@v2
    with:
      hugo-version: "latest"

• 步驟3：Build Web。此步驟在運(yùn)行時(shí)調(diào)用 Hugo 構(gòu)建靜態(tài)網(wǎng)站，并在?public?目錄中生成靜態(tài)html 文件

  - name: Build Web
    run: hugo

• 步驟4：Deploy Web。此步驟使用?peaceiris/actions-gh-pages?插件將靜態(tài)網(wǎng)站部署到 GitHub Pages 上。

  - name: Deploy Web
    uses: peaceiris/actions-gh-pages@v3
    with:
      PERSONAL_TOKEN: ${{ secrets.BLOG_TOKEN }}
      EXTERNAL_REPOSITORY: webws/webws.github.io
      PUBLISH_BRANCH: master
      PUBLISH_DIR: ./public
      commit_message: ${{ github.event.head_commit.message }}
      cname: ${{ secrets.DOMAIN }}

參數(shù)的含義：

• PERSONAL_TOKEN: GitHub Personal Access Tokens 用于訪問 GitHub 倉庫，需要到github Personal access tokens設(shè)置添加權(quán)限，并將Token存儲(chǔ)在倉庫的Secrets中供Workflow使用
• EXTERNAL_REPOSITORY: 部署到的 GitHub Pages 倉庫,webws/webws.github.io 是我的github pages 倉庫,需要修改為你的github pages 倉庫
• PUBLISH_BRANCH: 要在其上部署站點(diǎn)的分支名稱（通常為master）。
• PUBLISH_DIR: hugo 靜態(tài)html文件目錄。（在此例中，Hugo 輸出位于?./public?目錄中）。
• commit_message: 提交更改時(shí)使用的提交消息，從上游分支獲取。
• cname: 自定義域名,CNAME記錄,我自己的是 blog.taoluyuan.com,需要修改為你的自定義域名,如果沒有,可以刪除這個(gè)參數(shù),使用默認(rèn)的github pages域名也訪問 webws.github.io

設(shè)置 Secrets 變量,對(duì)應(yīng) yml 文件中的 PERSONAL_TOKEN 和 DOMAIN ,具體設(shè)置 在 倉庫中(hugo-blog) 的 Settings -> secrets and variables->actions 中,hugo-blog 要換成你自己的倉庫名

• BLOG_TOKEN: GitHub Personal Access Token。
• DOMAIN: 你的自定義域名。

觸發(fā) Github Actions

• 在github 倉庫中(hugo-blog)創(chuàng)建.md文件,并且提交到github,這樣就會(huì)觸發(fā)github actions,自動(dòng)部署到github pages 倉庫,并且可以通過自定義域名訪問了
• 可以通過 倉庫中 Actions 標(biāo)簽查看部署狀態(tài)

訪問 Github Pages

1. 通過github pages域名訪問,?https://webws.github.io，因?yàn)槲以O(shè)置了自定義域名,所以這個(gè)域名會(huì)自動(dòng)跳轉(zhuǎn)到?https://blog.taoluyuan.com
2. 通過自定義域名訪問,?https://blog.taoluyuan.com

搭建個(gè)人主頁or博客網(wǎng)站

：https://zhuanlan.zhihu.com/p/641525444文章來源地址http://www.zghlxwxcb.cn/news/detail-794184.html

到了這里，關(guān)于使用 Github、Hugo 搭建個(gè)人博客的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！