Hugo入門詳細教程_ZenDei技術網路在線

原文鏈接https://youendless.com/post/hugo_base/ ，主題 https://github.com/kingfsen/Mainroad 首先訪問Github下載Hugo的應用程式，Hugo各版本release文件下載地址 https://github.com/gohu ...

原文鏈接https://youendless.com/post/hugo_base/ ，主題 https://github.com/kingfsen/Mainroad

首先訪問Github下載Hugo的應用程式，Hugo各版本release文件下載地址 https://github.com/gohugoio/hugo/releases ， windows請選擇下載hugo_0.xx.0_Windows-64bit.zip。下載完成止之後解壓文件至D:\soft\hugo_0.54，然後把該路徑添加到系統環境變數Path中，執行 hugo version 命令驗證是否安裝成功。

C:\Users\kingfsen>hugo version
Hugo Static Site Generator v0.54.0-B1A82C61 windows/amd64 BuildDate: 2019-02-01T09:42:02Z

通過執行 hugo –help 查看命令幫助

C:\Users\kingfsen>hugo --help
hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Copy

執行 hugo config查看hugo的預設配置信息，各配置參數可以通過在站點的全局配置文件config.toml中進行修改。

目錄結構

在E盤新建目錄website，然後通過Hugo把站點生成到E:/website下，比如我現在新建一個站點second-blog，執行如下命令

kingfsen@LAPTOP-M85G5JUT MINGW64 /e/website
$ hugo new site E:/website/second-blog
Congratulations! Your new Hugo site is created in E:\website\second-blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Copy

命令執行成功之後查看E:/website/second-blog目錄，查看文件目錄結構。

│  config.toml
│
├─archetypes
│      default.md
│
├─content
├─data
├─layouts
├─static
└─themes

Copy

config.toml
站點全局的參數配置文件
archetypes
Hugo的markdown文件中前置數據Front Matter定義的結構，預設使用的是default.md文件，可以自定義，然後在config.toml中指定自定義的結構文件，打開default.md文件。
```
  ---
  title: "{{ replace .Name "-" " " | title }}"
  date: {{ .Date }}
  draft: true
  ---
```
Copy
這是一種yaml格式，前面的文章說過，Front Matter支持三種格式，除了yaml，還支持toml，json方式。

toml
```
+++
title = "{{ replace .Name "-" " " | title }}"
date = {{ .Date }}
draft = true
+++
```
Copy
json
```
{
  "title":"{{ replace .Name "-" " " | title }}",
  "date":{{ .Date }},
  "draft":true
}
```
Copy
至於喜歡哪種格式，可以在config.toml中進行配置，預設使用的是yaml格式。通過執行hugo new 命令生成的markdown文件，頭部預設會有這段渲染之後的Front Matter，一般我們會把draft屬性去掉，draft草稿的意思，有這個屬性的md文件不會渲染輸出，當然通過hugo –buildDrafts可以強制輸出。
content
存放網頁內容的目錄，即我們編寫的markdown文件都存放在此目錄，此目錄是Hugo的預設源目錄，在E:/website/second-blog下執行命令 hugo new post/hugo_introduce.md之後，則會在content目錄下生成子目錄post，post中有一個hugo_introduce.md文件。
data
data目錄用來存放數據文件，一般是json文件，Hugo提供了相關命令可以從data目錄下讀取相關的文件數據，然後渲染到HTML頁面中，將業務數據與模板分離。
layouts
存放自定義的模板文件，Hugo優先使用layouts目錄下的模板，未發現再去themes目錄下查找。
static
存放靜態文件，比如css、js、img等文件目錄，Hugo在渲染時，會直接將static目錄下的文件直接複製到public目錄下，不會做任何渲染。
themes
存放網站主題，可以下載多個主題，themes目錄下的每個子目錄代表了一個主題，可以通過在config.toml中通過參數theme指定主題，即theme目錄下的子目錄名字，也可以在執行hugo命令渲染時通過增加flag參數–theme=xx指定。

配置主題

一個靜態站點的佈局外觀離不開css樣式，在Hugo中通過主題theme來管理樣式，在Hugo的官方網站即可預覽下載社區提供的很多主題，當然我們也可以通過github下載對應的主題，點擊這裡可以獲取Hugo的全部主題，大部分主題提供了圖片預覽或者Demo線上預覽，自由選擇下載即可。

這裡我選擇排在第一個的主題AllinOne，進入E:\website\second-blog\themes，執行git clone命令下載主題。

kingfsen@LAPTOP-M85G5JUT MINGW64 /e/website/second-blog/themes
$ git clone https://github.com/orianna-zzo/AllinOne.git
Cloning into 'AllinOne'...
remote: Enumerating objects: 962, done.
remote: Total 962 (delta 0), reused 0 (delta 0), pack-reused 962
Receiving objects: 100% (962/962), 24.18 MiB | 32.00 KiB/s, done.
Resolving deltas: 100% (357/357), done.

