什么是Hugo？

Hugo，世界上最快的网站建设框架。

Hugo 是非常简单的一个静态网站生成器，因为它是以单一的二进制文件分发的–这是Go程序的众多好处之一。它需要一个源文件目录，并在其上运行一个构建过程，以生成一个纯粹的静态网站。

Hugo 的独特之处在于其无与伦比的构建速度和围绕布局(layouts)、分类(taxonomies)和内容(content)的严格约定。它是一个静态网站生成器，为Let’s Encrypt，1Password，Linode和 digital.gov 等知名网站提供支持。

访问 Hugo 网站！

Hugo 安装

在我们开始之前，让我们在电脑上安装一些工具，这些工具将帮助我们建立我们的网站。

Hugo CLI

首先，我们将安装Hugo命令行界面（CLI）。Hugo CLI将帮助我们生成我们的项目文件夹，并为我们提供一个开发服务器，这样我们就可以在没有任何真正的服务器的情况下在我们的网站上工作。

MacOS|Linux

如果你使用macOS或Linux，那么Homebrew是安装Hugo最简单的方法。一旦你安装了Homebrew，就可以运行：

brew install hugo

如果你并没有安装Homebrew。前往 Hugo 发布页面，找到hugo_extended_xxxx_Linux-64bit.tar.gz 文件。x代表的是版本号，会有所不同。点击该链接，下载压缩文件，并将压缩文件解压到你希望项目运行的文件夹中。

如果你看到应用程序不能被打开，因为它来自一个不明身份的开发者，请到系统偏好->安全和隐私->常规。你应该看到一个选项，点击Hugo应用程序旁边的 “允许”。

Windows

与其他操作系统相比，Windows有一些额外的步骤，但在Windows的官方安装页面上有明确的记录。按照这些说明进行，完成后再回来看看。

如果你是在Windows上，那么Chocolatey软件包管理器就是你的选择，运行：

choco install hugo-extended -confirm

如果没有安装，同样可以前往 Hugo发布页面，找到hugo_extended_xxxx_windows-64bit.tar.gz 下载压缩文件并解压到你希望运行的文件夹中。

任何用于编辑代码的文本编辑器都是好的，但建议下载使用 VSCode，因为它，适用于任何操作系统，有广泛的扩展库，使开发更快。

让我们检查一下，打开一个新的终端，输入 hugo version 以检查 Hugo 版本

如果打印出一个版本号，说明安装成功，您就可以开始了！

如果没有，请查阅 Hugo 文档 或访问 Hugo 社区论坛 。

Hugo 站点生成

打开你的终端程序（或Windows上的命令行程序），导航到你希望你的 Hugo 项目所在的目录并运行以下命令：

cd hugo
hugo new site my-blog
Congratulations! Your new Hugo site is created in X:\Hugo\my-blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

一个名为my-blog的新文件夹将在你的根目录文件夹中生成，这是Hugo为你的网站建立的脚手架。

在你最喜欢的代码编辑器中打开你的my-blog文件夹，浏览一下内容，你应该能看到以下目录：

my-blog
├── archetypes
|   └── default.md
├── content
├── data
├── layouts
├── static
├── themes
└── config.toml

