一、簡介
Hugo 是Go語言實現的一款靜態網站生成器。它簡單、易用、高效、易擴展、快速部署。相比較其他靜態網站生成器，它的優點有這幾點：
- 項目構建特別快
- 主題目錄與站點目錄結構一樣
- 配置文件爲
*.toml格式，語法常簡單易懂，沒有縮進的要求
二、快速搭建
2.1 安裝 Hugo
下載地址：https://github.com/gohugoio/hugo/releases
根據自己的操作系統下載不同的版本。並將 hugo 添加到環境變量。
2.2 生成站點
執行下面這些命令就可以創建自己的站點了。
cd d:/myWebSite #切換目錄
hugo new site website-demo #創建站點
站點目錄結構如下:
+------------
│ config.toml
├─archetypes
│ default.md
├─content
├─data
├─layouts
├─static
└─themes
2.3本地運行
2.3.1 創建文章
1.創建一個 aboutme.md 文件，命令行執行
hugo new aboutme.md
項目根目錄 content 文件夾下會生成 aboutme.md文件，用文本編輯打開文件，編輯保存即可。內容如下：
---
title: "Aboutme"
date: 2020-03-28T23:36:36+08:00
draft: true
---
大家好，我叫不安分的猿人！
2.創建一篇 firstArticle.md,執行下面命令會在項目根目錄post 文件夾下生成 firstArticle.md文件。
hugo new post/firstArticle.md
2.3.2 添加主題
執行下面命令，就可以下載主題到本地，運行項目就可以查看自己的靜態網站了。
cd themes
git clone https://github.com/spf13/hyde.git
2.3.3 運行項目
執行如下命令，就可以本地運行站點了。
hugo server --theme=hyde --buildDrafts
效果如下圖：
是不是超級簡單，3分鐘就可以構建自己的站點。有的夥伴可能會問這樣的網站也太low了，誰會用？其實上面將的這些內容只是讓搭建感受一下最原始的方式搭建自己的站點，接下來就講講高階一些的方法。
三、切換主題
官方網站有很多主題，任由我們選擇。官方網站地址：https://themes.gohugo.io/
也可以直接在Github下載主題，地址：https://github.com/gohugoio/hugoThemes
主題大體可以分爲三類：
- 個人網站/博客：https://themes.gohugo.io/hugo-theme-dream/
- 商業網站：https://themes.gohugo.io/resto-hugo/
- 在線簡歷：https://themes.gohugo.io/theme/hugo-devresume-theme/
快速體驗
- 使用
git clone url下載相應的題，注意最好將主題下載到themes目錄。 - 找到主題下的
exampleSite目錄，拷貝目錄下的config.toml文件內容到站點根目錄的config.toml中。 - 找到主題下的
exampleSite目錄，拷貝content目錄下的所有文件到站點根目錄content文件夾。 - 執行
hugo server就可以運行了。
運行效果如下圖：
有了主題就是能好看一下哈！如果你還不滿意這樣的顯示效果，那麼就開啓自定設計之路吧。每個主題都有 layouts 目錄，這裏就是一些靜態模板，上手改就對了。模板的內容如下：
{{ $paginator := .Paginate (where .Data.Pages "Section" "in" .Site.Params.mainSections) }}
{{ range $paginator.Pages }}
<article class="article article-type-post" itemscope="" itemprop="blogPost">
<div class="article-inner">
{{ if and (isset .Params "banner") (not (eq .Params.banner "")) }}
<a href="{{ .Permalink }}" itemprop="url">
<img src="{{ .Params.banner | absURL }}" class="article-banner">
{{ end }}
</a>
{{ partial "article_header" . }}
<div class="article-entry" itemprop="articleBody">
<p>
{{ .Description | default .Summary }}
</p>
<p class="article-more-link">
<a href="{{ .Permalink }}">
{{with .Site.Data.l10n.articles.read_more}}{{.}}{{end}}
</a>
</p>
</div>
{{ partial "article_footer" . }}
</div>
</article>
{{ end }}
{{ partial "pagination" . }}
上面的這段代碼的大概意思是文章分頁展示。基本語法可以在網上搜一搜。
四、服務器部署
4.1 Github 配置自動打包
創建分支source
source 分支提交項目源碼，將打包好的項目通過 CI 工具自動提交的 master 分支，使用Github Pages 部署我們的靜態項目。注:基於 Github 創建靜態項目，需創建倉庫名爲 username.github.io 的倉庫。
創建文件.travis.yml
在項目根目錄創建 .travis.yml 文件，配置文件內容如下：
dist: bionic
language: python # 默認是ruby
python: 3.7
install:
# nuo主題需要extended版本的hugo，其他主題可以用最新的普通版本就行
- wget https://github.com/gohugoio/hugo/releases/download/v0.58.3/hugo_extended_0.58.3_Linux-64bit.deb
- sudo dpkg -i hugo*.deb
script:
- hugo
# 構建完成後會自動更新Github Pages
deploy:
provider: pages
skip-cleanup: true
local-dir: public
target-branch: master
github-token: $GITHUB_TOKEN
keep-history: true
on:
branch: source
文件內容很明確:指定代碼構建的工具爲python3.7，安裝最新的hugo 工具，代碼構建是基於 source 分支構建的，將構建好的項目提交到 master 分支。這裏注意 github-token: $GITHUB_TOKEN這行內容，需要手動創建一個 Personal access tokens，
地址: https://github.com/settings/tokens/new
操作如下圖:
點擊生成之後，複製生成的 Token（注意：關閉頁面後就找不到了），留作下一步Travis CI設置用。
Travis CI配置
通過Github賬號授權登錄 Travis CI，https://travis-ci.org/
添加需要自動構建的項目，如下圖:
點擊後面的settings，在 Environment Variables 中添加NAME填 GITHUB_TOKEN，VALUE填上一步生成的 Token
提交代碼
接下來在 source 分支提交代碼，打包後的項目就會自動提交到 master 分支，使用 Github Pages 就可以實現自動部署我們的項目了。
我搭建的博客地址:https://hellorestlessman.github.io/
4.2 docker 部署
如果你有自己的服務，那麼也可以部署項目到自己的服務，最好的方式是在自己的服務器上跑一個像Jenkins 的自動化構建工具，當提交代碼後，自動打包，打包完成後自動部署。服務器安裝 Jenkins 有很多方式，這裏就不細說了。我就大概將一下服務器上如何部署前端項目。
這裏以 Docker 容器爲例，服務器安裝好 Docker 後，執行如下命令即可部署前端項目:
docker run --name nginx_test1 -d -p 3000:80 -v /usr/web/html/:/usr/share/nginx/html nginx #指定宿主機靜態資源路徑
docker run --name nginx_test2 -d -p 80:80 -v /nginx/html:/usr/share/nginx/html -v /nginx/conf/nginx.conf:/etc/nginx/nginx.conf nginx #指定宿主機靜態資源，掛在外部配置文件
這裏注意，先臨時啓動一個nginx容器，獲取一下 nginx.conf，執行如下命令：
docker run -d -p 8088:80 --name nginx_tmp nginx #宿主機8080端口啓動nginx
docker cp nginx_tmp:/etc/nginx/nginx.conf /nginx/conf/nginx.conf #拷貝容器的配置文件到宿主機制定目錄
五、 最後
docker run -d -p 8088:80 --name nginx_tmp nginx #宿主機8080端口啓動nginx
docker cp nginx_tmp:/etc/nginx/nginx.conf /nginx/conf/nginx.conf #拷貝容器的配置文件到宿主機制定目錄
五、 最後
一句話 Hugo很優秀，如果你也正好需要建網站，可以考慮一下 Hugo。本文講了很多東西都不太詳細，代碼自動構建工具 Travis CI、Jenkins 值得深入一下。 Docker 基本操作有興趣的夥伴也可以學習一下。如果能把這些項技能或者知識串聯起來，就可以產生不可思議的結果，就如本篇自動化構建部署前端項目一樣。哈哈開個玩笑，下期再見！
