Hugo

緣起

看到網路上有許多人從 Hexo 搬移至 Hugo，看起來比較多人在用因此選擇 Hugo 作為框架，不過對我來說只要能支援 Markdown 並且無長度上的限制就好了。

注意事項

我使用 Docker 來建立，並選擇 Stack 主題，要注意的是 Docker img 要選擇 hugo extended 不然有些主題(如Stack)回無法運行，如果是選擇直接安裝也建議使用 extended 版本。

安裝步驟

以下操作是搭配git做版本控管，並將 Stack 主題作為 git submodule

初始化，在終端機輸入以下指另建立一個blog的資料夾作為網站根目錄，並初始化 git

1
2
3


hugo new site blog
cd blog
git init

接著將 Stack 主題下載到themes中

1

git submodule add git://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

將 exampleSite 中的 content 複製到 content

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


├─content #貼上到這裡
│  ├─page 
│  │      about.md
│  │      archives.md
│  │      search.md
└─themes
    └─hugo-theme-stack
        ├─exampleSite
        │  └─content #複製這裡
        │      ├─page #複製
        │      │      about.md
        │      │      archives.md
        │      │      search.md 

將 exampleSite 中的 hugo.yaml 複製到 blog 根目錄中，並刪除預設的 config.toml

到此 Hugo 與 Stack 主題基本的配置完了…吧？！

調整字體

在themes\hugo-theme-stack\assets\scss\custom.scss加入下方code就可以將字體改為思源黑體

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


/*-----------字體----------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:[email protected]&family=Noto+Serif+SC:[email protected]&display=swap');
// 文章字體
body, .article-content {
  font-family: "Noto Sans TC", sans-serif;
}

// 標題字體
body, .article-title {
  font-family: "Noto Sans TC", sans-serif;
}


// 首頁字體
body, .article-page {
  font-family: "Noto Sans TC", sans-serif;