一、簡介

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.7install:# 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: pagesskip-cleanup: truelocal-dir: publictarget-branch: mastergithub-token: $GITHUB_TOKENkeep-history: trueon: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 #拷貝容器的配置文件到宿主機制定目錄

五、 最后

一句話 Hugo很優秀，如果你也正好需要建網站，可以考慮一下 Hugo。本文講了很多東西都不太詳細，代碼自動構建工具 Travis CI、Jenkins 值得深入一下。Docker 基本操作有興趣的伙伴也可以學習一下。如果能把這些項技能或者知識串聯起來，就可以產生不可思議的結果，就如本篇自動化構建部署前端項目一樣。哈哈開個玩笑，下期再見！

END

想讀Spring源碼？先從這篇「 極簡教程」開始

沒用過這些IDEA插件？怪不得寫代碼頭疼

99%的程序員都在用Lombok，原理竟然這么簡單？我也手擼了一個！|建議收藏！！！

總結

以上是生活随笔為你收集整理的想快速拥有个人网站？来试试这个...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。