使用Google Cloud托管静态网站

我在前阵子正好了解到Google Cloud，并开通了付费计划。虽然是付费计划，但新人有很多的赠金，但是有效期只有三个月。即便如此，Google Cloud还有免费层级可用，也就是每个月只有用到了一定量资源以上，才会收费。这个免费层级足够一个小小博客网站的运行了，于是，我决定采用Google Cloud进行部署。

开始之前

#

在开始之前，需要准备好以下道具或条件：

• 科学稳定的网络环境
• 一张由Visa或MasterCard等组织发行的国际信用卡或储蓄卡，以让您能够成功使用Google Cloud
• Google Cloud 账户 (直接使用Google账户登录即可)
• 一个域名

搭建静态网站(博客)

#

请参考

域名绑定至Cloudflare(可选)

#

由于域名的提供商不同，绑定方法也不尽相同。您应当从互联网上查询相关信息，并完成本步骤，特别是当您想要使用https或CDN时。

托管至Google Cloud

#

请主要参考该文档

指定项目

#

0. 打开Google Cloud 控制台。
1. 创建项目，并选择该项目。

配置储存桶

#

打开储存桶页面，创建新储存桶，保持默认参数即可。

将储存桶设置为可公开访问

#

1. 选择创建完成的储存桶，点击图中所示选项(修改储存分区权限)。

   

2. 点击添加成员。

   

3. 填写如下图所示，并保存。注：Storage オブジェクト閲覧者 是 Storage Object Viewer

   

配置负载均衡器

#

进入负载均衡器页面(Load Balancing, ロード バランシング)，选择创建新均衡器，配置保持默认即可。

根据该文档配置均衡器及SSL等。

配置Cloudflare(可选，根据实际情况进行)

#

打开Cloudflare控制台，配置DNS记录。添加A或AAAA记录指向负载均衡器分配的IP。并且，关闭代理，使其代理状态为仅DNS解析。若打开代理，则打开了Cloudflare的免费CDN，在前期调试时建议关闭，或者打开Cloudflare的开发模式以跳过缓存，后期可根据需要开启。

将网站上传至Google Cloud 储存桶

#

主要参考Hugo文档。 重新回到Hugo项目，编辑config/_default/hugo.toml，并添加如下内容，其中，URL在储存桶配置中可见，通常为gs://你的域名。

[[deployment.targets]]
# 此目标的任意名称。
name = "hugo-deployment"
# 要部署的Go Cloud Development Kit URL。示例：
# GCS；请参阅https://gocloud.dev/howto/blob/#gcs
URL = "gs://xxxx.xxx.xxx"

# S3；请参阅https://gocloud.dev/howto/blob/#s3
# 对于S3兼容的端点，请参阅https://gocloud.dev/howto/blob/#s3-compatible
# URL = "s3://<Bucket Name>?region=<AWS region>"

# Azure Blob Storage；请参阅https://gocloud.dev/howto/blob/#azure
# URL = "azblob://$web"

# 您可以使用“prefix=”查询参数来定位桶的子文件夹：
# URL = "gs://<Bucket Name>?prefix=a/subfolder/"

# 如果您正在使用CloudFront CDN，部署将根据需要进行缓存失效。
# cloudFrontDistributionID = <ID>

# 可选的，您可以包含或排除特定的文件。
# 有关glob模式语法，请参阅https://godoc.org/github.com/gobwas/glob#Glob。
# 如果非空，则该模式与本地路径匹配。
# 所有路径都与它们的filepath.ToSlash形式进行匹配。
# 如果exclude非空，并且本地或远程文件的路径与之匹配，则该文件不会被同步。
# 如果include非空，并且本地或远程文件的路径与之不匹配，则该文件不会被同步。
# 结果是未通过include/exclude过滤器的本地文件不会上传到远程，
# 未通过include/exclude过滤器的远程文件不会被删除。
# include = "**.html" # 只会包含以".html"结尾的文件
# exclude = "**.{jpg, png}" # 排除以".jpg"或".png"结尾的文件

# [[deployment.matchers]]配置与Pattern匹配的文件的行为。
# 有关Pattern语法，请参阅https://golang.org/pkg/regexp/syntax/。
# 在找到第一个匹配项后停止进行Pattern搜索。

# 示例：

[[deployment.matchers]]
# 缓存静态资源1年。
pattern = "^.+\\.(js|css|svg|ttf)$"
cacheControl = "max-age=31536000, no-transform, public"
gzip = true

[[deployment.matchers]]
pattern = "^.+\\.(png|jpg)$"
cacheControl = "max-age=31536000, no-transform, public"
gzip = true

[[deployment.matchers]]
# 为/sitemap.xml设置自定义内容类型
pattern = "^sitemap\\.xml$"
contentType = "application/xml"
gzip = true

[[deployment.matchers]]
pattern = "^.+\\.(html|xml|json)$"
gzip = true

使用Google Cloud CLI

#

首先，安装：

sudo snap install google-cloud-cli

随后，登录Google Cloud，这可能需要您在Linux环境中安装图形界面和浏览器。对于最新版本的Win11的WSL2，已经内置了WSLg，可以参考这里。

gcloud auth login

上传网站至储存桶：

hugo deploy

配置网站入口:

gsutil web set -m index.html -e 404.html gs://xxxx.xxx.xxx

等待

#

等待配置生效。在这期间，可能会遇到网页525等错误，需要耐心等待域名和HTTPS配置生效。

生效后，即可通过 https://你的域名 访问网站。

如果您没有使用HTTPS，那么不需要太久，便可直接通过http://google分配给你的ip访问。

更新网站

#

在本地修改博客后，使用hugo server -D查看最新效果，并且该指令会自动更新public/文件夹内容。也可以使用hugo --minify生成最优文件。在该指令之后使用hugo deploy即可更新位于Google Cloud 储存桶中的内容。

恭喜🎉

#

其它参考

https://www.bobjiang.com/blog-migration-4/