Hugo静态建站

Hugo静态建站

搭建 Hugo 网站指南

在开始之前,请确保已在电脑中安装了以下工具:Go、Hugo、npm 和 Node。

步骤 1:初始化 Hugo 网站

在终端中运行以下命令来创建一个新的 Hugo 网站:

1
hugo new site MyFreshWebsite --format yaml

此命令将创建一个名为 MyFreshWebsite 的新目录,并初始化 Hugo 网站的基本结构。

步骤 2:下载 PaperMod 主题

从以下链接下载 PaperMod 主题的最新版本:

https://github.com/adityatelange/hugo-PaperMod/archive/master.zip (历史v7.0版本有时间解析错误的问题)

下载完成后,将解压后的文件夹重命名为 PaperMod,并将其放置在 MyFreshWebsite/themes 目录下。

步骤 3:配置主题

在网站根目录下找到 hugo.yaml 文件,并添加以下内容以指定使用 PaperMod 主题:

1
theme: ["PaperMod"]

完成此步骤后,您可以通过以下命令启动 Hugo 的开发服务器来预览网站:

1
hugo server

访问终端中显示的 URL (默认是:http://localhost:1313/)即可查看网站效果。

步骤 4:添加内容

新网站目前没有内容。您可以参考 PaperMod 示例站点(https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite) 来添加内容文件。

例如,创建一篇新文章:

1
hugo new content posts/hugo-tutorial.md

在生成的 Markdown 文件中添加文章内容后,可以使用以下命令测试效果:

1
hugo server -D

image.png

image.png

步骤 5:发布网站

在发布之前,请务必在 hugo.yaml 文件中设置以下参数:

  • baseURL:您的网站域名,例如 https://yourdomain.com/
  • title:网站的标题

当您准备好发布网站时,运行以下命令:

1
hugo

这将在网站根目录下生成一个名为 public 的文件夹,其中包含网站的所有静态文件。把这个文件夹部署到您的服务器上,就可以直接访问了。

看看效果吧: https://brainbuild.netlify.app/

还有很多细节要修改,但目前可以先上第一版。您可以尽情的往网站上添加自己的文章了。

参考资料:

https://github.com/adityatelange/hugo-PaperMod/wiki/Installation

https://gohugo.io/getting-started/quick-start/