如何使用 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 文件将自动包含一些带有空主体内容的 前置信息
---
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 [email protected]: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 并点击“注册”。这将要求您连接您的 GitHub 帐户。
然后，创建一个新项目
选择“从 GitHub 部署”，链接存储库，并使用生产分支。对于部署模式，选择“GitHub Actions”，因为我们希望使用 GitHub Actions 首先使用 Hugo 构建网站，然后将其部署到 Deno Deploy
当您点击“链接”时，将会有一个确认消息，以及要添加到您的 GitHub 操作中的示例 yaml
我们将使用示例 yaml 作为创建 GitHub 操作的起点。
设置 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/[email protected]/http/file_server.ts
root: public # Where the built HTML/CSS/JS files are located.工作流程的最后一步使用 deployctl，这是一个用于 Deno Deploy 的命令行工具。对于入口点，我们将使用 Deno 的 std 库 文件服务器。请注意，我们不需要“下载”文件服务器，只需提供原始 TypeScript 文件的 URL 地址，Deno Deploy 就可以运行服务器。
现在，让我们尝试一个示例部署。提交到 main 分支（或将拉取请求合并到 main 分支）以触发 GitHub Action。
GitHub Action 成功运行后，点击 Deno Deploy 上项目中的“查看”
发布博文
现在我们已经使用 GitHub 和 Deno Deploy 设置了持续部署，让我们发布我们的第一篇博文。
第一步是使用 hugo 创建一篇博文。
$ hugo new posts/my-second-post.md在新的 Markdown 文件中添加一些内容，并从前置信息中删除 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 上聊聊吧。