如何用Hugo建立一个应用程序

静态网站已经成为动态网站的一个强大的替代方案，特别是随着静态网站生成器（SSG）的数量增加。由于SSG的存在，开发者可以不费吹灰之力就能轻松地建立一个完整的静态网站。

在这篇文章中，我们将介绍Hugo，一个强大的SSG，以其速度而闻名。我们将了解Hugo提供了哪些好处，为什么它是最好的SSG之一，以及如何快速有效地建立一个简单的博客应用程序。

什么是静态网站和静态网站生成器？

在创建静态网站时，内容不是动态生成的，这意味着它是硬编码的。这似乎是一个很大的工作，但它是很方便的。

动态网站消除了所有页面和文章中个别HTML文件的无谓重复，但它们通常很慢，不适合小型和大多数中型项目。

这就是SSG和Hugo的用武之地。

SSG提供基于原始数据（通常是Markdown）和模板结构的静态HTML页面。它们通常可以创建快速和有利于SEO的页面，是使用动态网站的内容管理系统（CMSes）的良好替代品。

SSG还有助于自动编写单个HTML页面。通过简单地提供数据，SSG会生成HTML页面，使用预定义的模板在网页上服务。

什么是Hugo？

Hugo是众多静态网站生成器中的一种。然而，Hugo是目前最快的静态网站生成器。它是用Go语言编写的，有内置的并发功能。

使用Hugo，用户可以像许多SSG一样，用Markdown定义内容，并从Markdown中自动生成HTML文件。

使用Hugo的好处

速度快

默认情况下，静态网站比动态网站更快；静态网站在构建时生成，其余部分由HTTPS处理，而动态网站不同，每次向资源发出请求时，都要从服务器上提供请求。

Hugo仍然是最快的SSG，因为它内置了多线程；目前它进行和提供一个变化所需的时间不到8毫秒，我们将在本篇文章的后面回顾。

低到没有代码

Hugo使用起来也非常简单，不需要大量的技术知识，特别是在安装和设置之后，我们将在本篇文章后面介绍。

而且，由于能够使用Dropbox Paper或readme.so，开发人员可以直观地创建他们想要的内容，并将其导出到Hugo项目中，无需深入了解Markdown和风格。

不需要配置服务器和基础设施，让开发者可以让任何小项目启动和运行，而不需要使用那些根本是多余的技术和堆栈。

低成本

部署Hugo时不需要后端基础设施，为管理博客或网站提供了一种廉价的方式。

因为所有的HTML文件都是在构建时生成的，所以不需要配置服务器或数据库，消除了这些经常带来的财务挫折。

只需使用众多免费服务之一，如GitHub页面、Netlify或Vercel，就可以部署一个博客或网站。

安全性

雨果网站和应用程序几乎是不可破解的。由于Hugo网站没有附加的数据库，所有东西都是静态可用的。

开发人员不需要担心可能通过表格字段或安全漏洞进入数据库的SQL注入。Hugo不仅提供了速度，而且还很安全。

雨果的权衡

虽然Hugo很容易学习和使用，其优点包括速度快和成本低，但它也有一些折衷的地方。

准备好用动态来换取静态。Hugo提供了速度，但在SSG中手动操作可能会很麻烦，比如处理函数、变量和范围。

在使用Hugo之前要考虑的另一个权衡是缺乏一个图形用户界面，以更有视觉吸引力的方式管理内容。然而，这可以通过使用第三方CMS如Netlify CMS或Dato CMS作为数据源来解决。
<h2″>用Hugo建立一个应用程序

现在让我们通过设置和建立一个博客应用程序来看看Hugo的实际应用。

安装Hugo

首先，我们必须安装Hugo；选择相应的操作系统来安装该软件包。

虽然我在这个项目中使用了Linux，但任何能够运行Go编译器工具的操作系统都可以将Hugo安装到本地机器上。

通过检查Hugo的版本是否是最新的，来确认安装完成。从终端运行以下内容。

hugo version

接下来，运行下面的命令来查看可用的命令和标志的列表。

hugo help

因为Hugo的命令和标志列表很短，所以开发体验要容易得多。

现在我们确认Hugo的安装是成功的，让我们创建一个Hugo网站。首先，导航到一个想要的位置，运行以下命令。

hugo new site mysite

这将创建一个拥有Hugo项目模板的mysite 文件夹。现在我们可以在文本编辑器中打开mysite 文件夹，例如Visual Studio Code，以查看其结构。

添加一个主题

接下来要做的事情是添加一个主题。我们甚至可以建立自己的主题，然而，为了本指南的目的，让我们使用themes.gohugo.io/ 上的主题。

我决定在本教程中使用Ananke；从GitHub下载这个主题的压缩文件。

将gohugo-theme-ananke-master 文件夹提取到Hugo项目中的themes 文件夹中。为了简单起见，将解压后的文件夹重命名为ananke 。

打开Hugo项目根目录下的config.toml ，添加以下一行。

theme = 'ananke'

为了检查一切配置是否正确，让我们构建应用程序并在网络上测试它。首先运行以下程序。

hugo server -D

如果你打算以草稿模式显示内容，则添加-D 标志。这个命令只在开发中使用。

如果一切顺利，我们应该看到应用程序被构建并在http://localhost:1313/。

这只是主题的默认外观，没有添加内容。

添加内容

要向我们的博客添加内容，我们可以手动添加，也可以通过命令行添加，方法如下。

hugo new posts/my-first-post.md

通过命令行添加内容的好处是它提供了一个Markdown的模板，就像下面这样。

---
title: "My First Post"
date: 2021-08-13T13:06:28+01:00
draft: true
---

然后在content 文件夹内创建以下内容。

