将 Hugo 网站部署到 AWS S3

Hugo 是一个静态网站生成器

目录

当使用 hugo 生成网站时，是时候将其部署到某个托管平台了。 这里是如何将其推送到 AWS S3 并通过 AWS CloudFront CDN 提供服务的教程。

Hugo 静态网站部署到 AWS

准备网站

在这里不会描述如何创建 Hugo 网站项目或在其中添加文章或博客帖子。 假设你已经完成了这些操作。

如果没有，这里有一个 Hugo 快速入门

部署选项

有几种选项可用于部署和托管 Hugo 生成的网站 (https://gohugo.io/hosting-and-deployment/). 我个人喜欢

下面我将详细描述最后一种方法。

1. 创建具有宽松权限的 s3 存储桶

前往：https://console.aws.amazon.com/s3

  1. 创建一个以网站名称命名的存储桶，例如：“microsoft.com”

  2. 点击存储桶 => 属性，下方 => 静态网站托管 静态网站托管部分

  3. 点击编辑，然后 - 启用，并选择“托管静态网站”

编辑静态网站托管

  1. 同时在索引中设置为 index.html 和在错误中设置为 404.html
  2. 点击保存，记住“存储桶网站端点”，它看起来会像： http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
  3. 前往存储桶权限，查看下面的图片。公共访问不应被阻止。

阻止公共访问 - 关闭 1

阻止公共访问 - 关闭 2

  1. 存储桶策略（将 microsoft.com 替换为你的域名）：
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::microsoft.com/*"
        }
    ]
}

2. 创建证书

前往 AWS 证书管理器 https://console.aws.amazon.com/acm 选择正确的区域。

  1. 点击请求
  2. 公共证书
  3. 域名：选择两个，如：“microsoft.com” 和 “www.microsoft.com”
  4. 你可以请求更多子域名，如：“blog.microsoft.com”、“xmpp.microsoft.com” 等
  5. 执行 DNS 验证。如果你的注册商是 AWS，通过 Route53 控制台执行此操作会更容易。

3. 将 Lambda 函数部署到 Lambda@Edge

Lambda@Edge 函数将重写 Hugo QuickStart 项目目录的 URL，将其重写为默认对象 index.html。 这就是 Cloudfront 如何将 URI ‘/posts/my-post/’ 与内容 ‘/posts/my-post/index.html’ 返回 200 而不是 404 的方式。

Flavor Cafe (Scotch) Lambda@Edge 代码

// Hugo 在 Cloudfront 上，Lambda@Edge 函数 
// Flavor Cafe (Scotch)
// @starpebble 在 github 上
//
// 两个重写规则用于 Hugo 子目录 URI。
// 示例：
//   1. 重写 URI /posts/ 到 /posts/index.html
//   2. 重写 URI /posts 到 /posts/index.html
//
// 你可以为规则 2 添加尽可能多的文件扩展名。
// 以已知文件扩展名结尾的 URI 不会被规则 2 重写。

'use strict';

// @starpebble 在 github 上
// hugo flavor cafe (scotch)

const DEFAULT_OBJECT = 'index.html';

exports.handler = (event, context, callback) => {
  const cfrequest = event.Records[0].cf.request;
  if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
    // 例如：/posts/ 到 /posts/index.html
    cfrequest.uri += DEFAULT_OBJECT;
  }
  else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
    // 例如：/posts 到 /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
};

4. 创建 AWS CloudFront CDN

前往 https://console.aws.amazon.com/cloudfront

  1. 创建分发
  2. 创建指向你的 S3 存储桶的源

创建源

  1. 你的网站证书
  2. 当它提供将静态网站转换时，同意
  3. 创建指向你的源的行为，并将 Http 重定向到 Https

编辑行为

  1. 在行为/函数关联下，在源请求中选择你的 Lambda 函数

Lambda 函数

  1. 保存
  2. 前往你的分发的“常规”选项卡并复制你的分发域名。应该看起来像：asdfasdfasdf.cloudfront.net

分发域名示例

5. 将 AWS Route53 DNS 指向你的 CloudFrount

前往 https://console.aws.amazon.com/route53/v2/hostedzones

  1. 创建或点击你的网站的托管区域。应该命名为你的网站，例如：“microsoft.com”
  2. 创建一个指向你的 CloudFront 分发（分发域名）的空 “A” 记录
  3. 创建一个 “A” “www” 记录，作为别名指向你的第一个 “A” 记录

6. 安装 aws cli

  1. 安装 AWS 客户端命令行工具 https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
  2. 配置 AWS CLI 连接
    1. 检查文件 ~/.aws/credentials，它应该包含如下内容：
[default]
aws_access_key_id = .......
aws_secret_access_key = .......
  1. 测试连接，输入如下内容查看你的 S3 存储桶
aws s3 ls

7. 更新你的 config.toml

  1. 打开你的 hugo.toml 或 config.toml 在你的 Hugo 项目中
  2. 在末尾添加（再次将 microsoft.com 替换为你的）：
[[deployment.targets]]
# 为此目标的任意名称。
name = "lfs3"

# S3；参见 https://gocloud.dev/howto/blob/#s3
# 对于 S3 兼容端点，参见 https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# 如果你使用 CloudFront CDN，部署时将根据需要使缓存失效。
cloudFrontDistributionID = 	""

如果你的配置在 config.yml 中，它应该看起来像

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"
  1. 保存此文件
  2. 编译你的网站
hugo
  1. 使用 hugo deploy 命令 部署它
hugo deploy
  1. 在浏览器中打开你的网站 URL，查看是否一切正常

有用的链接

希望这个小的如何操作文档能帮助到你。祝你有美好的一天！