使用 Go 编写的静态网站生成器 Hugo,在 30 分钟内创建一个博客

了解 Hugo 如何让构建网站再次变得有趣。
489 位读者喜欢这篇文章。
Woman programming

WOCinTech Chat。由 Opensource.com 修改。CC BY-SA 4.0

你想创建一个博客,分享你使用各种软件框架的最新冒险经历吗?你是否喜欢一个文档不足的项目,并想修复它?或者你只是想创建一个个人网站?

许多想创建博客的人都有一个重要的注意事项:缺乏关于内容管理系统 (CMS) 的知识,或者没有时间学习。那么,如果我说你不需要花费数天时间学习一个新的 CMS,设置一个基本网站,设计其样式,并加强其安全性以防御攻击者,会怎么样?如果我说你可以在 30 分钟内从头到尾创建一个博客,使用 Hugo,会怎么样?

A sample blog created in Hugo

opensource.com

Hugo 是用 Go 编写的静态网站生成器。你可能会问,为什么要使用 Hugo?

  • 因为它没有数据库,没有需要任何权限的插件,也没有在你的服务器上运行的底层平台,所以没有额外的安全问题。
  • 该博客是一组静态网站,这意味着极快的服务时间。此外,所有页面都在部署时呈现,因此你的服务器负载非常小。
  • 版本控制很容易。一些 CMS 平台使用他们自己的版本控制系统 (VCS) 或将 Git 集成到他们的界面中。使用 Hugo,你的所有源文件都可以原生存在于你选择的 VCS 上。

坦率地说,Hugo 的目的是让编写网站再次变得有趣。让我们计时 30 分钟,开始吧?

0-5 分钟:下载 Hugo 并生成一个站点

为了简化 Hugo 的安装,请下载二进制文件。为此:

  1. 下载适合你操作系统的存档
  2. 将存档解压缩到你选择的目录中,例如C:\hugo_dir~/hugo_dir;此路径将被称为${HUGO_HOME}
  3. 打开命令行并更改到你的目录:cd ${HUGO_HOME}
  4. 验证 Hugo 是否工作
    • 在 Unix 上:${HUGO_HOME}/[hugo version]
    • 在 Windows 上:${HUGO_HOME}\[hugo.exe version]
      例如,c:\hugo_dir\hugo version

    为简单起见,我将 Hugo 二进制文件的路径(包括二进制文件)称为hugo。例如,hugo version将在你的计算机上转换为C:\hugo_dir\hugo version

    如果你收到错误消息,则可能下载了错误的版本。另请注意,安装 Hugo 有许多可能的方法。有关更多信息,请参见官方文档。理想情况下,你将 Hugo 二进制文件放在 PATH 上。对于此快速入门,使用 Hugo 二进制文件的完整路径是可以的。

  1. 创建一个将成为你博客的新站点:hugo new site awesome-blog
  2. 更改到新创建的目录:cd awesome-blog

恭喜!你刚刚创建了你的新博客。

5-10 分钟:为你的博客添加主题

使用 Hugo,你可以自己为博客添加主题,也可以使用现成的精美主题之一。我选择了Kiera,因为它非常简单。要安装主题:

  1. 更改到 themes 目录:cd themes
  2. 克隆你的主题:git clone https://github.com/avianto/hugo-kiera kiera。如果你没有安装 Git:
    • GitHub下载 .zip 文件。
    • 将其解压缩到站点的themes目录。
    • 将目录从hugo-kiera-master重命名为kiera
  3. 将目录更改为 awesome-blog 级别:cd awesome-blog
  4. 激活主题。主题(包括 Kiera)通常带有一个名为exampleSite的目录,其中包含示例内容和示例设置文件。要激活 Kiera,请将提供的config.toml文件复制到你的博客:
    • 在 Unix 上:cp themes/kiera/exampleSite/config.toml .
    • 在 Windows 上:copy themes\kiera\exampleSite\config.toml .
    • 确认Yes以覆盖旧的config.toml
  5. (可选)你可以启动你的服务器以直观地验证主题是否已激活:hugo server -D并在你的 Web 浏览器中访问http://localhost:1313。查看你的博客后,可以通过在命令行中按Ctrl+C来关闭服务器。你的博客是空的,但我们正在取得进展。它应该看起来像这样:

Example theming of a blog created in Hugo

opensource.com

你刚刚为你的博客添加了主题!你可以在官方的 Hugo 主题网站上找到数百个精美主题。

10-20 分钟:向你的博客添加内容

