Hugo 搭建筆記(ㄧ)

最近比較有時間可以做一些有興趣的事情，就趁機記錄一下

以前在開始想要寫網誌時，有做了一些survey，像是Medium、Hashnode以及使用framework(Hugo和Hexo)加上github pages 搭建的方式，後面因為很懶得寫MD跟使用很高級的語法來豐富網誌和建置管理，就一直使用Medium和Hashnode了，之前有試著部署Hexo到自己的github page，但沒有繼續的維護，最近想要玩一些東西，所需要的就是一個網誌網站，在Hugo和Hexo兩個中選擇，由於Hugo是由Golang編寫的速度可以保證，就選擇使用Hugo搭建，以下是我個人所搭建的心得紀錄。

個人環境是使用MacOS

安裝Hugo

brew install hugo

建立網誌專案

hugo new site demo

在本機啟動

hugo server -D

啟動後的畫面

可以看到啟動後空空如也，這時候可以去Hugo Themes選取喜歡的Theme，

我自己是選擇LoveIt，有不錯的文件說明還有中文註釋，對於想簡單架設的我來說很適合，作者提供了幾種做法可以安裝theme，

直接下載zip並在themes/ 資料夾中解壓縮

或是使用

git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

我自己是因為要上傳到github pages所以使用

git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

安裝好Theme後需要在config.toml中指定使用的theme是什麼

baseURL = 'http://example.org/'
languageCode = 'en-us' 
title = 'My New Hugo Site' 
theme = 'Loveit'

修改好後再重新啟動hugo就可以看到Theme已經好了

再來就可以開始修改Theme把他改造成自己喜歡的模樣了!

專案目錄下的config.toml是全局的config，如果要修改局部的就要到themes/LoveIt/config.toml中修改，主要的設定說明config都有註解，我就提一些我自己有做的修改，首先是作者配置

再來是底部的文字，修改themes/LoveIt/config.toml

# Footer config
# 页面底部信息配置
[params.footer]
enable = true
# Custom content (HTML format is supported)
# 自定义内容 (支持 HTML 格式)
custom = "Powered by Demo"
# whether to show Hugo and theme info
# 是否显示 Hugo 和主题信息
hugo = false
# whether to show copyright info
# 是否显示版权信息
copyright = true
# whether to show the author
# 是否显示作者
author = true
# site creation time
# 网站创立年份
since = 2022
# ICP info only in China (HTML format is supported)
# ICP 备案信息，仅在中国使用 (支持 HTML 格式)
icp = ""
# license info (HTML format is supported)
# 许可协议信息 (支持 HTML 格式)
license= ""

儲存後就會看網站下方已經改變了

再來是更新網站title和中間的文字

全局config.toml

title = 'This is demo site'

themes/LoveIt/config.toml

# Header config
# 页面头部导航栏配置
[params.header]
# title name
# 标题名称
name = "My demo site"
# Home page config
# 主页信息设置
[params.home]
# 主页显示的网站副标题 (允许 HTML 格式)
subtitle = "This is my demo site"

再來就是如何設置menu，假設要設置三個目錄並支援中英文語系切換

全局config.toml

[languages]
[languages.zh-tw]
weight = 1
title = "展示"
languageCode = "zh-TW"
languageName = "繁體中文"
hasCJKLanguage = true
[[languages.zh-tw.menu.main]]
weight = 1
identifier = "demo1"
pre = ""
post = ""
name = "展示1"
url = "/demo1/"
title = ""
[[languages.zh-tw.menu.main]]
weight = 2
identifier = "demo2"
pre = ""
post = ""
name = "展示2"
url = "/demo2/"
title = ""
[[languages.zh-tw.menu.main]]
weight = 3
identifier = "demo3"
pre = ""
post = ""
name = "展示3"
url = "/demo3/"
title = ""
[languages.en]
weight = 2
title = "Demo"
languageCode = "en"
languageName = "English"
[[languages.en.menu.main]]
weight = 1
identifier = "demo1"
pre = ""
post = ""
name = "Demo1"
url = "/demo1/"
title = ""
[[languages.en.menu.main]]
weight = 2
identifier = "demo2"
pre = ""
post = ""
name = "Demo2"
url = "/demo2/"
title = ""
[[languages.en.menu.main]]
weight = 3
identifier = "demo3"
pre = ""
post = ""
name = "Demo3"
url = "/demo3/"
title = ""

簡單的設置一下就可以開始寫文章了，

新增文章可以使用hugo 指令也可以自己新增.md

由於我們有用雙語系，所以同一個文章要產生對應雙語言

hugo new demo1/demo1.en.md
hugo new demo1/demo1.zh-tw.md
hugo new demo2/demo2.en.md
hugo new demo2/demo2.zh-tw.md
hugo new demo3/demo3.en.md
hugo new demo3/demo3.zh-tw.md

到這邊的分享就結束啦，至於Markdown編輯器的話，我自己本身是用IDEA IDE編輯，如果是免費的話推薦Marktext。

下一篇會提到如何上傳並建立Gihub pages。