雨果让创建网站再次变得有趣

静态网站之所以受欢迎，有很多原因。 避免过大的解决方案，并在没有数据库，太多依赖项或特定服务器端配置（没有PHP，没有MySQL / MSSQL，.NET，Python，Ruby等）的情况下简化项目，这使得部署非常简单且稳定应对众多可能的漏洞。 最终，这些成为服务于用户的基本HTML页面。

在本指南中，我将向您展示如何使用Hugo设置开发环境以及如何建立第一个静态Hugo网站。

静态网站的全新方法

传说中的首字母缩写设计KISS- 保持简单，愚蠢 -可以应用于Hugo以及它如何进入静态网站生成器空间。

Hugo内置于Go中，可快速编译您的静态页面（编译一个小型网站只需要几毫秒的时间-并可以在几秒钟内完成数千个页面）。

此外，Hugo还为静态网站工作流提供了必要的工具（包括部署和迁移工具），使开发人员和设计人员可以专注于有趣的部分，例如，发挥创意并在网站建设中实现上述创意。

为什么要使用静态网站？

当我们建立基于内容的网站时，我们可以假设所有网站都有一些通用性，而Hugo为此提供了一个框架。 具体来说，我们可以采用内容类型（例如帖子，类别，评论或产品）并组织数据。 然后，我们可以通过模板和样式表为每个对象赋予特定的外观。

展望未来，我们可以真正将其驱动到HTML / CSS / JS静态网站空间内所需的任何位置。 务实地考虑时，这是一个很大的空间，为创造力提供了很大的空间。

jQuery可以正常运行，并且如果您需要，可以阻止您在静态页面上使用第三方服务。 因此，不要以为无法将其他库或应用程序集成到静态站点中来限制自己。 事实并非如此-您可以使用任何可用JavaScript库。

因此，对于公司宣传册类型网站的几页，都有指向“联系我们”页面的Google表单的链接。 而且，如果您需要显示其他类型的数据，则可以在网站的这一方面使用JavaScript。

它如何为我的业务和客户服务？

以一家小型商店或自由职业者为例，其一些产品或服务不需要完整的电子商务解决方案。 相反，他们只需要产品信息和页面上的“联系”链接。 雨果可以在一个早晨结束时做到这一点。 托管甚至没有什么大不了的-实际上，这是事后才想到的，因为我们只是提供基本HTML页面。

Hugo在GNU项目上的项目文档方面也表现出色。 例如，考虑需要简单存在的初创企业或中小型企业。

静态站点的局限性是什么？

雨果不能做的是动态内容，例如数据库驱动的表单，搜索或用户系统。 如果这是您的寻找，那么雨果肯定不是您想要的。 但是在其他时候，当您发现自己说“我们是否不能为此设置一个基本页面？” 静态网站生成器是一个不错的选择。 另外，请注意，Hugo并不是唯一的静态站点生成器。 有很多东西已经存在很长时间了， 这里是它们的列表。

对于构建新闻网站这样的实时内容博客，Hugo可能是一个很棒的解决方案，可以快速打开一个页面，以便从您的主站点链接该报道，并在几分钟之内使其联机，这意味着您可以继续快速添加并重新部署更改很快 但是，要通过搜索和许多作家来打造整个新闻网站，使用Hugo确实不适合。

雨果还缺少为其资产管道使用更高级的工具，例如ES6和Sass-如果要利用该技术，则需要包括Gulp或Grunt才能完成工作； 否则，香草CSS和JavaScript效果最佳。

您的家庭开发环境

Hugo用Go编写，并且支持许多平台，要查看可以在此处发布的所有版本

对于使用HomeBrew的macOS用户，可以按照以下步骤进行安装：

brew update && brew install hugo

有关Mac OSX和Windows安装的更多信息

安装Hugo后，我们可以通过在命令提示符或hugo version运行hugo help来测试安装情况

雨果打造您的第一个静态网站

现在我们已经安装了Hugo，我们可以开始创建网站了。 运行以下命令，将“ your-sitename-here”替换为您的项目名称：

$ hugo new site your-sitename-here

这将为您的网站创建一个脚手架，您可以在查找器中查看它

或通过tree命令在您的终端中

Hugo已经创建了5个子目录和1个文件，它们用于根据其全部含义创建最终网站：

• 原型：在这里我们定义内容是什么，我们可以在此处设置默认标签或类别并定义类型，例如帖子，教程或产品
• config.toml：主要配置位于此处，我们可以在此处定义所有网站的标题，语言，URL等
• 内容：站点的内容页面存储在此处，子目录用于部分以帮助组织内容，例如为您的产品内容创建content/products
• 数据：站点数据，例如本地化配置，请点击此处
• layouts ：Hugo利用的Go html / template库的布局转到此处
• 静态的：这里的任何静态文件都将编译到最终网站中，允许完全自由，因此您可以提供任何CSS，JS或图像文件。
• 主题：创建新主题或将github中的主题克隆到此目录中，以将其与您的站点一起使用。

雨果的“ Hello World”

我们需要添加帖子以查看我们刚刚创建的网站，请使用以下命令：

$ hugo new post/first-post.md