虽然碗在空的时候最有用,但博客并非如此。在此步骤中,你将向你的博客添加内容。Hugo 和 Kiera 主题简化了此过程。要添加你的第一篇文章:

  1. 文章原型是你内容的模板。
  2. 将主题原型添加到你的博客站点
    • 在 Unix 上:cp themes/kiera/archetypes/* archetypes/
    • 在 Windows 上:copy themes\kiera\archetypes\* archetypes\
    • 确认Yes以覆盖default.md原型。
  3. 为你的博客文章创建一个新目录
    • 在 Unix 上:mkdir content/posts
    • 在 Windows 上:mkdir content\posts
  4. 使用 Hugo 生成你的文章
    • 在 Unix 上:hugo new posts/first-post.md
    • 在 Windows 上:hugo new posts\first-post.md
  5. 在你选择的文本编辑器中打开新文章
    • 在 Unix 上:gedit content/posts/first-post.md
    • 在 Windows 上:notepad content\posts\first-post.md

此时,你可以随意发挥。请注意,你的文章由两个部分组成。第一个部分由+++分隔。它包含有关你的文章的元数据,例如标题。在 Hugo 中,这称为front matter。在 front matter 之后,文章开始。创建第一篇文章:

+++
title = "First Post"
date = 2018-03-03T13:23:10+01:00
draft = false
tags = ["Getting started"]
categories = []
+++

Hello Hugo world! No more excuses for having no blog or documentation now!

你现在需要做的就是启动服务器:hugo server -D。打开你的浏览器并输入:http://localhost:1313/

Hugo blog

opensource.com

20-30 分钟:调整你的站点

我们所做的事情很棒,但仍然有一些小问题需要解决。例如,命名你的站点很简单:

  1. 通过在命令行上按Ctrl+C来停止你的服务器。
  2. 打开config.toml并编辑设置,例如博客的标题、版权、名称、你的社交网络链接等。

当你再次启动你的服务器时,你会看到你的博客具有更多的个性化设置。还有一个基本的东西缺失:菜单。这也是一个快速修复。回到config.toml,在底部插入以下内容:

[[menu.main]]
    name = "Home" #Name in the navigation bar
    weight = 10 #The larger the weight, the more on the right this item will be
    url = "/" #URL address
[[menu.main]]
    name = "Posts"
    weight = 20
    url = "/posts/"

这将为 Home 和 Posts 添加菜单。你仍然需要一个关于页面。不要从config.toml文件引用它,而是从 markdown 文件引用它:

  1. 创建一个 About 文件:hugo new about.md。请注意,它是about.md,而不是posts/about.md。About 页面不是博客文章,因此你不希望它显示在 Posts 部分中。
  2. 在文本编辑器中打开该文件并输入以下内容:
+++
title = "About"
date = 2018-03-03T13:50:49+01:00
menu = "main" #Display this page on the nav menu
weight = "30" #Right-most nav item
meta = "false" #Do not display tags or categories
+++

> Waves are the practice of the water. Shunryu Suzuki

当你启动你的 Hugo 服务器并打开http://localhost:1313/时,你应该会看到你的新博客已准备好使用。(查看我在 GitHub 页面上的 我的示例。)如果你想更改菜单项的活动样式,以使填充稍微更好看(如 GitHub 实时版本),请将 此补丁应用于你的themes/kiera/static/css/styles.css文件。

A man in a red hat signifying the Opensource company called Red Hat
Marek Czernek 从内心深处是一位 Red Hatter。Marek 目前在 Red Hat 的技术培训部门担任课程开发人员。在业余时间,他喜欢学习任何 Java、前端或数学,并欣赏精美的文档和精美的代码。有时,他会为各种项目的文档做出贡献,例如 Tomcat 和 Liferay。

10 条评论

哇... 很棒的文章。阅读本文让我现在就想开始写博客! :D

附注

已转向 Hugo

我对 Hugo 感兴趣已经有一段时间了,但我一直无法正确地使用它,因为我从未找到像你的教程那样有用的教程。非常感谢你写这篇文章。

我赞同 Bryan 的评论。虽然我是 Jekyll 的支持者,但 Hugo 已经在我的关注范围内有一段时间了。当我深入研究它时,我会在浏览器窗口中打开这个操作指南。

很棒的文章!hugo 很棒 :) 我花了很多时间试图弄清楚要使用哪个选项,而 hugo 是最容易实现的。此外,它会不断更新并拥有一个友好的社区。这是我的 https://jlozada2426.gitlab.io/blog/

> 将主题原型添加到你的博客站点

你不需要那样做,请查看[原型查找顺序](https://gohugo.com.cn/content-management/archetypes/#what-are-archetypes)。如果站点根目录下没有原型,也会在主题中找到。

相同机制也适用于数据文件、模板、翻译等等...

你好,

恐怕事实并非如此。你试过了吗? 我刚试过,结果的前端参数如下所示:

---
title: "First Post"
date: 2018-03-27T15:16:44+02:00
draft: true
---

这是默认的。恐怕这里没有在主题目录中查找。

干杯!

回复评论者(未验证)

将 Drupal 7 或 WordPress 站点转换为 Hugo 有多容易?有什么技巧吗?

谢谢你的文章。真的很有帮助。您是否有关于如何使用 Lets Encrypt 为 Windows 安全 Hugo 网站使用 SSL 的说明? 再次感谢!!!

谢谢 Marek。您是否有任何关于如何集成此 Microsoft IIS 的说明或直接引导我到某个地方?

回复, 作者: mczernek

知识共享许可协议本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
© . All rights reserved.