了解 Hugo 如何使構(gòu)建網(wǎng)站變得有趣。

你是不是強(qiáng)烈地想搭建博客來將自己對(duì)軟件框架等的探索學(xué)習(xí)成果分享呢？你是不是面對(duì)缺乏指導(dǎo)文檔而一團(tuán)糟的項(xiàng)目就有一種想去改變它的沖動(dòng)呢？或者換個(gè)角度，你是不是十分期待能創(chuàng)建一個(gè)屬于自己的個(gè)人博客網(wǎng)站呢？

很多人在想搭建博客之前都有一些嚴(yán)重的遲疑顧慮：感覺自己缺乏內(nèi)容管理系統(tǒng)（CMS）的相關(guān)知識(shí)，更缺乏時(shí)間去學(xué)習(xí)這些知識(shí)。現(xiàn)在，如果我說不用花費(fèi)大把的時(shí)間去學(xué)習(xí) CMS 系統(tǒng)、學(xué)習(xí)如何創(chuàng)建一個(gè)靜態(tài)網(wǎng)站、更不用操心如何去強(qiáng)化網(wǎng)站以防止它受到黑客攻擊的問題，你就可以在 30 分鐘之內(nèi)創(chuàng)建一個(gè)博客？你信不信？利用 Hugo 工具，就可以實(shí)現(xiàn)這一切。

Hugo 是一個(gè)基于 Go 語言開發(fā)的靜態(tài)站點(diǎn)生成工具。也許你會(huì)問，為什么選擇它？

• 無需數(shù)據(jù)庫、無需需要各種權(quán)限的插件、無需跑在服務(wù)器上的底層平臺(tái)，更沒有額外的安全問題。
• 都是靜態(tài)站點(diǎn)，因此擁有輕量級(jí)、快速響應(yīng)的服務(wù)性能。此外，所有的網(wǎng)頁都是在部署的時(shí)候生成，所以服務(wù)器負(fù)載很小。
• 極易操作的版本控制。一些 CMS 平臺(tái)使用它們自己的版本控制軟件（VCS）或者在網(wǎng)頁上集成 Git 工具。而 Hugo，所有的源文件都可以用你所選的 VCS 軟件來管理。

0-5 分鐘：下載 Hugo，生成一個(gè)網(wǎng)站

直白的說，Hugo 使得寫一個(gè)網(wǎng)站又一次變得有趣起來。讓我們來個(gè) 30 分鐘計(jì)時(shí)，搭建一個(gè)網(wǎng)站。

為了簡(jiǎn)化 Hugo 安裝流程，這里直接使用 Hugo 可執(zhí)行安裝文件。

1. 下載和你操作系統(tǒng)匹配的 Hugo 版本；
2. 壓縮包解壓到指定路徑，例如 windows 系統(tǒng)的 C:hugo_dir 或者 Linux 系統(tǒng)的 ~/hugo_dir 目錄；下文中的變量 ${HUGO_HOME} 所指的路徑就是這個(gè)安裝目錄；
3. 打開命令行終端，進(jìn)入安裝目錄：cd ${HUGO_HOME}；

4. 確認(rèn) Hugo 已經(jīng)啟動(dòng)：

   • Unix 系統(tǒng)：${HUGO_HOME}/[hugo version]；
   • Windows 系統(tǒng)：${HUGO_HOME}[hugo.exe version]，例如：cmd 命令行中輸入：c:hugo_dirhugo version。

   為了書寫上的簡(jiǎn)化，下文中的 hugo 就是指 hugo 可執(zhí)行文件所在的路徑（包括可執(zhí)行文件），例如命令 hugo version 就是指命令 c:hugo_dirhugo version 。(LCTT 譯注：可以把 hugo 可執(zhí)行文件所在的路徑添加到系統(tǒng)環(huán)境變量下，這樣就可以直接在終端中輸入 hugo version）

   如果命令 hugo version 報(bào)錯(cuò)，你可能下載了錯(cuò)誤的版本。當(dāng)然，有很多種方法安裝 Hugo，更多詳細(xì)信息請(qǐng)查閱 官方文檔。最穩(wěn)妥的方法就是把 Hugo 可執(zhí)行文件放在某個(gè)路徑下，然后執(zhí)行的時(shí)候帶上路徑名

5. 創(chuàng)建一個(gè)新的站點(diǎn)來作為你的博客，輸入命令：hugo new site awesome-blog；

6. 進(jìn)入新創(chuàng)建的路徑下: cd awesome-blog；

恭喜你！你已經(jīng)創(chuàng)建了自己的新博客。

5-10 分鐘：為博客設(shè)置主題

Hugo 中你可以自己構(gòu)建博客的主題或者使用網(wǎng)上已經(jīng)有的一些主題。這里選擇 Kiera 主題，因?yàn)樗?jiǎn)潔漂亮。按以下步驟來安裝該主題：

1. 進(jìn)入主題所在目錄：cd themes；
2. 克隆主題：git clone https://github.com/avianto/hugo-kiera kiera。如果你沒有安裝 Git 工具：
   • 從 Github 上下載 hugo 的 .zip 格式的文件；
   • 解壓該 .zip 文件到你的博客主題 theme 路徑；
   • 重命名 hugo-kiera-master 為 kiera；
3. 返回博客主路徑：cd awesome-blog；

