Hugo入門詳細教程

番茄西紅柿發(fā)布于2019-04-23 11:42 / 1650人閱讀

摘要：這是一種格式，前面的文章說過，支持三種格式，除了，還支持，方式。至于喜歡哪種格式，可以在中進行配置，默認使用的是格式。

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

首先訪問Github下載Hugo的應(yīng)用程序，Hugo各版本release文件下載地址 https://github.com/gohugoio/hugo/releases ， windows請選擇下載hugo_0.xx.0_Windows-64bit.zip。下載完成止之后解壓文件至D:softhugo_0.54，然后把該路徑添加到系統(tǒng)環(huán)境變量Path中，執(zhí)行 hugo version 命令驗證是否安裝成功。

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

通過執(zhí)行 hugo –help 查看命令幫助

C:Userskingfsen>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

執(zhí)行 hugo config查看hugo的默認配置信息，各配置參數(shù)可以通過在站點的全局配置文件config.toml中進行修改。

目錄結(jié)構(gòu)

在E盤新建目錄website，然后通過Hugo把站點生成到E:/website下，比如我現(xiàn)在新建一個站點second-blog，執(zhí)行如下命令

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

Just a few more steps and youre 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 " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new .".
3. Start the built-in live server via "hugo server".

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

Copy

命令執(zhí)行成功之后查看E:/website/second-blog目錄，查看文件目錄結(jié)構(gòu)。

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

Copy

config.toml
站點全局的參數(shù)配置文件
archetypes
Hugo的markdown文件中前置數(shù)據(jù)Front Matter定義的結(jié)構(gòu)，默認使用的是default.md文件，可以自定義，然后在config.toml中指定自定義的結(jié)構(gòu)文件，打開default.md文件。
```
  ---
  title: "{{ replace .Name "-" " " | title }}"
  date: {{ .Date }}
  draft: true
  ---
```
Copy
這是一種yaml格式，前面的文章說過，F(xiàn)ront 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格式。通過執(zhí)行hugo new 命令生成的markdown文件，頭部默認會有這段渲染之后的Front Matter，一般我們會把draft屬性去掉，draft草稿的意思，有這個屬性的md文件不會渲染輸出，當然通過hugo –buildDrafts可以強制輸出。
content
存放網(wǎng)頁內(nèi)容的目錄，即我們編寫的markdown文件都存放在此目錄，此目錄是Hugo的默認源目錄，在E:/website/second-blog下執(zhí)行命令 hugo new post/hugo_introduce.md之后，則會在content目錄下生成子目錄post，post中有一個hugo_introduce.md文件。
data
data目錄用來存放數(shù)據(jù)文件，一般是json文件，Hugo提供了相關(guān)命令可以從data目錄下讀取相關(guān)的文件數(shù)據(jù)，然后渲染到HTML頁面中，將業(yè)務(wù)數(shù)據(jù)與模板分離。
layouts
存放自定義的模板文件，Hugo優(yōu)先使用layouts目錄下的模板，未發(fā)現(xiàn)再去themes目錄下查找。
static
存放靜態(tài)文件，比如css、js、img等文件目錄，Hugo在渲染時，會直接將static目錄下的文件直接復(fù)制到public目錄下，不會做任何渲染。
themes
存放網(wǎng)站主題，可以下載多個主題，themes目錄下的每個子目錄代表了一個主題，可以通過在config.toml中通過參數(shù)theme指定主題，即theme目錄下的子目錄名字，也可以在執(zhí)行hugo命令渲染時通過增加flag參數(shù)–theme=xx指定。

配置主題

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

這里我選擇排在第一個的主題AllinOne，進入E:websitesecond-blogthemes，執(zhí)行g(shù)it 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.

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

站點調(diào)試

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

$ hugo new post/hugo_introduce.md
E:websitesecond-blogcontentposthugo_introduce.md created

文件創(chuàng)建成功之后，通過其他工具打開hugo_introduce.md文件豐富一下內(nèi)容，我們可以在本地啟動調(diào)試，這里我為了方便直接把md文件中的draft屬性去掉了。

hugo server --watch --theme=AllinOne

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

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

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

配置增加之后，記得點擊保存，再次啟動本地服務(wù)，命令執(zhí)行成功之后，服務(wù)默認在localhost的1313端口，至于端口也可以自行在config.toml中配置，不知道參數(shù)名是什么，直接執(zhí)行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:websitesecond-blog{content,data,layouts,static,themes}
Watching for config changes in E:websitesecond-blogconfig.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

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

---
title: "Hugo構(gòu)建靜態(tài)站點入門"
date: 2019-03-31T12:54:26+08:00
description: "介紹Hugo生成靜態(tài)網(wǎng)站的基礎(chǔ)知識，讓你快速入門，輕松部署屬于自己的靜態(tài)站點"
thumbnail: "img/hugo.png"
Tags: 
- hugo
Categories:
- hugo
---

首先訪問Github下載Hugo的應(yīng)用程序，Hugo各版本release文件下載地址 https://github.com/gohugoio/hugo/releases ， windows請選擇下載hugo_0.xx.0_Windows-64bit.zip。
下載完成止之后解壓文件至D:softhugo_0.54，然后把該路徑添加到系統(tǒng)環(huán)境變量Path中，執(zhí)行 hugo version 命令驗證是否安裝成功。

Copy

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

站點部署

通過直接執(zhí)行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

站點調(diào)試沒問題之后，則可以部署到服務(wù)器上了。通過執(zhí)行hugo命令會將渲染后的站點文件全部輸出到站點目錄下的public目錄中，然后可以把public目錄中的東西直接提交到github上，或者以Github Pages方式發(fā)布，或者部署到自己服務(wù)器上，由于站點文件均是靜態(tài)文件，只需一個Nginx即可將站點運行起來，項目每次有更新，只需先執(zhí)行 git pull，然后通過命令nginx -s reload重新加載即可。

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