现在在content / post / first-post.md中编辑文件，默认情况下它将包含与以下内容相似的内容：

+++
date = "2016-09-26T13:19:03+07:00"
title = "first post"

+++

前事

+++内的内容是该帖子的TOML配置。 这种配置称为前件 。 它使您能够定义发布配置及其内容。 默认情况下，每个帖子都将具有上面显示的配置属性。

在+++之后添加一些文本，如下所示：

+++
date = "2016-09-26T13:19:03+07:00"
title = "first post"

+++

Hello world!

提供数据和实时重载

因此，我们可以看到Hugo内置的实时重新加载功能，让我们对该站点进行一些更改，看看会发生什么。

首先通过运行启动服务器

$ hugo server

现在，如果您对文件进行了一些更改，您将看到Hugo立即重新加载。

您的网站可以在http：// localhost：1313上访问，但请稍候 -由于我们尚未定义主题，您到此为止仍然只能看到空白的白页 ！

添加主题

Hugo使用Go的html/template库，因此具有非常强大且用途广泛的主题库。 主题易于使用，只需将主题的存储库克隆到您的Hugo站点的themes目录中即可完成安装。

Hugo没有默认主题，因此您必须设置一个主题。

有大量开源主题可供选择 。

让我们将大量主题添加到我们的网站上，以便我们可以与所有主题一起玩耍，看看自己喜欢什么。 为此，请在我们的Hugo目录中运行以下命令：

$ git clone --recursive https://github.com/spf13/hugoThemes.git themes

Cloning into 'themes'...
remote: Counting objects: 880, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 880 (delta 1), reused 0 (delta 0), pack-reused 875
Receiving objects: 100% (880/880), 669.20 KiB | 288.00 KiB/s, done.
Resolving deltas: 100% (506/506), done.
Checking connectivity... done.

现在，您将看到一大堆主题被克隆到您的站点中。 有很多东西，所以克隆时您将有时间休息...

使用主题

要使用主题，只需使用-t或--theme参数启动Hugo，如下所示

$ hugo -t ThemeName

或者您可以添加到您的config.toml ：

theme: "ThemeName"

ThemeName必须与/themes中的目录名称匹配。

从目录中选择主题名称后，从hugo server --theme=ThemeName启动服务器，并查看http：// localhost：1313

以下是一些我们克隆的主题的示例，我使用了beg ， crisp和cactus进行了浏览，周围有很多可供选择！

因此，您现在已经创建了一个带有世界您好帖子的网站，我们还能做什么？

建立博客

使用Hugo制作基本博客真的很容易。 首先，您需要为默认帖子定义原型，因此在archetypes/default.md创建一个新文件，并添加以下内容作为开头：

+++
tags = ["welding", "metal work"]
categories = ["posts"]
+++

在这里，我们设置了一些默认标签，对于一个焊接博客，我们可以确保我们在所有帖子上都需要这些标签，并且我们将其称为“帖子”类别，以便在创建帖子时使用默认标签。

现在像这样通过终端添加您的第一篇文章：

$ hugo new post/tig-welding-a-bike-frame.md

这将创建一个具有您之前定义的原型的帖子，您现在可以在文本编辑器中将其打开，并开始以markdown格式书写！

让我们添加更多的帖子：

$ hugo new post/welding-a-roll-cage.md

再次添加内容，只需打开Hugo创建的文件，然后在最前面的内容之后开始向文件末尾添加内容。

建立照相馆

要使用Hugo建立图片库，我们将使用GitHub上提供的出色工具hugo-gallery 。

它的用法是这样的：

hugo-gallery <Source Path> <Destination Section> <Title> [BaseUrl]

hugo-gallery工具将创建一个新的posts目录，其中包含源目录中每个图像的markdown文件，从而可以进行有序的幻灯片放映。 它将从Source Path目录中读取所有文件，并将它们保存在Hugo站点的静态目录中。

它将基于提供的Title在内容目录内创建一个新目录，例如content/welding

例如：

$ hugo-gallery static/images/welding-photos welding "Photos of my insane welding skills"

访问localhost:1313/welding查看内容。

部署方式

Hugo有多种部署工具，例如hugomac ，它是OSX菜单栏应用程序，使用户可以轻松地发布到EC2托管。 无需命令行。

hugodeploy还提供了一个SFTP设置以进行部署，或者您可以只使用Hugo随附的自动部署 。

结论

静态网站生成器已经存在了一段时间，而且Hugo确实建立在该工具集的基础上，可以轻松快捷地删除网站，甚至可以将现有网站从WordPress迁移到Hugo。 Hugo有很多工具，包括前端编辑器将其签出 。

展望未来，很高兴看到Hugo的更多模块为诸如联系表和图库支持之类的东西提供支持，或提供相关帖子。

Hugo 路线图确实有很多现有的想法，例如动态图像调整大小，支持从托管服务提供商导入rsync和图像，以及通过AWS EC2和GitHub集成更轻松地托管。

如果您还没有使用Hugo，请务必在项目开发过程中再次检查！

翻译自: https://code.tutsplus.com/tutorials/make-creating-websites-fun-again-with-hugo-the-static-website-generator-written-in-go--cms-27319