没有天生的高手,更没有永远的菜鸟求知若饥, 虚心若愚

10分钟用Hugo打造一个静态网站


什么是静态网站生成器?

简简单的说,静态网站生成器会获取你的内容,并将其应用于模板,然后生成基于 HTML 的静态网站。非常适合个人博客。

好处:

  • 快速部署
  • 安全(无动态内容)
  • 快速迅速
  • 使用简单
  • 能够进行版本控制

那么,都有哪些流行的静态网站生成器呢?

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

这些项目在 GitHub 上的知名度非常高。

Hugo 是什么?

其官方网站号称 Hugo 是世界上最快的静态网站引擎。

2195643473.png

Hugo 是用 Go 语言编写的,它还有非常丰富的主题系统。

安装 Hugo

Mac:

brew install hugo

Linux:

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

然后执行下面的命令检查是否安装成功:

hugo version

使用Hugo

创建一个新项目:

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.tomlconfig.yamlconfig.json(可以在网站根目录中找到)作为默认网站配置文件。除了单独的配置文件之外,你还可以使用 config directory 来分隔不同的环境。
  • content:所有内容文件放在这里。顶级文件夹计为内容部分。如果你有 devopsnodejs 部分,那么你需要有 content/devops/first-post.mdcontent/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.htmlfooter.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/

文章评论已关闭!