这些目录在这个阶段可能对你没有任何意义，如果你现在不了解它们，也不要着急。我们会在本教程的过程中使用它们，这将建立起熟悉感。

  • archetypes - 定义了新内容的默认元数据（也称为正面内容）。对于这个系列，你不需要担心原型问题。
  • config.toml - 为你即将蓬勃发展的Hugo网站编写配置文件。
  • content 你的页面内容（通常是markdown）就放在这里。
  • data - csv、json、xml或toml文件，可以像只读数据库一样被访问。
  • layouts - 为你的内容提供页面模板。
  • data - 你所有不需要处理的资源（通常是图像、字体、pdf等）。
  • theme - 用一个现有的主题来启动你的Hugo网站。(我们不会在这个系列中使用主题）。

启动开发服务器

现在我们将启动我们的开发服务器。开发服务器是一个在你的计算机上运行的本地服务器，严格用于开发目的。它将你的程序托管在一个端口上，你可以在浏览器中访问该网站。

在你站点根目录中打开你的终端，运行这个命令：hugo server

这意味着在1313端口启动一个本地服务器，你可以通过你的网络浏览器进入 http://localhost:1313/（默认地址）访问该网站。你应该看到一个空白的白色页面，因为我们还没有添加任何东西。

每次你对你的代码进行修改时，这个服务器会自动重新启动，你的网络浏览器也会重新加载!

主题配置

Hugo + PaperMod搭建技术博客

在你的 Hugo 站点文件夹内， 运行命令：

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

更新：在Hugo 站点文件目录下运行：git submodule update --remote --merge

在hugo.yml中添加：theme: PaperMod

部署发布

建立并将你的网站部署到云服务器上，这样每个人都可以访问并看到你所创造的东西。

Build 建立

构建你网站的生产版本以部署到云端。

祝贺你创建新的网站! 🎉

你已经完成了完全从零开始的构建工作，现在是向世界展示它的时候了。

在我们开始部署我们的服务器之前，我们需要了解构建过程。

The Process

Hugo的构建过程在理论上很简单，我们在终端运行一个命令，而不是启动一个本地开发服务器，我们告诉Hugo构建一个production站点。

什么是Production site？它是一个以服务器为中心建立的网站，我们写的每一个代码文件都会被分析和拼接起来，这样它就可以为世界服务了。

Hugo所做的是读取我们content文件夹里模板文件和内容文件的所有内容，并开始将它们合并在一起–最终的结果是一个文件夹中包含所有需要传输到网络服务器的文件。

Build

在运行生产构建之前，确保你在config.toml中的baseURL看起来像这样：baseURL = "/"。

要运行生产构建，请到你的终端，如果开发服务器正在运行，按ctrl-c取消它，然后写hugo-gc-minify。这将迅速生成你的新网站文件，并把它们放在你的项目的Public文件夹中。如果你愿意，你可以打开它们并探索其输出，但这并不是必须的。

这些是我们将上传到云端的真正文件。

GitHub Page。

在GitHub里创建一个仓库，名称叫做你的名字.github.io。

当我们本地预览没问题了的时候，在终端输入hugo -F --cleanDestinationDir，在public文件夹下就会生成输出文件。

我们将public文件夹作为GitHub Page的本地仓库，每次生成输出文件就推送到GitHub上，GitHub Page就会自动帮我们部署了。

GithubAction自动化

访问您的GitHub仓库。从主菜单选择设置 > Pages。将Source更改为GitHub Actions。

在本地仓库中创建一个空文件：.github/workflows/hugo.yaml

将YAML代码复制并粘贴到您创建的文件中。根据需要更改分支名称和Hugo版本。

使用类似"Add workflow"的提交消息将更改提交到本地仓库，并推送到GitHub。

当GitHub完成构建和部署您的站点后，状态指示器的颜色将变为绿色。

在部署步骤下，您将看到链接到您的在线站点的链接。

将来，每当您从本地仓库推送更改时，GitHub都会重新构建您的站点并部署更改。

配置自定义域名

setting → pages → customdomain

设置子域名，将DNS设置cname指向你的名字.github.io

Netlify

将您的Hugo网站部署到Netlify的云服务器上。

Netlify提供了一个免费的网络服务来托管我们所需要的静态文件，它还免费提供了一个漂亮的域名，如[项目名称].netlify.app!

这是最简单的部署方法，也是我们本课程的首选方法。

注册

如果您还没有账户，请到Netlify的网站上注册。

上传文件

一旦你注册，登录，并遵循步骤，前往你的团队页面，在页面的底部应该有一个大的区域，上面写着Want to deploy a new site without connecting to Git? Drag and drop your site folder here.（想在不连接Git的情况下部署一个新网站？把你的网站文件夹拖放到这里。）

找到我们在上一节中建立的名为public的文件夹，把它拖到屏幕上的这个区域。

Netlify会部署它并给它一个随机的域名。

域名

现在你可以通过点击屏幕上方的Domain settings按钮或Settings按钮来设置你自己的域名。

找到Custom domains部分，点击你的随机域名旁边的options下拉按钮，点击Edit site name，给它你自己的名字，然后点击保存，用显示的域名访问你的新网站。

如果一切顺利，你的网站应该是活的，你可以开始把它发送给你的朋友了

如果你不想要你的URL中的.netlify.app部分，你可以付费购买一个真正的域名并按照这些文档进行设置。