Abend

哈囉 Hugo

我的第一篇文

This is my first hugo post. :D

目前這個網站專案是放在 GitHub，然後部署在 DigitalOcean Apps。我在本地端寫完文章，推到 GitHub 後，DigitalOcean 就會自動部署。目前 DigitalOcean 的免費方案似乎沒有流量及部署時間限制了，是個玩 Hugo 的好選擇。

選擇 Hugo 而不是繼續用 Wordpress 的原因，一來是嫌棄 Wordpress 太肥大；二來是 Hugo 可以直接用 markdown 寫文，再透過部署流程轉成靜態頁面，所以速度相比 PHP 當然是快上不少；最重要的是，要玩當然是要玩新玩具啊 wwwwww

好久沒有寫 Blog，不知道新玩具會讓我維持多久 XD

使用 Docker 安裝 Hugo

我不是很想把本機環境弄髒，所以選擇用 Docker 來安裝 Hugo，又因為我這個人比較懶，用 docker-compose 可以少打很多指令。docker-compose.yaml 內容如下：

version: '3.7'

services:
    server:
        image: klakegg/hugo:latest
        command: new site /src
        # command: server -D
        volumes:
            - "./<your folder>:/src"
        ports:
            - "1313:1313"

執行 docker-compose up -d 後會在目錄裡面看到滿多目錄跟檔案的。

我有嘗試過不要建立 folder，直接跟 docker-compose.yaml 放在同一層，也就是 ./:/src 這樣。不過不知道為什麼，產出來的檔案卻只有 public 這個目錄。

接著把 docker-compose.yaml 的 command 被 mark 的那行打開，然後 mark 原先的 new site 指令，並執行 docker-compose up -d

我用 server -D 是為了在本機可以看到草稿的文章，如果你不需要，直接用 server 就可以。

version: '3.7'

services:
    server:
        image: klakegg/hugo:latest
        # command: new site /src
        command: server -D
        volumes:
            - "./<your folder>:/src"
        ports:
            - "1313:1313"

打開瀏覽器，輸入 localhost:1313 應該就可以看到 404 頁面。

為了之後把專案推上 GitHub，以及用 submodule 的方式安裝佈景，我們需要先建好本地的 repo，在目錄內執行 git init

挑選佈景

接著可以到 Hugo Theme 選一個你順眼的佈景主題，我選的是 Paper 這個佈景。看起來滿簡潔的，目前我也不需要太花俏的功能，反正玩的順手，覺得不夠用後再來換佈景就好。

git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper

參考佈景說明，我修改了一下 config.toml

baseURL = 'https://abend.tw/'
languageCode = 'zh-tw'
title = 'Abend'

theme = 'paper'

[params]
  # color style
  color = 'gray'

  # header social icons
  twitter = 'evenrain'
  mastodon = 'https://abend.social/@evenrain'

  # home page profile
  avatar = '[email protected]'
  name = 'evenrain'
  bio = '閒散是天才的理想，懶惰是浪漫主義者的美德'

  # misc
  disableHLJS = true
  monoDarkIcon = true
  math = true

再打開 localhost:1313 應該就可以看到佈景大概的樣子了

建立第一篇文章

指令輸入

docker-compose exec server hugo new posts/hello-hugo.md

在目錄中的 /content/posts/ 中可以找到 hello-hugo.md，應該會長這樣

---
title: "Hello Hugo"
date: 2023-06-09T03:17:35Z
draft: true
---

寫完文章存擋後，雖然還是草稿狀態，但是因為我是用 server -D，所以在瀏覽器中會看到結果。如果是用 server 就需要把 Front Matter 中的草稿狀態給為 draft: false 才會看到。

準備部署

接著我們需要到 GitHub 開一個新的 repository 存放專案

把本機端的程式碼推上 GitHub，這邊要注意的是，如果你已經用過 docker-compose exec server hugo 指令產生靜態檔案，public 目錄下的檔案記得要加入 .gitignore，不需要上傳。

前面提過我的 Hugo 是部署在 DigitalOcean Apps，我們也需要到平台上開新的 App。授權 GitHub 權限、選擇 Repo，其他設定基本上不太需要更動

完成後 DigitalOcean Apps 會嘗試第一次部署，可以看見 DigitalOcean 把檔案都轉成靜態檔案，本文的 hello-hugo.md 也轉換成 /hello-hugo/index.html

部署完畢後可以用 DigitalOcean 預設的 Domain 來開啟網站，不過因為 baseURL 已經寫死成自己的網域，所以 CSS 那些都會跑版

最後就是把網域換成我們自己的網域，因為我的網域只有要拿來跑 Hugo，所以直接使用 DigitalOcean 的 DNS 就好

最終結果就是你看到的這個網站跟這篇文章啦 :D

參考文章