静态网站易于创建,使用起来非常快。如果您学习使用Hugo,则可以在Linux上生成基于主题的静态网站。创建网站又很有趣!

Hugo网站生成器

静态网站是指不会即时创建或修改网页的网站。没有后台数据库,电子商务处理或  PHP。所有网页都是完全预先构建的,可以非常快速地提供给访问者。

但这并不意味着静态站点一定很无聊。他们可以使用HTML提供的所有内容,以及级联样式表(CSS)和  JavaScript。他们还可以轻松地使诸如图像轮播和网页在背景图像上滑动。

雨果网站生成器可以使用模板和您创建的任何内容来生成完整的网站。然后,您可以将其放置在托管平台上,并立即拥有一个实时网站。

雨果将  markdown用于您创建的页面和博客条目。Markdown是最简单的标记语言,它使您的网站维护变得简单。

雨果(Hugo)的配置文件使用汤姆(Tom)的简单语言(TOML)和“不是标记语言(YAML)”的YAML,它们也很容易。另一个好处是Hugo的速度非常快-一些网站的加载时间不到一秒钟。它有许多模板供您选择,并且一直在添加更多模板,因此很容易上手。只需选择一个模板并添加一些使其成为您的内容。

Hugo还可在您的计算机上充当小型Web服务器。在设计和创建网站时以及添加新帖子时,您都可以看到网站的实时版本。每次您在编辑器中“保存”时,它也会自动更新,因此您可以立即在浏览器中看到更改的效果。

托管您的网站

当涉及到托管静态网站时,您会选择很多。大多数公司提供免费托管供个人或开源使用。当然,您也可以选择常规的网络托管公司.

安装Hugo

与Hugo一起,您需要安装Git。Git已经安装在Fedora 32和Manjaro 20.0.1上。在Ubuntu 20.04(Focal Fossa)上,它是作为Hugo的依赖项自动添加的。

要在Ubuntu上安装Hugo,请使用以下命令:

sudo apt-get install hugo
sudo apt-get在终端窗口中安装hugo。

在Fedora上,您需要输入:

sudo dnf install hugo
sudo dnf在终端窗口中安装hugo。

Manjaro的命令是:

sudo pacman -Syu hugo
sudo pacman -Syu hugo在终端窗口中。

雨果创建网站

当我们要求雨果创建一个新站点时,它将为我们创建一组目录。这些将包含我们网站的不同元素。但是,这不是最终的网站,它将被上传到您的托管平台。这些目录将包含主题,配置文件,内容和图像,当我们要求雨果构建实际网站时,雨果将用作输入。

就像源代码和已编译程序之间的区别一样。源代码是编译器用来生成最终产品的材料。同样,Hugo会获取这些目录的内容并生成一个有效的网站。

我们将要运行的命令将创建一个与您要创建的站点同名的目录。该目录将在您运行命令的目录中创建。

因此,移至要在其中创建网站的目录。我们正在使用我们的主目录,因此我们键入以下内容:

hugo new site geek-demo
hugo新站点geek-demo在终端窗口中。

这将创建一个“ geek-demo”目录。我们输入以下内容切换到该目录并运行  ls

cd geek-demo/
ls
终端窗口中的cd geek-demo /。

我们看到“ config.toml”配置文件和已创建的目录。但是,这些实际上是空的,因为这只是网站的脚手架。

初始化Git和添加主题

我们需要添加一个主题,以便Hugo知道我们希望最终站点看起来像什么。为此,我们必须初始化Git。在您网站的根文件夹(包含“ config.toml”文件的根文件夹)中,运行以下命令:

git init
git init在终端窗口中。

数以百计的主题  ,你可以选择,而且每一个都有一个网页,描述它。您可以运行主题演示,并找出下载主题的命令。我们将使用一个叫做Meghna的

为了将该主题合并到我们的网站中,我们需要切换到“ Themes”文件夹并运行以下git clone命令:

cd themes
git clone https://github.com/themefisher/meghna-hugo.git

Git在进行过程中会显示一些消息。完成后,我们将使用ls包含主题的目录:

ls
在终端窗口中git clone https://github.com/themefisher/meghna-hugo.git

雨果主题包括一个工作示例网站。您必须将该默认站点复制到您的网站目录中。

首先,返回您网站的根目录。我们使用-r(递归)cp选项包括子目录,使用-f(force)选项覆盖任何现有文件:

