好處：

快速部署
安全（無動態(tài)內(nèi)容）
快速迅速
使用簡單" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 10分鐘用Hugo打造一個靜態(tài)網(wǎng)站

10分鐘用Hugo打造一個靜態(tài)網(wǎng)站

時間：2023-10-12 10:12:01 | 來源：網(wǎng)站運營

時間：2023-10-12 10:12:01 來源：網(wǎng)站運營

10分鐘用Hugo打造一個靜態(tài)網(wǎng)站：

什么是靜態(tài)網(wǎng)站生成器？

簡簡單的說，靜態(tài)網(wǎng)站生成器會獲取你的內(nèi)容，并將其應用于模板，然后生成基于 HTML 的靜態(tài)網(wǎng)站。非常適合個人博客。

好處：

快速部署
安全（無動態(tài)內(nèi)容）
快速迅速
使用簡單
能夠進行版本控制
那么，都有哪些流行的靜態(tài)網(wǎng)站生成器呢？

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

Hugo 是什么？

其官方網(wǎng)站號稱 Hugo 是世界上最快的靜態(tài)網(wǎng)站引擎。

Hugo 是用 Go 語言編寫的，它還有非常豐富的主題系統(tǒng)。

安裝 Hugo

Mac:

brew install hugoLinux:

sudo apt-get install hugo或者sudo pacman -Syu hugo然后執(zhí)行下面的命令檢查是否安裝成功：

hugo version

使用Hugo

創(chuàng)建一個新項目：

hugo new site my-project下載一個主題?？梢栽?https://themes.gohugo.io/ 找到更多你喜歡的主題。

cd my-projectgit initgit 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:00draft: true---Hello World!可以在這里給文章添加添加更多屬性配置（標簽，描述，類別，作者）。

可以在 https://gohugo.io/content-man... 了解更多的配置項。

看看效果：

hugo server -D在瀏覽器中打開 http://localhost:1313 就能看到你的網(wǎng)站了。

Hugo 的目錄結(jié)構(gòu)

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

修改靜態(tài)網(wǎng)站的樣式

我們在之前應用了一個主題?，F(xiàn)在，如果我們檢查 themes 文件夾，可以看到樣式文件。

但是要當心！

千萬不要直接編輯這些文件！。
應該將主題目錄結(jié)構(gòu)復制到 layouts 文件夾。

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

主題有一個 themes/theme-name/layouts/partials 文件夾，可以在其中找到一些HTML模板（header.html、footer.html）?，F(xiàn)在我們將編輯 header.html 模板，將內(nèi)容從這個文件復制到 layouts/partials/header.html 中，并注意在主題 layouts 根目錄中創(chuàng)建與主題相同的目錄結(jié)構(gòu)。

layouts/partials/header.htmlssthemes/theme-name/layouts/partials/header.html創(chuàng)建一個自定義CSS文件： static/css/custom-style.css，然后把自定義 CSS 文件添加到 config.toml 中：

[params] custom_css = ["css/custom-style.css"]打開 layouts/partials/header.html：

將這段代碼添加到 <head> 標簽內(nèi)：

{{ range .Site.Params.custom_css -}} <link rel="stylesheet" href="{{ . | absURL }}">{{- end }}現(xiàn)在，就可以覆蓋主題中所應用的 CSS 類。

構(gòu)建靜態(tài)網(wǎng)站

在項目的根目錄下執(zhí)行 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執(zhí)行成功后，會生成一個public 目錄，這個目錄中的內(nèi)容就是我們靜態(tài)網(wǎng)站的所有內(nèi)容。

然后就可以托管到 GitHub 或 OSS 中了。

Hugo 還提供了更多的內(nèi)容，可以到官方文檔查看：https://gohugo.io/documentation/。



關(guān)鍵詞：靜態(tài),打造

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