10分鐘用Hugo打造一個靜態網站

時間 2021-04-03

標籤 css html 前端 node git 程序員 github 面試 json segmentfault 欄目網站開發简体版

原文原文鏈接

什麼是靜態網站生成器？

簡簡單的說，靜態網站生成器會獲取你的內容，並將其應用於模板，而後生成基於 HTML 的靜態網站。很是適合我的博客。css

好處：html

快速部署
安全（無動態內容）
快速迅速
使用簡單
可以進行版本控制

那麼，都有哪些流行的靜態網站生成器呢？前端

Gatsby (React/JS)
Hugo (Go)
Next.js (React/JS)
Jekyll (Ruby)
Gridsome (Vue/JS)

這些項目在 GitHub 上的知名度很是高。node

Hugo 是什麼？

其官方網站號稱 Hugo 是世界上最快的靜態網站引擎。git

Hugo 是用 Go 語言編寫的，它還有很是豐富的主題系統。程序員

安裝 Hugo

Mac:github

brew install hugo

Linux:面試

sudo apt-get install hugo
或者
sudo pacman -Syu hugo

而後執行下面的命令檢查是否安裝成功：json

hugo version

使用Hugo

建立一個新項目：segmentfault

hugo new site my-project

下載一個主題。能夠在 https://themes.gohugo.io/ 找到更多你喜歡的主題。

cd my-project
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

將主題添加到配置文件。

echo 'theme = "ananke"' >> config.toml

添加一篇文章。

hugo new posts/my-first-post.md

它看上去應該像這樣：

---
title: "My First Post"
date: 2021-03-10T18:37:11+08:00
draft: true
---

Hello World!

能夠在這裏給文章添加添加更多屬性配置（標籤，描述，類別，做者）。

能夠在 https://gohugo.io/content-man... 瞭解更多的配置項。

看看效果：

hugo server -D

在瀏覽器中打開 http://localhost:1313 就能看到你的網站了。

Hugo 的目錄結構

.
├── archetypes
├── assets (not created by default)
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

archetypes：Archetypes 是內容模板文件，其中包含預配置的首選項（日期、標題、草稿等）。能夠用自定義的預配置前端字段建立新的原型。
assets：Assets 文件夾存儲全部文件，這些文件由 Hugo Pipes 處理（例如 CSS/Sass 文件）。默認不建立這個目錄。
config.toml：Hugo 使用 config.toml、config.yaml 或 config.json（能夠在網站根目錄中找到）做爲默認網站配置文件。除了單獨的配置文件以外，你還能夠使用 config directory 來分隔不一樣的環境。
content：全部內容文件放在這裏。頂級文件夾計爲內容部分。若是你有 devops 和 nodejs 部分，那麼你須要有 content/devops/first-post.md 和 content/nodejs/second-post.md 目錄。
data：這裏用來存儲配置文件，Hugo 會在生成你網站時用到。
layouts：以 .html 文件的形式存儲模板。有關更多信息，請參見 Styling 部分。
static：存儲全部靜態內容：圖片、CSS、JavaScript 等。當 Hugo 建立你的網站時，static 目錄中的全部資源均按原樣複製。
themes：你所選擇的 Hugo 主題。

修改靜態網站的樣式

咱們在以前應用了一個主題。如今，若是咱們檢查 themes 文件夾，能夠看到樣式文件。

可是要小心！

千萬不要直接編輯這些文件！。

應該將主題目錄結構複製到 layouts 文件夾。

假設我要將自定義 CSS 應用於主題。

主題有一個 themes/theme-name/layouts/partials 文件夾，能夠在其中找到一些HTML模板（header.html、footer.html）。如今咱們將編輯 header.html 模板，將內容從這個文件複製到 layouts/partials/header.html 中，並注意在主題 layouts 根目錄中建立與主題相同的目錄結構。

layouts/partials/header.htmlss
themes/theme-name/layouts/partials/header.html

建立一個自定義CSS文件： static/css/custom-style.css，而後把自定義 CSS 文件添加到 config.toml 中：

[params]
 custom_css = ["css/custom-style.css"]

打開 layouts/partials/header.html：

將這段代碼添加到 <head> 標籤內：

{{ range .Site.Params.custom_css -}}
   <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

如今，就能夠覆蓋主題中所應用的 CSS 類。

構建靜態網站

在項目的根目錄下執行 hugo 命令：

>>> hugo
                   | EN  
-------------------+-----
  Pages            | 14  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  6  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 74 ms

執行成功後，會生成一個public 目錄，這個目錄中的內容就是咱們靜態網站的全部內容。

而後就能夠託管到 GitHub 或 OSS 中了。

Hugo 還提供了更多的內容，能夠到官方文檔查看：https://gohugo.io/documentation/。