Hugo使用經驗 - 朝闻道

為了防止時間太久忘記方法，建站的關鍵知識點還是要記錄一下的。

大人，時代變了#

最初我打算自己寫出整個網站（現在想想真傻），於是學了一些 html 和 css 知識。後來打開第一個 txt 文件準備動手寫主頁 html 文件時，我發現，我一點也寫不下去，幾個標籤下來就厭倦不已，想完全掌握並熟練運用這些知識需要很長時間，就算掌握了它們，寫出漂亮頁面還需要想象力和創造力 —— 短期內根本不可能寫出完整的網頁。最重要的是它們非常繁瑣，一個人要投入多少時間精力才能搞定所有工作啊！

後來看到網友的一句話 —— 獨自造輪子的時代已經結束了，前人已經幫你把模型調好了 —— 我才恍然大悟。我們這個時代太快了，閉門造車的做法很是愚蠢，學會借力前行才是。所以後來果斷選擇使用 hugo 引擎來做網站 —— 它的作用是，你給出參數（模型），它負責組裝。

不過 html 和 css 知識也沒有白學，因為對網頁結構有了解的話，知道什麼是標籤，什麼是屬性和值，以及它們的基本規則，與網頁打交道時很有幫助，才有可能根據自己喜好修改主題的細節。

選擇 Hugo#

網站生成器有很多，我看到許多人建站都會經歷兜兜轉轉的過程，工具從 wordpress 到 hexo，再到 hugo，再到 wordpress...... 所以我想避免這個坑，於是在開始動手之前花了許久做決定，我的要求是經濟、高效、方便 ——Hugo 最適合不過了 —— 靜態網頁經濟安全，Hugo 生成速度最快，也不需要伺服器。

文件目錄#

這是每個文件夾存放的內容及其作用的標準格式。

archetypes
- 在 default.md 文件中存放文章頁面參數
content
- 存放所有文章，如關於、分類、以及每篇文章
layouts：存放生成頁面所使用的模板、參數
- _default
  - 頁面模板
  - 如 list.html 是列表頁的模板，page.html 是普通頁的模板
  - hugo 渲染並生成頁面的本質：內容 + 模板 = 頁面
- partials
  - 配件模板
  - 如 footer.html 是頁面底部區域的模板，header.html 是頁面頭部的模板
  - 頁面模板中常會引用這些配件模板
- shortcodes
  - 短代碼
  - 在文章中固定格式的簡潔代碼，如引用 bilibili 的視頻，插入網易雲的音樂，所使用的代碼存放在這裡
  - 這個思維導圖，以及頂部的音樂都是短代碼的功勞
  - 如有需要，歡迎留言
static
- img
  - 存放圖像
- css
  - css 模板
  - css 的作用是讓頁面更漂亮，就像穿了新衣服
- js
  - JavaScript
themes
- 存放所有的主題

代碼#

Hugo#

查看版本：hugo version
新建庫：hugo new site 666
- 在當前目錄下，新建一個名為 "666" 的文件夾，其中內置應有的結構
新建文章： hugo new post/name.md
- 意思是在 content/post 文件夾內，生成一個名為 name.md 的文件
生成網頁： hugo
- 將在父文件夾中生成 public 文件夾，存放著已經渲染好的所有頁面
查看效果： hugo server
- 返回一個網址，你可以使用自己的瀏覽器來實時查看自己的頁面效果
主題
- 我用的笨方法，下載主題 zip 包並解壓到 themes 文件夾，之後在 config 文件中設置theme參數為主題名。
站內引用文章
- [知道越多越不快樂？]({{< ref "posts/2023-03-09 知道的詛咒.md">}})：[知道越多越不快樂]({{< ref "posts/2023-03-09知道的詛咒.md">}})
引用圖片
- ![實例](/img/posts/實例.png)

Github#

初始化配置

cd public
git init
git remote add origin https://github.com/ooxx/pornhub.github.io.git
git add -A
git commit -m "自行填寫備註"
git push -u origin master   #我的"master"用的"main"

第三行的網絡地址是 Github 倉庫的 SSH 鏈接，可以在倉庫中複製。如果一直連不成功，很有可能是 SSH 沒有綁定密鑰，可自行上網搜索。

這是以後每次上傳的代碼

cd public
git add .
git commit -m "自行填寫備註"
git push

如果 push 和本地無關，則需要git pull將網上的內容和本地的同步。

評論系統#

本站使用的是 utterances 的服務：只需創建一個 github 倉庫即可。無廣告、配置簡單，輕量開源評論系統，一點也不折騰，10 分鐘之內就能搞定；缺點是需要登陸 Github 帳號才能評論。

先在 github 創建一個新庫，要設為公開 public，然後點擊這個鏈接配置到新庫。
下面代碼放在 congig.toml 文件中

  [params.utteranc]
  enable = true
  repo = "1xiaoyuan/comment"           #換成自己的 "用戶名/倉庫名"
  issueTerm = "pathname"
  theme = "github-light"

下面的代碼放在模板footer.html文件中，一般放在底部

<script src="https://utteranc.es/client.js"
    repo="1xiaoyuan/comment"      #換成自己的 "用戶名/倉庫名"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async>
</script>

刪除倉庫內容#

想要刪除遠程倉庫中的內容，不刪除本地文件，也不刪除倉庫。其實我不太會用，琐碎的代碼先放在這吧。

$ git pull origin master  # 將遠程倉庫裡面的項目拉下來

$ dir # 查看有哪些文件夾

$ git rm -r --cached target  # 刪除你要刪除的文件名稱，這裡是刪除target文件夾（cached不會把本地的flashview文件夾刪除）

$ git commit -m '刪除了target' # 提交,添加操作說明

git push -u origin master #重新提交（若需要對其他分支進行操作，則把master換為對應分支，如:git push -u origin dev）

其他#

剩下的有時間再寫