命令執行成功之後，在themes目錄下則有主題目錄AllinOne，這個主題中的Example中圖片有點多，比較大。在github上可以查看該主題的基本介紹以及詳細的參數設置，主題很多都是個人提供出來，可能參差不齊，自行判斷。我們也可以製作自己的主題，上傳到github上，或者在github上fork一個主題分支，在別人的基礎上進行開發定製。

站點調試

Hugo提供了liveload方式，在執行hugo命令時通過增加flag參數即可。服務啟動之後，可以一邊修改內容文件或者html模板，瀏覽器會馬上刷新，實時展示最新結果，在本地調試開發非常方便。進入站點根目錄second-blog目錄，新建一個md文件，就比如我當前這個頁面hugo_introduce.md文件，markdown這種輕量型標記語言非常容易學會，花點時間看幾遍其語法就能學會。

$ hugo new post/hugo_introduce.md
E:\website\second-blog\content\post\hugo_introduce.md created

文件創建成功之後，通過其他工具打開hugo_introduce.md文件豐富一下內容，我們可以在本地啟動調試，這裡我為了方便直接把md文件中的draft屬性去掉了。

hugo server --watch --theme=AllinOne

命令執行之後，發現報了一堆錯誤，仔細一看就是在主題下的模板強制要求定義Site.Params.slidesDirPath等屬性，打開config.toml配置文件增加參數即可，由於我這裡沒有準備圖片，暫時就用AllinOne自帶的預設配置，後序準備好了圖片直接放在站點根目錄下的static即可，再替換路徑即可。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Hugo入門詳細教程"

[Params]
slidesDirPath = "themes/AllinOne/static/img/header-slides"  
slidesDirPathURL = "img/header-slides"

配置增加之後，記得點擊保存，再次啟動本地服務，命令執行成功之後，服務預設在localhost的1313埠，至於埠也可以自行在config.toml中配置，不知道參數名是什麼，直接執行hugo config命令查看。

$ hugo server --watch --theme=AllinOne
Building sites …
                   | EN
+------------------+-----+
  Pages            |   7
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 108
  Processed images |   0
  Aliases          |   0
  Sitemaps         |   1
  Cleaned          |   0

Total in 53 ms
Watching for changes in E:\website\second-blog\{content,data,layouts,static,themes}
Watching for config changes in E:\website\second-blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Copy

服務啟動之後，用瀏覽器訪問 http://localhost:1313 ，此時沒有文章內容，豐富一下hugo_introduce.md文件，推薦使用Notepad2編寫markdown文件，非常簡潔，當然你喜歡通過第三方專業的markdown編輯軟體也可以，不過個人感覺真沒那個必要。

---
title: "Hugo構建靜態站點入門"
date: 2019-03-31T12:54:26+08:00
description: "介紹Hugo生成靜態網站的基礎知識，讓你快速入門，輕鬆部署屬於自己的靜態站點"
thumbnail: "img/hugo.png"
Tags: 
- hugo
Categories:
- hugo
---

首先訪問Github下載Hugo的應用程式，Hugo各版本release文件下載地址 https://github.com/gohugoio/hugo/releases ， windows請選擇下載hugo_0.xx.0_Windows-64bit.zip。
下載完成止之後解壓文件至D:\soft\hugo_0.54，然後把該路徑添加到系統環境變數Path中，執行 hugo version 命令驗證是否安裝成功。

Copy

查看頁面，HTML已經實時渲染了，一邊編寫文章，一邊查看頁面效果是否與預期一致，非常方便，速度很快。

theme

站點部署

通過直接執行hugo server命令在站點目錄下不會生成輸出目錄public，這個目錄是預設的輸出目錄，當然可以通過命令或者config.toml進行配置。

$ hugo --theme=AllinOne
Building sites …
                   | EN
+------------------+-----+
  Pages            |  14
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 108
  Processed images |   0
  Aliases          |   1
  Sitemaps         |   1
  Cleaned          |   0

Total in 129 ms

Copy

站點調試沒問題之後，則可以部署到伺服器上了。通過執行hugo命令會將渲染後的站點文件全部輸出到站點目錄下的public目錄中，然後可以把public目錄中的東西直接提交到github上，或者以Github Pages方式發佈，或者部署到自己伺服器上，由於站點文件均是靜態文件，只需一個Nginx即可將站點運行起來，項目每次有更新，只需先執行 git pull，然後通過命令nginx -s reload重新載入即可。

本篇文章講解了Hugo的基本入門操作，後面會講解Hugo的運行機制以及詳細的其他站點配置，請通過點擊Tag中的hugo或者Category中的hugo閱讀Hugo相關博文。