一、簡(jiǎn)介

Hugo 是Go語(yǔ)言實(shí)現(xiàn)的一款靜態(tài)網(wǎng)站生成器。它簡(jiǎn)單、易用、高效、易擴(kuò)展、快速部署。相比較其他靜態(tài)網(wǎng)站生成器，它的優(yōu)點(diǎn)有這幾點(diǎn)：

• 項(xiàng)目構(gòu)建特別快

• 主題目錄與站點(diǎn)目錄結(jié)構(gòu)一樣

• 配置文件為*.toml 格式，語(yǔ)法常簡(jiǎn)單易懂，沒(méi)有縮進(jìn)的要求

二、快速搭建

2.1 安裝 Hugo

下載地址：https://github.com/gohugoio/hugo/releases
根據(jù)自己的操作系統(tǒng)下載不同的版本。并將 hugo 添加到環(huán)境變量。

2.2 生成站點(diǎn)

執(zhí)行下面這些命令就可以創(chuàng)建自己的站點(diǎn)了。

cd d:/myWebSite #切換目錄 hugo new site website-demo #創(chuàng)建站點(diǎn)

站點(diǎn)目錄結(jié)構(gòu)如下:

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

2.3本地運(yùn)行

2.3.1 創(chuàng)建文章

1.創(chuàng)建一個(gè) aboutme.md 文件，命令行執(zhí)行

hugo new aboutme.md

項(xiàng)目根目錄 content 文件夾下會(huì)生成 aboutme.md文件，用文本編輯打開(kāi)文件，編輯保存即可。內(nèi)容如下：

--- title: "Aboutme" date: 2020-03-28T23:36:36+08:00 draft: true --- 大家好，我叫不安分的猿人！

2.創(chuàng)建一篇 firstArticle.md,執(zhí)行下面命令會(huì)在項(xiàng)目根目錄post 文件夾下生成 firstArticle.md文件。

hugo new post/firstArticle.md

2.3.2 添加主題

執(zhí)行下面命令，就可以下載主題到本地，運(yùn)行項(xiàng)目就可以查看自己的靜態(tài)網(wǎng)站了。

cd themes git clone https://github.com/spf13/hyde.git

2.3.3 運(yùn)行項(xiàng)目

執(zhí)行如下命令，就可以本地運(yùn)行站點(diǎn)了。

hugo server --theme=hyde --buildDrafts

效果如下圖：是不是超級(jí)簡(jiǎn)單，3分鐘就可以構(gòu)建自己的站點(diǎn)。有的伙伴可能會(huì)問(wèn)這樣的網(wǎng)站也太low了，誰(shuí)會(huì)用？其實(shí)上面將的這些內(nèi)容只是讓搭建感受一下最原始的方式搭建自己的站點(diǎn)，接下來(lái)就講講高階一些的方法。

三、切換主題

官方網(wǎng)站有很多主題，任由我們選擇。官方網(wǎng)站地址：https://themes.gohugo.io/
也可以直接在Github下載主題，地址：https://github.com/gohugoio/hugoThemes
主題大體可以分為三類(lèi)：

• 個(gè)人網(wǎng)站/博客：https://themes.gohugo.io/hugo-theme-dream/

• 商業(yè)網(wǎng)站：https://themes.gohugo.io/resto-hugo/

• 在線簡(jiǎn)歷：https://themes.gohugo.io/theme/hugo-devresume-theme/

快速體驗(yàn)

使用 git clone url 下載相應(yīng)的題，注意最好將主題下載到 themes 目錄。

找到主題下的 exampleSite 目錄，拷貝目錄下的config.toml文件內(nèi)容到站點(diǎn)根目錄的config.toml中。

找到主題下的 exampleSite 目錄，拷貝 content目錄下的所有文件到站點(diǎn)根目錄 content文件夾。

執(zhí)行 hugo server 就可以運(yùn)行了。

運(yùn)行效果如下圖：有了主題就是能好看一下哈！如果你還不滿(mǎn)意這樣的顯示效果，那么就開(kāi)啟自定設(shè)計(jì)之路吧。每個(gè)主題都有 layouts 目錄，這里就是一些靜態(tài)模板，上手改就對(duì)了。模板的內(nèi)容如下：