4. 激活主題；通常來說，主題（包括 Kiera）都自帶文件夾 exampleSite，里面存放了內(nèi)容配置的示例文件。激活 Kiera 主題需要拷貝它提供的 config.toml 到你的博客下：

   • Unix 系統(tǒng)：cp themes/kiera/exampleSite/config.toml .；
   • Windows 系統(tǒng)：copy themeskieraexampleSiteconfig.toml .；
   • 選擇 Yes 來覆蓋原有的 config.toml；

5. （ 可選操作 ）你可以選擇可視化的方式啟動(dòng)服務(wù)器來驗(yàn)證主題是否生效：hugo server -D 然后在瀏覽器中輸入 http://localhost:1313?？捎猛ㄟ^在終端中輸入 Crtl+C 來停止服務(wù)器運(yùn)行?，F(xiàn)在你的博客還是空的，但這也給你留了寫作的空間。它看起來如下所示：

你已經(jīng)成功的給博客設(shè)置了主題！你可以在官方 Hugo 主題 網(wǎng)站上找到上百種漂亮的主題供你使用。

10-20 分鐘：給博客添加內(nèi)容

對(duì)于碗來說，它是空的時(shí)候用處最大，可以用來盛放東西；但對(duì)于博客來說不是這樣，空博客幾乎毫無用處。在這一步，你將會(huì)給博客添加內(nèi)容。Hugo 和 Kiera 主題都為這個(gè)工作提供了方便性。按以下步驟來進(jìn)行你的第一次提交：

1. archetypes 將會(huì)是你的內(nèi)容模板。

2. 添加主題中的 archtypes 至你的博客：

   • Unix 系統(tǒng)： cp themes/kiera/archetypes/* archetypes/
   • Windows 系統(tǒng)：copy themeskieraarchetypes* archetypes
   • 選擇 Yes 來覆蓋原來的 default.md 內(nèi)容架構(gòu)類型

3. 創(chuàng)建博客 posts 目錄：

   • Unix 系統(tǒng)： mkdir content/posts
   • Windows 系統(tǒng)： mkdir contentposts

4. 利用 Hugo 生成你的 post：

   • Unix 系統(tǒng)：hugo nes posts/first-post.md;
   • Windows 系統(tǒng)：hugo new postsfirst-post.md;

5. 在文本編輯器中打開這個(gè)新建的 post 文件：

   • Unix 系統(tǒng)：gedit content/posts/first-post.md；
   • Windows 系統(tǒng)：notepadd contentpostsfirst-post.md；

此刻，你可以瘋狂起來了。注意到你的提交文件中包括兩個(gè)部分。第一部分是以 +++ 符號(hào)分隔開的。它包括了提交文檔的主要數(shù)據(jù)，例如名稱、時(shí)間等。在 Hugo 中，這叫做前綴。在前綴之后，才是正文。下面編輯第一個(gè)提交文件內(nèi)容：

1. +++
2. title ="First Post"
3. date=2018-03-03T13:23:10+01:00
4. draft =false
5. tags =["Getting started"]
6. categories =[]
7. +++
8. HelloHugo world!Nomore excuses for having no blog or documentation now!

現(xiàn)在你要做的就是啟動(dòng)你的服務(wù)器：hugo server -D；然后打開瀏覽器，輸入 http://localhost:1313/。

20-30 分鐘：調(diào)整網(wǎng)站

前面的工作很完美，但還有一些問題需要解決。例如，簡(jiǎn)單地命名你的站點(diǎn)：

1. 終端中按下 Ctrl+C 以停止服務(wù)器。
2. 打開 config.toml,編輯博客的名稱，版權(quán)，你的姓名，社交網(wǎng)站等等。

當(dāng)你再次啟動(dòng)服務(wù)器后，你會(huì)發(fā)現(xiàn)博客私人訂制味道更濃了。不過，還少一個(gè)重要的基礎(chǔ)內(nèi)容：主菜單?？焖俚慕鉀Q這個(gè)問題。返回 config.toml 文件，在末尾插入如下一段：

1. [[menu.main]]
2. name ="Home"#Namein the navigation bar
3. weight =10#The larger the weight, the more on the right this item will be
4. url ="/"#URL address
5. [[menu.main]]
6. name ="Posts"
7. weight =20
8. url ="/posts/"

上面這段代碼添加了 Home 和 Posts 到主菜單中。你還需要一個(gè) About 頁面。這次是創(chuàng)建一個(gè) .md 文件，而不是編輯 config.toml 文件：

1. 創(chuàng)建 about.md 文件：hugo new about.md 。注意它是 about.md，不是 posts/about.md。該頁面不是博客提交內(nèi)容，所以你不想它顯示到博客內(nèi)容提交當(dāng)中吧。
2. 用文本編輯器打開該文件，輸入如下一段：

1. +++
2. title ="About"
3. date=2018-03-03T13:50:49+01:00
4. menu ="main"#Displaythis page on the nav menu
5. weight ="30"#Right-most nav item
6. meta ="false"#Donot display tags or categories
7. +++
8. >Waves are the practice of the water.ShunryuSuzuki

當(dāng)你啟動(dòng)你的服務(wù)器并輸入：http://localhost:1313/，你將會(huì)看到你的博客。（訪問我 Gihub 主頁上的 例子 ）如果你想讓文章的菜單欄和 Github 相似，給 themes/kiera/static/css/styles.css 打上這個(gè) 補(bǔ)丁。

via: https://opensource.com/article/18/3/start-blog-30-minutes-hugo

作者：Marek Czernek ?譯者：jrg ?校對(duì)：wxy

本文由 LCTT 原創(chuàng)編譯，Linux中國 榮譽(yù)推出