为了这个教程，让我们添加一些随机的数据和图片。

---
title: "J Cole Story"
featured_image: "/jcole.jpg"
date: 2021-08-13T13:06:28+01:00
draft: false
---
Jermaine Lamarr Cole (born January 28, 1985) known professionally as J. Cole, is an American rapper, singer, songwriter, and record producer. Cole is regarded as one of the most influential rappers of his generation.[5] Born on a military base in Germany and raised in Fayetteville, North Carolina,[6] Cole initially gained recognition as a rapper following the release of his debut mixtape, The Come Up, in early 2007. Intent on further pursuing a musical career, he went on to release two additional mixtapes, The Warm Up (2009) and Friday Night Lights (2010) both to critical acclaim, after signing to Jay-Z's Roc Nation imprint in 2009.
Cole released his debut studio album, Cole World: The Sideline Story, in 2011. It debuted at number one on the US Billboard 200.[7] His next album, Born Sinner (2013), also topped the Billboard 200. Moving into more conscious themes, 2014 Forest Hills Drive (2014) topped the Billboard 200 and earned Cole a Best Rap Album nomination at the 2015 Grammy Awards.[8] His jazz influenced fourth album, 4 Your Eyez Only (2016), debuted at number one on the Billboard 200.[9] Cole's fifth album, KOD (2018), became his fifth number-one album on the Billboard 200 and featured a then-record six simultaneous top 20 hits on the Billboard Hot 100, tying The Beatles.[10] His sixth studio album, The Off-Season, was released on May 14, 2021.
 !\[Jcole\](/jcole.jpg)
Self-taught on piano, Cole also acts as a producer alongside his rap career, producing singles for artists such as Kendrick Lamar and Janet Jackson, as well as handling the majority of the production in his own projects.[11] He has also developed other ventures, including Dreamville Records, as well as a non-profit organization called the Dreamville Foundation.[12] Dreamville's compilation album Revenge of the Dreamers III (2019) debuted at number one on the Billboard 200 and was nominated for Best Rap Album at the 2020 Grammy Awards. In January 2015, Cole decided to house single mothers rent-free at his childhood home in Fayetteville, North Carolina.[13]

然后Markdown会产生以下内容。

注意，当把图片添加到文章中时，它是通过静态文件夹访问的。任何放入静态文件夹的资产都是全局或根级别的，不管我们在哪个项目目录下。

需要注意的是，Markdown文件的名称是应用程序中的一个路由，这意味着第一个帖子位于http://localhost:1313/posts/my-first-post/。

另外，为了SEO的目的，一定要对Markdown文件进行描述性的命名。

我继续为博客创建了另外两个Markdown文件，包括我喜欢的一些说唱歌手的基本信息，以增加更多内容。

我们的博客现在已经有了更好的雏形。

基准测试

还记得我们最初谈到速度是选择Hugo而不是其他静态网站生成器的主要原因之一吗？

每当Hugo服务器检测到一个变化时，就会进行基准测试；它需要不到8毫秒的时间来重建并立即将变化提供给我们的浏览器。

这是令人难以置信的速度，不管是在哪个机器上构建应用程序。这里是这个项目的服务系统。

让我们再添加八个帖子，包括一个featured_image 和图片。现在，让我们看看它需要多长时间来构建。

这个具体的构建到大约397毫秒；甚至没有达到一秒钟！。现在，想象一下，如果我们需要添加100个或1000个帖子；使用Hugo所需的时间将大大少于使用另一个SSG或动态网页。

让我们看看在Vercel上部署时，这11个帖子需要多长时间来构建。

它花了83毫秒；这真的是快得惊人

部署

在部署之前，我们要确保config.toml 文件中的基本URL被配置为我们要部署的URL。

我已经将其部署到了Vercel，你可以在这里访问。

这是基本的URL，虽然它不会真正影响本地的开发，但在构建项目时，它会生成一个公共文件夹，所有静态生成的HTML文件都放在那里并更新。如果基础URL不正确，这可能会导致图像链接中断。

现在，我们要先把我们的代码推送到GitHub私有或公共仓库。有很多方法可以做到这一点，但我们将简单地在本地开发环境中通过运行以下程序来构建项目。

hugo server 

然后，运行下面的程序。

hugo 

这些生成一个public 文件夹，可以部署在任何地方，如Vercel、Netlify或普通的共享主机。这样做的问题是，要跟上变化变得非常困难。

这就是为什么我们要部署到GitHub，然后将GitHub账户连接到Vercel。

要做到这一点，在GitHub上创建一个新的仓库。然后，在项目的根目录下一个接一个地运行下面的命令。

git init
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/USERNAME/repository_name.git
git push -u origin main

这就把项目上传到GitHub。刷新后的结果如下。

现在，将GitHub账户连接到Vercel。如果你正在注册Vercel，你可以选择使用GitHub作为提供者。否则，使用你现有的GitHub账户。

然后，我们应该看到以下内容；点击新项目。

在导入 Git 仓库下，你应该看到所有可用的仓库，按升序排列，由你最后一次提交决定。

选择拥有Hugo项目的仓库。

当Hugo项目第一次构建时，它会创建一个public 目录，所有生成的HTML和其他资产都将被提供给网页。

如果我们没有在本地开发环境中构建我们的项目，Vercel会自动为我们创建这个文件夹。但是，由于有public 文件夹，Vercel和其他流行的托管服务知道要建立和提供public 文件夹。

结论

祝贺你!你已经走到了最后。凭借Hugo的速度、简单性和静态性，它在创建和部署应用程序时为新的和有经验的开发者提供了无缝的开发体验。

The postHow to build an app with Hugoappeared first onLogRocket Blog.