cd ..
cp themes/meghna-hugo/exampleSite/* -rf
cp主题/ meghna-hugo / exampleSite / * -rf在终端窗口中。

在本地启动您的网站

我们已经做了足够的工作来在本地启动一个新网站。它仍将包含占位符文本和图像,但这些仅仅是外观上的更改。让我们先验证一下技术知识。

我们告诉Hugo运行其Web服务器,并使用-D(草稿)选项来确保网站上包含任何可能带有“草稿”标签的文件:

hugo server -D
终端窗口中的hugo服务器-D。

下图显示了我们hugo命令的输出  。

在终端窗口中从hugo server -D命令输出。

有人告诉我们,雨果(Hugo)在142毫秒内建成了该网站(我们确实说过这很快,对吗?)。它还告诉我们按Ctrl + C停止服务器,但暂时不运行。

打开浏览器,然后localhost:1313 前往查看您的网站。

Firefox中默认的“ Meghna”主题静态网站在localhost:1313上运行。

修改默认网站内容

像这样运行时,Hugo会从内存中提供网页。它没有在硬盘上创建网站,而是在RAM中创建工作副本。不过,它正在监视硬盘驱动器上的文件和图像。如果其中任何一个被更改,它将刷新浏览器中的网站-您甚至不必按Ctrl + F5。

打开另一个终端窗口,然后导航到您网站的根目录。在编辑器中打开“ config.toml”文件。将“ baseURL”更改为将托管您的网站的域,并将“标题”更改为您的网站的名称。保存您的更改,但保持编辑器打开。

编辑器中的config.toml文件,进行更改。

Hugo检测到“ config.toml”文件已发生更改,因此它将读取这些内容,重建站点,并刷新浏览器。

刷新的浏览器,标签中显示新的Web名称。

现在,您应该在浏览器选项卡中看到为站点选择的名称。立即获得有关已保存更改的视觉反馈,可大大加快自定义网站的过程。

所有主题都不尽相同,但我们发现过去很容易遵循。网站的不同部分以及每个部分中的设置都有明显的名称,因此您在更改中总是很明显。

而且,再次保存更改后,您就会在浏览器中看到所做的更改。如果您不喜欢它,只需撤消更改并重新保存即可。

控制网站的各种配置文件分别专用于单个作业,并以有意义的方式标记。跟踪它们并不难,因为它们在目录中没有太多的位置。通常,它们位于“数据”文件夹中。

因为我们使用的是双语模板,所以我们的英语配置文件位于“ En”子目录中。

如果在编辑器中打开“数据”>“ En”> banner.yml文件,您将看到管理网站横幅区域的设置的集合。

编辑器中的data / en / banner.yml文件。

更改“标题”和“内容”设置时,将更改标题页上的文本。

我们还更改了“标签”设置,因此按钮文本显示为“查找更多”。对于您的网站,您可能也想更改图像。

banner.yaml文件,在编辑器中进行了更改。

保存更改后,您将在浏览器中看到它们。

Firefox中运行在localhost:1313上的默认主题静态网站。

更改网站的其他元素

您可以用类似的方式更改所有其他元素。只需跟踪适当的配置文件并更改设置和文本即可满足您的需求。

您还需要更改图像。默认图像将在配置文件中引用。您可以轻松查找并查看原始图像,以了解其尺寸。

图片放置在“静态>图片”目录中,其中包含网站不同部分的子目录。将所有图标和徽标直接放置在“静态>图像”目录中。

添加新博客内容

到目前为止,我们已经在研究更改已经存在的内容。但是,我们如何添加新的博客文章?雨果(Hugo)使用称为“原型”的概念来创建新内容。如果我们不为博客条目创建原型,则每次我们要求Hugo创建新博客条目时,都会为我们创建一个默认文件。

很好,但是有了原型,我们可以节省一些精力,并确保事先为我们输入了尽可能多的前端问题。

在此主题中,博客条目位于内容>英语>博客中。如果我们在编辑器中打开现有的博客条目(例如“ simple-blog-post-1.md”),则可以看到最重要的问题。

我们需要复制该部分,编辑当前条目,以便可以将其用作原型模板,然后将其保存在“ Archetypes”文件夹中。如果我们将其命名为“ blog.md”,它将自动用作新博客条目的模板。

在中gedit,我们可以执行以下操作:

gedit content/english/blog/simple-blog-post-1.md
gedit content / english / blog / simple-blog-post-1.md在终端窗口中。

突出显示包括两个虚线的顶部,然后按Ctrl + C进行复制。按Ctrl + N启动新文件,然后按Ctrl + V粘贴复制的内容。

编辑器中现有博客条目中的前端问题。

现在,进行以下更改,并确保在每行中的冒号(:)后面留一个空格:

  • 标题:将其更改为"{{ replace .Name "-" " " | title }}" (包括引号)。每个新博客帖子的标题将自动插入。hugo new正如您将看到的,它由传递给命令的文件名组成。
  • 日期:将其更改为{{ .Date }}。创建博客的日期和时间将自动输入。
  • Image_webp:这是webp格式的博客标题图像的路径  。如果找不到主题,它将使用下一行中的图像。
  • image:这是JPEG格式的博客标题图像的路径。您最好将这些指向默认图像。然后,所有博客帖子都将具有权宜之计的图片,甚至在您找到,调整大小或保存自定义图片之前。完成此操作后,您可以轻松地编辑文件名以匹配您的自定义图像。
  • 作者:改成你的名字。
  • 说明:您在此处键入每个帖子的简短说明。如果将其更改为空字符串(""),则可以为每个新博客键入描述,而无需编辑旧文本。
在编辑器中的原型文件中编辑了前件。

将此新文件另存为“ archetypes / blog.md”,然后关闭gedit。现在,只要您要创建新的博客条目,Hugo就会使用这种新的原型。

请注意,我们的文件应具有“ .md”扩展名,因为我们将使用markdown编写博客条目:

hugo new blog/first-new-blog-post-on-this-site.md
终端窗口中的hugo new blog / first-new-blog-post-on-this-site.md。

现在,我们要在编辑器中打开新博客条目:

gedit content/english/blog/first-new-blog-post-on-this-site.md
在终端窗口中gedit content / english / blog / first-new-blog-post-on-this-site.md。

我们的新博客文章位于gedit

gedit中的新博客文章。

已为我们添加了以下所有重要的方面:

  • 标题:这是从文件名推导出来的。如果需要任何调整,可以在此处进行编辑。
  • 时间和日期:  这些是自动添加的。
  • 默认图片:  您可能希望找到一个相关的免版税图片。将其放在“静态”>“图像”>“博客”中。您必须在此处键入图像的实际文件名。
  • 作者:您的姓名被自动添加。
  • 说明:已被编辑。

使用markdown编写博客,并将标准标记用于标题,粗体,斜体,图像,链接等。每次保存文件时,Hugo都会重建网站并在浏览器中对其进行更新。

下图显示了我们的新博客条目如何显示在主页上。

主页上的新博客条目。

下图显示了新博客条目在其自己页面上的外观。

主页上的新博客条目。

完成博客文章的编写后,保存更改,然后关闭编辑器。您也可以关闭浏览器,因为我们将停止Hugo服务器。

在运行Hugo服务器的终端窗口中,按Ctrl + C。

建立网站

在网站的根目录中,发出以下命令来构建网站:

hugo
雨果在终端窗口中。

雨果建立了网站,并列出了它创建的页面和其他组件的数量。创建我们的产品需要134毫秒。

Hugo在您网站的根目录中创建了一个名为“ Public”的新目录。在“公共”目录中,您将找到转移到托管平台所需的所有文件。

请注意,您必须将“公共”目录中的文件和目录上载到托管平台,而不是“公共”目录本身。

需要上传到托管平台的网站文件。

现在您已了解基础知识

每个主题都需要进行一些探索,以弄清楚如何使它看起来像您想要的样子,但这是有趣的部分!鉴于雨果(Hugo)能够在浏览器窗口中立即呈现更改的能力,不需要花费太多时间。

您可能会发现,编写文本以及查找和修剪图像是过程中花费时间最长的部分。

Hugo 文档站点也很有帮助,但范围广泛。希望这一基本演练足以使您入门。

如果您使用Git和  GithubGitLabBitBucket,那么这些平台也可以使用集成。每当您向其推送更改时,他们就会监视您的远程Hugo存储库并重建您的实时网站。

如何在Linux上使用Hugo静态站点生成器
Tagged on:

发表评论

电子邮件地址不会被公开。 必填项已用*标注