静态网站非常适合博客和极简网站。 与动态网站相比,它们要小得多,因此可以使用非常低的服务器硬件要求来托管。 今天我们将通过一个名为的静态网站生成器 雨果. Hugo 是用 go 编写的,运行速度非常快。 社区还提供了各种各样的主题 雨果主题.
Hugo 允许用户以 markdown 格式编写他们的内容,然后创建静态网站,然后您可以将其上传到要部署的服务器! 使用 Hugo 创建网站变得非常轻松。 所以让我们开始吧 example 网站!
目录
在 Linux Debian/Ubuntu Linux 上安装 Hugo
Hugo 适用于所有三种主要操作系统:Linux、Mac 和 Windows。 首先,打开终端窗口并输入以下命令:
sudo apt install hugo
如果您使用的不是 Linux,请按照您的操作系统的安装说明进行操作,网址为 这个 关联。
创建网站和用户自定义
Hugo 附带了几个命令。 您需要知道的第一个命令是创建新网站的命令。 命令语法如下:
hugo new site <site-name>
这将在当前目录中创建一个新目录,目录名称是您提供的站点名称。 现在,如果您进入目录并列出所有内容,您可能会看到创建了一些文件夹。 还将创建一个配置文件,这是您网站的主要配置文件。
创建的文件夹讨论如下:
- 原型:这些用于配置页面的默认前端内容,一个 example 将是博客文章的标题、发布日期等
- 内容:此文件夹将存放您网站的主要内容。 博客网站的内容可能是博客文章。
- 数据:这将充当您网站的迷你数据库。
- 布局:布局是一种用于生成网页的框架。 为了 example,您网站上的每个页面可能都有一个共同的页脚,在这个文件夹中,我们可以存储它的代码。 当我们运行 hugo 命令时,所有部分都会组合在一起。
- 静止的:此文件夹存储将在您的网站上显示的所有静态文件。 为了 example,您可能希望将图片分享为博客的一部分,那么所有图片都将存储在这里。
- 主题:这是将存储所有主题的文件夹
为您的站点安装主题
要开始发布一些内容,首先,我们需要为我们的网站设计一个主题。 有数以千计的主题可供选择 雨果主题 页面,您可以根据自己的喜好选择一个! 大多数时候,开发主题的开发人员甚至会有一个 example 供您预览的站点。
因此,请继续检查您网站的一些主题! 在这篇文章中,我们将寻求 纸模组 主题。 通常,在您选择的任何主题上,您都会找到说明或安装部分。
创建一个 Papermod 文件夹
对于本文,我们将按照 PaperMod 主题给出的说明进行操作。 首先,我们需要进入我们创建的文件夹:
cd <site-name> git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
此代码将存储库克隆到我们的主题文件夹中。 要激活主题,我们需要编辑我们网站文件夹根目录下的配置文件。
编辑配置文件
让我们打开 config.toml 文件并编辑它!
vim config.toml
首先将 baseURL 设置为空白,并在标题区域给出您选择的标题。 现在添加以下行来设置我们网站的主题。
theme="PaperMod"
启动服务器
现在返回文件夹并输入以下命令:
hugo server
这会将您的 Hugo 站点作为端口上的本地服务器运行 本地主机:1313. 您甚至可以在构建网站之前通过这种方式检查帖子的内容。 这也会实时编译文件,这意味着您可以实时编辑和查看您的网站,而无需来回走动!
创造内容!
正如我们之前所述,您的所有内容都将位于您网站文件夹根目录下的内容文件夹中。 布局文件夹通常用于主题覆盖。 主题带有自己的一组布局,位于该主题的布局目录中的布局文件夹中。
因此,无论何时您想要修改网站的布局,您都可以进入主题的布局文件夹并进行更改,或者将文件复制到您网站自己的布局文件夹,然后进行编辑。 我们建议采用后一种方式,因为如果出现问题,您可以保留原始文件。
另外,请记住,您将所有图像存储在静态文件夹中!
因此,让我们开始吧,向我们的网站添加一个新帖子! 为此,请继续执行以下命令:
hugo new posts/first_post.md
这将在您的内容文件夹中创建一个新的帖子文件夹并放置一个降价文件,该文件还填充了原型配置中的一些细节! 已经填充的破折号之间的所有内容都被称为前面的内容,并且是我们帖子所必需的。
帖子的实际主体在前面的内容之后开始。 我们需要知道的一件重要事情是,我们必须将 draft set 设置为 false 才能真正看到帖子! 所以让我们添加一些内容并将 draft 更改为 false:
--- title: "First" date: 2022-11-08T22:25:50+05:30 draft: false --- Hi there!
现在回到网站的根目录,再次给服务器命令:
hugo server
现在您可以看到我们的网站上生成了一些内容! 我们所有的帖子都将使用 Markdown 编写。
结论
所以你走了,现在你可以轻松地创建自己的网站,而无需接触 html-css 和 javascript。 您可能想要调整一些东西,因为您只需使用我们上面提到的布局方法。 此外,请按照您选择的主题给出的说明进行操作。 谢谢阅读!