Hugo快速搭建靜態(tài)網(wǎng)站

時間：2023-08-08 20:33:02 | 來源：網(wǎng)站運營

時間：2023-08-08 20:33:02 來源：網(wǎng)站運營

Hugo快速搭建靜態(tài)網(wǎng)站：

公眾號：不安分的猿人

一、簡介

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

• 項目構建特別快
• 主題目錄與站點目錄結(jié)構一樣
• 配置文件為*.toml 格式，語法常簡單易懂，沒有縮進的要求

二、快速搭建

2.1 安裝 Hugo

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

2.2 生成站點

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

cd d:/myWebSite #切換目錄hugo new site website-demo #創(chuàng)建站點站點目錄結(jié)構如下:

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

2.3本地運行

2.3.1 創(chuàng)建文章

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

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

---title: "Aboutme"date: 2020-03-28T23:36:36+08:00draft: true---大家好，我叫不安分的猿人！2.創(chuàng)建一篇 firstArticle.md,執(zhí)行下面命令會在項目根目錄post 文件夾下生成 firstArticle.md文件。

hugo new post/firstArticle.md

2.3.2 添加主題

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

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

2.3.3 運行項目

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

hugo server --theme=hyde --buildDrafts效果如下圖：

是不是超級簡單，3分鐘就可以構建自己的站點。有的伙伴可能會問這樣的網(wǎng)站也太low了，誰會用？其實上面將的這些內(nèi)容只是讓搭建感受一下最原始的方式搭建自己的站點，接下來就講講高階一些的方法。

三、切換主題

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

• 個人網(wǎng)站/博客：https://themes.gohugo.io/hugo-theme-dream/
• 商業(yè)網(wǎng)站：https://themes.gohugo.io/resto-hugo/
• 在線簡歷：https://themes.gohugo.io/theme/hugo-devresume-theme/

快速體驗

1. 使用 git clone url 下載相應的題，注意最好將主題下載到 themes 目錄。
2. 找到主題下的 exampleSite 目錄，拷貝目錄下的config.toml文件內(nèi)容到站點根目錄的config.toml中。
3. 找到主題下的 exampleSite 目錄，拷貝 content目錄下的所有文件到站點根目錄 content文件夾。
4. 執(zhí)行 hugo server 就可以運行了。
   

運行效果如下圖：

有了主題就是能好看一下哈！如果你還不滿意這樣的顯示效果，那么就開啟自定設計之路吧。每個主題都有 layouts 目錄，這里就是一些靜態(tài)模板，上手改就對了。模板的內(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" . }}上面的這段代碼的大概意思是文章分頁展示?；菊Z法可以在網(wǎng)上搜一搜。

四、服務器部署

4.1 Github 配置自動打包

創(chuàng)建分支source

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

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

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

dist: bioniclanguage: python # 默認是rubypython: 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*.debscript: - hugo# 構建完成后會自動更新Github Pagesdeploy: provider: pages skip-cleanup: true local-dir: public target-branch: master github-token: $GITHUB_TOKEN keep-history: true on: branch: source文件內(nèi)容很明確:指定代碼構建的工具為python3.7，安裝最新的hugo 工具，代碼構建是基于 source 分支構建的，將構建好的項目提交到 master 分支。這里注意 github-token: $GITHUB_TOKEN這行內(nèi)容，需要手動創(chuàng)建一個 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 就可以實現(xiàn)自動部署我們的項目了。

我搭建的博客地址:https://hellorestlessman.github.io/

4.2 docker 部署

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

docker run --name nginx_test1 -d -p 3000:80 -v /usr/web/html/:/usr/share/nginx/html nginx #指定宿主機靜態(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 #指定宿主機靜態(tài)資源，掛在外部配置文件這里注意，先臨時啟動一個nginx容器，獲取一下 nginx.conf，執(zhí)行如下命令：

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

五、 最后

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