2021最新 Hugo 部署 Netlify 教學(上) – 安裝 Hugo

本文教學以 Windows 系統為主。

Hugo 是一個使用 Go 語言編寫的靜態網站框架。

近年來靜態網站框架越來越流行,目前前三應屬於 Hugo、Hexo、JekyII,

至於哪一個比較好?這就見仁見智了,有興趣的自己Google一下。

本篇以教學為主,就不扯太多別的,直接進入正題。

安裝 Chocolatey

官方推薦使用 choco 套件管理工具來安裝Hugo,所以我們需要先安裝 choco。

有兩種方式可以安裝 choco,一種是用 CMD,一種是用 Powershell,看個人習慣吧。

使用 CMD 安裝

系統管理員身分開啟CMD 輸入下方指令:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

使用 Powershell 安裝

安裝前先確認系統的執行原則:

Get-ExecutionPolicy

如果返回的是 Restricted,則我們需要重設執行原則:

Set-ExecutionPolicy Bypass -Scope Process

重設完畢後即可安裝 choco。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

安裝完畢後輸入:choco,若有正常出現版本代表安裝成功。

https://i.imgur.com/yphjalG.png

安裝 Hugo

輸入下方指令安裝 hugo 包:

choco install hugo -confirm

安裝過程中可能會遇到該錯誤「拒絕存取路徑 'C:\ProgramData\chocolatey\.chocolatey'」,解決辦法是將 chocolatey 資料夾的使用者權限勾選全部。

https://i.imgur.com/PVusUV2.png
https://i.imgur.com/oXwxTh7.png
https://i.imgur.com/2FucVeR.png

設定完畢後再次輸入指令安裝 Hugo即可。

https://i.imgur.com/baostml.png

安裝完畢後確認是否安裝成功:

hugo version
https://i.imgur.com/1VJwsNx.png

現在,我們可以輸入指令生成網站資料夾:

hugo new site 網站資料夾名稱
//ex: hugo new site myblog
https://i.imgur.com/UDfSR1O.png
https://i.imgur.com/xIb30T8.png

安裝主題

我們可以在官方挑選一個主題:

https://themes.gohugo.io/

根據主題的安裝說明將主題克隆到網站的 themes 資料夾底下,比如:

git clone https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt
https://i.imgur.com/bJW0aRr.png

或者你也可以將主題下載到本地,解壓縮到網站的 themes 資料夾內。

https://i.imgur.com/TXfAo3K.png
https://i.imgur.com/7dOxOhR.png

接著將主題資料夾內 exampleSite 資料夾的所有內容複製貼上到網站根目錄(覆蓋):

https://i.imgur.com/FoiRME5.png
https://i.imgur.com/fw10UEP.png
https://i.imgur.com/fkU5yFg.png

接著修改根目錄底下的 config.toml

baseURL = "" # 本地測試先為空
theme = "DoIt" # 主題在 themes 內資料夾的名稱
title = "DoIt" # 網站的標題

啟動 Hugo

輸入下方指令即能啟動 Hugo:

hugo serve --disableFastRender
https://i.imgur.com/ea3lKiC.png

訪問 http://localhost:1313/ 瀏覽網頁看看是否成功。

如果是使用VSCode來編輯的話,推薦一個小技巧:

直接使用指令 simple browser,輸入網址 http://localhost:1313/ 即可在VSCode中分屏實時瀏覽網頁修改效果。

https://i.imgur.com/YrwUh1q.png
https://i.imgur.com/pMdKn3S.png
https://i.imgur.com/00DlntX.png

Hugo 目錄

這是生成的hugo目錄結構:

.
├── archetypes
│ └── default.md
├── config.toml    // 修改網頁的設定檔
├── content  // 文章與頁面存放的資料夾
├── data
├── layouts
├── static  // 存放靜態內容,比如照片、CSS和js檔
└── themes  // 從外部引入的主題檔案

對於目前的我們來說,只要大概知道 content、static 和 config.toml 是做什麼的就足夠。

0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論