您是否想启动一个博客来分享您在使用各种软件框架时的最新冒险经历?您是否喜欢文档记录不完善的项目并想修复它?或者您只是想创建一个个人网站?
许多想启动博客的人都有一个重要的顾虑:缺乏关于内容管理系统 (CMS) 的知识或学习时间。那么,如果我说您无需花费数天时间学习新的 CMS、设置基本网站、设计样式以及加强防御攻击者的能力呢?如果我说您可以在 30 分钟内从头到尾使用 Hugo 创建一个博客呢?

opensource.com
Hugo 是一个用 Go 编写的静态站点生成器。您可能会问,为什么要使用 Hugo 呢?
- 因为没有数据库,没有需要任何权限的插件,也没有在您的服务器上运行的底层平台,所以没有额外的安全问题。
- 该博客是一组静态网站,这意味着闪电般快速的服务时间。此外,所有页面都在部署时呈现,因此您的服务器负载非常小。
- 版本控制很容易。一些 CMS 平台使用自己的版本控制系统 (VCS) 或将 Git 集成到他们的界面中。使用 Hugo,您的所有源文件都可以原生存在于您选择的 VCS 上。
坦率地说,Hugo 的目标是让网站编写再次变得有趣。让我们计时 30 分钟,好吗?
0-5 分钟:下载 Hugo 并生成站点
为了简化 Hugo 的安装,请下载二进制文件。为此,请执行以下操作
- 下载适合您操作系统的 存档。
- 将存档解压缩到您选择的目录中,例如
C:\hugo_dir
或~/hugo_dir
;此路径将被称为${HUGO_HOME}
。 - 打开命令行并更改到您的目录:
cd ${HUGO_HOME}
。 - 验证 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 二进制文件的完整路径是可以的。
- 在 Unix 上:
- 创建一个将成为您博客的新站点:
hugo new site awesome-blog
。 - 更改到新创建的目录:
cd awesome-blog
。
恭喜!您刚刚创建了您的新博客。
5-10 分钟:为您的博客设置主题
使用 Hugo,您可以自己为博客设置主题,也可以使用美观的现成主题之一。我选择了 Kiera,因为它非常简洁。要安装主题
- 更改到 themes 目录:
cd themes
。 - 克隆您的主题:
git clone https://github.com/avianto/hugo-kiera kiera
。如果您没有安装 Git- 从 GitHub 下载 .zip 文件。
- 将其解压缩到您站点的
themes
目录。 - 将目录从
hugo-kiera-master
重命名为kiera
。
- 将目录更改为 awesome-blog 级别:
cd awesome-blog
。 - 激活主题。主题(包括 Kiera)通常带有一个名为
exampleSite
的目录,其中包含示例内容和示例设置文件。要激活 Kiera,请将提供的config.toml
文件复制到您的博客- 在 Unix 上:
cp themes/kiera/exampleSite/config.toml .
- 在 Windows 上:
copy themes\kiera\exampleSite\config.toml .
- 确认
Yes
以覆盖旧的config.toml
- 在 Unix 上:
- (可选)您可以启动您的服务器以直观地验证主题是否已激活:
hugo server -D
并在您的 Web 浏览器中访问http://localhost:1313
。查看完您的博客后,您可以通过在命令行中按Ctrl+C
来关闭服务器。您的博客是空的,但我们正在取得进展。它应该看起来像这样

opensource.com
您刚刚为您的博客设置了主题!您可以在官方 Hugo 主题 站点上找到数百个美观的主题。
10-20 分钟:向您的博客添加内容
碗空着时最有用,但博客并非如此。在此步骤中,您将向您的博客添加内容。Hugo 和 Kiera 主题简化了此过程。要添加您的第一篇文章
- 文章原型是您内容的模板。
- 将主题原型添加到您的博客站点
- 在 Unix 上:
cp themes/kiera/archetypes/* archetypes/
- 在 Windows 上:
copy themes\kiera\archetypes\* archetypes\
- 确认
Yes
以覆盖default.md
原型
- 在 Unix 上:
- 为您的博客文章创建一个新目录
- 在 Unix 上:
mkdir content/posts
- 在 Windows 上:
mkdir content\posts
- 在 Unix 上:
- 使用 Hugo 生成您的文章
- 在 Unix 上:
hugo new posts/first-post.md
- 在 Windows 上:
hugo new posts\first-post.md
- 在 Unix 上:
- 在您选择的文本编辑器中打开新文章
- 在 Unix 上:
gedit content/posts/first-post.md
- 在 Windows 上:
notepad content\posts\first-post.md
- 在 Unix 上:
此时,您可以尽情发挥。请注意,您的文章由两个部分组成。第一部分用 +++
分隔。它包含有关您的文章的元数据,例如其标题。在 Hugo 中,这称为前置元数据。在前置元数据之后,文章开始。创建第一篇文章
+++
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/
。

opensource.com
20-30 分钟:调整您的站点
我们所做的一切都很棒,但仍然有一些小问题需要解决。例如,命名您的站点很简单
- 通过在命令行中按
Ctrl+C
停止您的服务器。 - 打开
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/"
这将为“首页”和“文章”添加菜单。您仍然需要一个“关于”页面。与其从 config.toml
文件中引用它,不如从 markdown 文件中引用它
- 创建一个“关于”文件:
hugo new about.md
。请注意,它是about.md
,而不是posts/about.md
。“关于”页面不是博客文章,因此您不希望它显示在“文章”部分中。 - 在文本编辑器中打开该文件并输入以下内容
+++
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
文件。
10 条评论