{{ $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" . }}

上面的這段代碼的大概意思是文章分頁(yè)展示。基本語(yǔ)法可以在網(wǎng)上搜一搜。

四、服務(wù)器部署

4.1 Github 配置自動(dòng)打包

創(chuàng)建分支source

source 分支提交項(xiàng)目源碼，將打包好的項(xiàng)目通過(guò) CI 工具自動(dòng)提交的 master 分支，使用Github Pages 部署我們的靜態(tài)項(xiàng)目。注:基于 Github 創(chuàng)建靜態(tài)項(xiàng)目，需創(chuàng)建倉(cāng)庫(kù)名為 username.github.io 的倉(cāng)庫(kù)。

創(chuàng)建文件.travis.yml

在項(xiàng)目根目錄創(chuàng)建 .travis.yml 文件，配置文件內(nèi)容如下：

dist: bionic language: python # 默認(rèn)是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# 構(gòu)建完成后會(huì)自動(dòng)更新Github Pages deploy:provider: pagesskip-cleanup: truelocal-dir: publictarget-branch: mastergithub-token: $GITHUB_TOKENkeep-history: trueon:branch: source

文件內(nèi)容很明確:指定代碼構(gòu)建的工具為python3.7，安裝最新的hugo 工具，代碼構(gòu)建是基于 source 分支構(gòu)建的，將構(gòu)建好的項(xiàng)目提交到 master 分支。這里注意 github-token: $GITHUB_TOKEN這行內(nèi)容，需要手動(dòng)創(chuàng)建一個(gè) Personal access tokens，
地址: https://github.com/settings/tokens/new
操作如下圖:點(diǎn)擊生成之后，復(fù)制生成的 Token（注意：關(guān)閉頁(yè)面后就找不到了），留作下一步Travis CI設(shè)置用。

Travis CI配置

通過(guò)Github賬號(hào)授權(quán)登錄 Travis CI，https://travis-ci.org/
添加需要自動(dòng)構(gòu)建的項(xiàng)目，如下圖:點(diǎn)擊后面的settings，在 Environment Variables 中添加NAME填 GITHUB_TOKEN，VALUE填上一步生成的 Token

提交代碼接下來(lái)在 source 分支提交代碼，打包后的項(xiàng)目就會(huì)自動(dòng)提交到 master 分支，使用 Github Pages 就可以實(shí)現(xiàn)自動(dòng)部署我們的項(xiàng)目了。我搭建的博客地址:https://hellorestlessman.github.io/

4.2 docker 部署

如果你有自己的服務(wù)，那么也可以部署項(xiàng)目到自己的服務(wù)，最好的方式是在自己的服務(wù)器上跑一個(gè)像Jenkins 的自動(dòng)化構(gòu)建工具，當(dāng)提交代碼后，自動(dòng)打包，打包完成后自動(dòng)部署。服務(wù)器安裝 Jenkins 有很多方式，這里就不細(xì)說(shuō)了。我就大概將一下服務(wù)器上如何部署前端項(xiàng)目。
這里以 Docker 容器為例，服務(wù)器安裝好 Docker 后，執(zhí)行如下命令即可部署前端項(xiàng)目:

docker run --name nginx_test1 -d -p 3000:80 -v /usr/web/html/:/usr/share/nginx/html nginx #指定宿主機(jī)靜態(tài)資源路徑 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 #指定宿主機(jī)靜態(tài)資源，掛在外部配置文件

這里注意，先臨時(shí)啟動(dòng)一個(gè)nginx容器，獲取一下 nginx.conf，執(zhí)行如下命令：

docker run -d -p 8088:80 --name nginx_tmp nginx #宿主機(jī)8080端口啟動(dòng)nginx docker cp nginx_tmp:/etc/nginx/nginx.conf /nginx/conf/nginx.conf #拷貝容器的配置文件到宿主機(jī)制定目錄

五、 最后

一句話 Hugo很優(yōu)秀，如果你也正好需要建網(wǎng)站，可以考慮一下 Hugo。本文講了很多東西都不太詳細(xì)，代碼自動(dòng)構(gòu)建工具 Travis CI、Jenkins 值得深入一下。Docker 基本操作有興趣的伙伴也可以學(xué)習(xí)一下。如果能把這些項(xiàng)技能或者知識(shí)串聯(lián)起來(lái)，就可以產(chǎn)生不可思議的結(jié)果，就如本篇自動(dòng)化構(gòu)建部署前端項(xiàng)目一樣。哈哈開(kāi)個(gè)玩笑，下期再見(jiàn)！

END

想讀Spring源碼？先從這篇「 極簡(jiǎn)教程」開(kāi)始

沒(méi)用過(guò)這些IDEA插件？怪不得寫(xiě)代碼頭疼

99%的程序員都在用Lombok，原理竟然這么簡(jiǎn)單？我也手?jǐn)]了一個(gè)！|建議收藏！！！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。