Use Hugo build website

使用Hugo建立靜態網站

Hello,大家🤞

之前的部落格是使用jekyll,最近想改成用Hugo,Host一樣是使用Github Page


介紹Windows及macOS安裝方法

我是使用Chocolatey這個套件管理程式安裝,安裝Chocolatey後在終端機輸入:

1
choco install hugo-extended

安裝完成後驗證一下:

1
hugo version

使用Homebrew安裝:

1
brew install hugo

安裝完成後驗證一下:

1
hugo version

建立Hugo專案,並進入專案資料夾

1
2
hugo new site my_website
cd my_website

加入網站主題(theme),透過submodule方式

1
2
git init
git submodule add https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt

修改網站設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
baseURL = "http://example.org/"
# 設定默認語言
defaultContentLanguage = "en"
# 語言
languageCode = "en"
title = "My New Hugo Site"

# 把預設的主題替換成DoIt
theme = "DoIt"

# 主題參數
[params]
  # DoIt主題版本
  version = "0.2.X"

# Nav右側選單
[menu]
  [[menu.main]]
    identifier = "posts"
    # 您可以在名稱前加入額外信息(支援HTML格式),例如icons
    pre = ""
    # 您可以在名稱後加入額外信息(支援HTML格式),例如icons
    post = ""
    name = "Posts"
    url = "/posts/"
    # title在滑鼠懸停時會顯示
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 3

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false

修改設定後執行指令:

1
hugo server -D
信息
使用hugo server,檔案被修改後網站會自動更新;-D表示包含Draft的內容

打開瀏覽器在網址輸入指令提供的網址,一般為http://localhost:1313,看到以下畫面就成功了😆。

/jekyll-to-hugo/hugo.png
Hugo DoIt

content/posts底下新增名稱為first_post的文章

1
hugo new posts/first_post.md
/jekyll-to-hugo/new-post.png
Hugo new post

叮叮結束,下一篇介紹將Hugo部屬到Github Page👏