如何使用 Hugo 和 Deno Deploy 搭建博客
您可能会惊讶地发现，用 Go 编写的静态站点生成器可以发布在 Deno Deploy 上。
由于 Deno 拥抱 Web 标准，运行时 可以获取并执行外部代码。例如，Deno 可以通过 URL 导入运行一个 简单的 HTTP 文件服务器，而无需额外的配置或编译步骤。并且由于这只是提供静态文件，因此静态站点是如何生成的并不重要。
在本示例中，我们将向您展示如何在几分钟内使用 Hugo 和 Deno Deploy 设置和部署静态站点。
请注意，我们选择 Hugo 是因为它是一个流行的用 Go 编写的静态站点生成器，具有快速的构建时间（每页少于 1 毫秒）。但是，任何静态站点生成器都可以与 Deno Deploy 一起使用。
设置 Hugo
Hugo 已经有一些关于 入门 的精彩资源，但这里是一个简短的摘要。
安装 Hugo
在 MacOS 上，您可以使用 homebrew 或 macports 安装 Hugo。有关安装 Hugo 的更全面的列表，请参阅他们的 安装指南。
$ brew install hugo创建一个新站点并安装主题
您可以使用 hugo 命令创建一个新站点
$ hugo new site hugo-on-deno-deploy这将创建一个名为 “hugo-on-deno-deploy” 的新目录，其中包含项目。导航到该文件夹以安装主题。
Hugo 允许您使用 git 子模块 来安装主题。让我们安装 ananke 主题并将其添加到 config.toml 文件中
$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
$ echo theme = \"ananke\" >> config.toml要浏览其他主题，请查看 Hugo 的主题列表。
添加一篇博客文章
同样，我们可以使用 hugo 创建一篇博客文章。以下命令将在 “content” 目录下创建一个名为 “posts” 的目录，并在其中创建一个名为 “my-first-post.md” 的新文件。
$ hugo new posts/my-first-post.md您新创建的 markdown 文件将自动包含一些带有空主体的 frontmatter
---
title: "My First Post"
date: 2022-03-21T17:55:41-07:00
draft: true
---启动本地服务器并查看一下！
$ hugo server -D请注意，-D 标志将显示所有 draft: true 的文章。
设置 Git/Github
GitHub 是使用 CI/CD 部署到 Deno Deploy 的关键部分。要进行设置，我们只需创建一个 GitHub 仓库并添加项目目录。
首先，在 Github 中创建一个仓库
获取远程 URL，将其添加到您的本地 git 远程仓库，并推送到 GitHub。
$ git remote add origin git@github.com:lambtron/hugo-on-deno-deploy.git
$ git add .
$ git commit -am “first commit”
$ git push origin main您的 Hugo 博客现在应该是一个 GitHub 上的仓库。
设置 Deno Deploy
Deno Deploy，我们在边缘环境上运行的分布式 TypeScript 和 JavaScript 运行时，提供一流的 GitHub 支持，这意味着自动部署可以融入您的工作流程。
首先，访问 Deno Deploy 并点击 “Sign Up”。这将要求您连接您的 GitHub 帐户。
然后，创建一个新项目
选择 “Deploy from GitHub”，链接仓库，并使用生产分支。对于部署模式，选择 “GitHub Actions”，因为我们想使用 GitHub Actions 首先使用 Hugo 构建站点，然后将其部署到 Deno Deploy
当您点击 “Link” 时，将出现一条确认消息，以及添加到您的 GitHub action 的示例 yaml
我们将使用示例 yaml 作为创建 GitHub Action 的起点。
设置 Github Actions
Github Actions 是一种自动化部署工作流程的简单方法。在我们的示例中，GitHub Actions 将克隆仓库到 ubuntu 镜像上，安装 hugo，构建站点，然后将其部署到 Deno Deploy。
您可以从 UI 创建 GitHub Action 工作流程，或者您可以简单地添加一个 .github/workflows/main.yml 文件并提交它
name: Deploy to Deno Deploy
# Controls when the workflow will run
on:
# Triggers the workflow on push or pull request events but only for the main branch
push:
branches: [main]
pull_request:
branches: [main]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# A workflow run is made up of one or more
# jobs that can run sequentially or in parallel
jobs:
deploy:
name: Deploy
runs-on: ubuntu-latest
permissions:
id-token: write # Allows authentication with Deno Deploy.
contents: read # Allows cloning the repo.
steps:
- name: Clone repository
uses: actions/checkout@v2
with:
submodules: true # Fetch Hugo themes (true or recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build site
run: hugo --minify
- name: Deploy to Deno Deploy
uses: denoland/deployctl@v1
with:
project: hugo-on-deno-deploy # the name of the project on Deno Deploy
entrypoint: https://deno.land/std@0.140.0/http/file_server.ts
root: public # Where the built HTML/CSS/JS files are located.工作流程的最后一步使用 deployctl，这是一个用于 Deno Deploy 的命令行工具。对于入口点，我们将使用 Deno 的 std lib fileserver。请注意，我们不需要 “下载” 文件服务器——只需提供原始 TypeScript 文件的 URL 地址就足以让 Deno Deploy 运行服务器。
现在，让我们尝试一个示例部署。提交到 main 分支（或将拉取请求合并到 main 分支）以触发 GitHub Action。
在 GitHub Action 成功运行后，点击您在 Deno Deploy 上的项目中的 “View”
发布一篇博客文章
现在我们已经使用 GitHub 和 Deno Deploy 设置了持续部署，让我们发布我们的第一篇博客文章。
第一步是使用 hugo 创建一篇博客文章。
$ hugo new posts/my-second-post.md将一些内容添加到新的 markdown 文件中，并从 frontmatter 中删除 draft: true。
---
title: "My Second Post"
date: 2022-03-24T09:58:34-07:00
---
This is my second post!使用 hugo server 在本地预览您的站点。当您对文章感到满意时，将更改提交到您的 main 分支。最后，在 GitHub Actions 成功部署后
下一步是什么？
将 Hugo 与 Deno Deploy 结合使用是在边缘环境上启动和全球部署博客的最简单方法之一。此外，持续部署设置使发布博客文章变得容易，因此您可以专注于内容。
此示例还表明，您的静态站点生成器不需要用 JavaScript 或 TypeScript 编写才能在 Deno Deploy 上运行。可以使用任何静态站点生成器，只要 HTML 文件可以静态提供服务。
想分享您在 Deno Deploy 上部署的内容或有疑问？欢迎在我们的 Discord 上打个招呼。