在Windows中安裝Hugo

前言

其實之前有想過，想找個地方來記錄自己做過的或者研究過的東西，後來看到黑大的文章Hugo，就花點時間來研究一下，順便一邊紀錄XD。

安裝步驟

Windows Node 安裝
首先可以到Node的官方網站下載安裝檔，如果有安裝過node，但是版本太舊可以移除後更新，移除時還需要把npm的cache一起清除，不然npm安裝的版本會異常，cache通常會在C:\Users[UserName]\AppData\Roaming，資料夾裡會有 npm 、npm cache的資料夾都需要刪除。
安裝完畢後，可以使用下方指令確認版本
1
2
npm -v
node -v

Chocolatey 安裝
一樣到官網的安裝頁面，如果不想看也可以直接打開Power Shell使用指令來進行安裝，請記得使用Admin的權限啟動Power Shell。
1
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Hugo 安裝
打開powershell，一樣是Admin的權限輸入指令
1
choco install hugo
在提供一組是包含擴充的安裝指令，這邊提供是因為有些theme需要有擴充才能運行
1
choco install hugo-extended
確認安裝版本
1
choco hugo version

選擇主題theme
我們可以到官網這裡選擇，我選擇的是hugo-theme-stack，這個主題需要安裝的是hugo extended版本，不然local會無法運行。

建立本機運行的Hugo網站
起手式打開Power Shell，先切換到想要放置網站檔案的路徑，接著執行指令， [Folder Name] 這區塊請替換成自己想要建立的資料夾名稱。
1
hugo new site [Folder Name] 
接著我們來複製要使用的主題到Hugo網站裡，這邊使用的是git來處理，當然想要直接複製檔案也可以，使用剛剛的Power Shell先進入剛設定的Folder中，接著使用指令
1
2
git clone https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
簡單說明一下，第一個指令是複製主題，第二個是將複製的主題當作類似套件的感覺，也綁到git上，接著我們來做簡單的設定，要處理的是設定檔是檔名是config.toml，其實可以讀取的格式不只toml，還有 yaml跟json，這邊使用的是yaml，我們來簡單設定一下，
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# 網站網址
baseurl: https://www.google.com.tw/
# 語系
languageCode: zh-tw
# 主題
theme: hugo-theme-stack
# 首頁文章顯示數量
paginate: 20
# 網站名稱
title: 我是網站名稱
重頭戲來了，我們來啟動看看Hugo的網站吧，一樣的打開power shell，切到剛剛設定的Folder中執行指令
1
hugo server
預設啟動的連結http://localhost:1313/，可以直接在瀏覽器打開，如果power shell執行指令後出現版本不支援的錯誤，請安裝hugo extended版本。

結語
在這裡簡單做了Hugo的安裝以及初步運行，當然還離架站還有一段距離，後續有時間會持續更新。

參考連結
Hugo
hugo theme stack
超詳細的Hugo config設定說明
markdown