Hugo博客快速搭建小记

前言 #

我在建立此博客前并没有做很多调研，想来只是要一个能写东西的地方，无需花里胡哨，只消部署方便，费用低廉就行。因此，借鉴了平时常逛的几个站点，非常快速地建起了这个博客：

• 博客框架：Hugo；
• 博客主题：Book；
• 仓库： Github；
• 静态托管：Cloudflare Pages；
• 图床：Cloudflare R2 对象存储；
• 评论系统：Twikoo，Cloudflare Workers托管；
• 本地环境：Ubuntu 22.04；

除了域名购买外，这套方案成本为0，国内访问也还算流畅。相关的教程在网上已经有很多了，本不太想重复施工，但还是在此简单记录一下，些许对人有帮助，也算为这个新生博客充实一些内容。

安装Hugo #

• 获取安装包。apt包的版本落后很多，因此直接用deb包安装

# get .deb from https://github.com/gohugoio/hugo/releases, hugo_extended_xxxxx version
sudo dpkg --install ./hugo_extended_0.70.0_Linux-64bit.deb

• 初始化和主题获取

# 初始化站点blog
hugo new site blog

cd blog/

git init
 
# 以git submodule形式挂载主题
git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book

# 直接使用hugo-coder的例子和配置
cp themes/hugo-coder/exampleSite/* ./ -r

• 在hugo.toml中添加以下配置

# ./hugo.toml
theme = 'hugo-book'
[markup.goldmark.renderer]
  unsafe = true

• 启动服务

hugo server --bind "0.0.0.0" --minify --theme hugo-book 

• 浏览器键入http://localhost:1313/（或服务器地址）以访问博客。

部署 #

静态博客需要托管在一个平台上才能够实现外部访问，可以是自己的服务器，也可以是 Cloudflare Pages，GitHub Pages， Vercel ，Netlify这样的平台，都可以通过 GitHub 仓库进行关联。我使用的是免费的Cloudflare Pages，且免费额度看起来非常富余，通过连接 GitHub 代码仓库，自动化部署。

Cloudflare 托管 #

• 将blog项目push至github仓库，可见性可选private（GitHub Page可见性必须是public，除非有GitHub Enterprise订阅，Cloudflare Page似乎没有这个限制）；
• 注册登录Cloudflare后，进入 Cloudflare 控制台，点击Workers 和 Pages 面板;
• 选择Pages，点击连接到Git->Github->连接Github。选择 Github 账号授权后，选择授权blog项目仓库。点击 开始设置；
• 框架预设选择Hugo，构建命令为hugo、构建输出为public。点击保存并部署，等待几分钟即可部署完成。（也可以选择在自己本地构建好public文件，这里就只需设置构建输出为public，其它留空）；
• 部署完成后可看到 Cloudflare 给我们的域名xxxxxx.pages.dev，刚部署完成，需要稍等 2 分钟，点击即可直接公网访问。

域名解析 #

域名解析这部分不是必须的。Cloudflare Pages提供了免费的二级域名xxxxxx.pages.dev，如果有自己的域名，可以解析至Cloudflare的DNS，使用自己的域名访问。在部署该博客前，我已经有用了一段时间的域名了osnsyc.top，但是是在阿里云购买的，因此需要将域名解析至Cloudflare的DNS。

• 在Cloudflare的Workers 和 Pages页面->你的博客实例名->自定义域页面下，点击设置自定义域，键入自己的域名后，复制您的已分配的Cloudflare名称服务器下的两个DNS。
• 登录阿里云，进入域名控制台-域名列表-管理，打开DNS管理-DNS修改，点击修改DNS服务器，填入上一步中复制记录的两个DNS地址。确定完成后，回到Cloudflare查看信息，等待一段时间就可以用自己的域名访问了。

Cloudflare 图床 #

Cloudflare R2 是 Cloudflare 推出的免费对象存储服务（开通 R2 服务需要绑定信用卡）。详细的图文版教程可以参考pseudoyu的博文。¹ 以下是Cloudflare R2的定价，需要注意的是，10 GB/月指的是10GB的固定免费空间，不随月份累加，也就是说，你永远只有10GB的空间，超出即收费。（但计费也是挺良心的，当前这篇文章节点，我写了9篇博文，平均篇幅4570字，附件不算少，R2空间用了160MB，算下来，免费空间够写562篇长文了。）

• 注册登录Cloudflare后，绑定信用卡，点击左侧边栏的R2 对象存储访问服务；
• 点击创建存储桶，自定义键入存储桶名称，位置可根据需求自行选择，我选的是亚太地区，其它设置默认即可；
• 完成创建后，我们就可以向存储桶上传文件了，可以选择在网页直接上传文件或文件夹；
• 打开设置，设置R2.dev 子域为允许访问，完成后会显示一个以r2.dev结尾的网址，即附件的网址；
• 我们可以通过自定义域来绑定我们的专属域名，点击连接域，输入自己的域名，如img.osnsyc.top，点击继续以完成设置。

至此，一个Hugo就部署完成了，花费最低可至0元，即便使用自己的域名，年花费也不过几十元。

个性化配置 #

本章节是简单的功能添置，非必须配置。

Google Analytics 流量分析 #

Cloudflare提供了简单的流量分析，点击Page页面右上角的Web Analytics即可访问。我们还可以用Google Analytics实现更细粒度的流量分析。

• Google Analytics ，创建媒体资源，输入博客网址，仅创建媒体资源；
• 在 媒体资源 -> 跟踪信息 -> 跟踪代码 下查看 跟踪ID/tracking id；
• 在hugo.toml中添加googleAnalytics = "UA-123-45", 用自己的tracking id替代"UA-123-45"；
• 在本地打开hugo server时, 访问数据也会被抓取。在调试时禁用，就加一个判断条件即可，如下：

<!-- /themes/hugo-book/layouts/partials/docs/html-head.html -->
{{ if eq hugo.Environment "production" }}
  {{- template "_internal/google_analytics.html" . -}}
{{ end }}

# 调试模式,不添加--environment dev则默认为production
hugo --environment dev

Twikoo 评论系统 #

评论系统我是用的是Twikoo，对评论者友好，无需注册，无需三方授权登录，可自托管，官方的文档²已经很详细，不想赘述了。我不想注册太多平台的账号，好在Cloudflare能一把梭哈，参考twikoojs/twikoo-cloudflare。与 Vercel/Netlify + MongoDB 等其他部署相比，它冷启动延迟低（ 6s -> <0.5s ）。但 Cloudflare Worker 仅部分兼容Node.js，因此由于兼容性问题，Twikoo Cloudflare 部署存在一定的功能限制，比较关键的是，图片上传无法正常进行。这是因为该功能依赖于本地文件系统，而 Cloudflare Worker 不支持此功能。

• 在本地：

git clone https://github.com/twikoojs/twikoo-cloudflare.git
# Install npm packages
npm install
# manually delete some packages to keep the bundle within the limit
echo "" > node_modules/jsdom/lib/api.js
echo "" > node_modules/tencentcloud-sdk-nodejs/tencentcloud/index.js
echo "" > node_modules/nodemailer/lib/nodemailer.js
# Login to your Cloudflare account
npx wrangler login
# Create the Cloudflare D1 database and set up the schema
npx wrangler d1 create twikoo
# Copy 2 lines of `database_name` and `database_id` from the output of the previous step, and paste them into `wrangler.toml` file, replacing the original values
# Set up the Cloudflare D1 schema
npx wrangler d1 execute twikoo --remote --file=./schema.sql
# Deploy the Cloudflare worker
npx wrangler deploy --minify

• 上述命令最后输出了envId；
• 修改/themes/hugo-book/layouts/partials/docs/comments.html文件：

<!-- This partial can be replaced to support other commenting engines -->
<div class="book-tabs-content markdown-inner">
    <div id="tcomment"></div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.min.js"></script>
        <script>
            twikoo.init({
            envId: 'https://comments.osnsyc.top', <!-- 修改该行成自己的envId -->
            el: '#tcomment',
            lang: 'zh-CN',
            })
        </script>
    </div>
</div>

• 配置hugo.toml

[params]
    BookComments = true

• 所有页面底部的留言板默认开启，除非在.md文件的Front Matter中设置BookComments: False；

在任意一个留言板中，点击小齿轮图标，初始化密码后即可开始配置：

• 配置管理->通用->GRAVATAR_CDN可以选择gravatar.com(或其他任意)，评论系统将会根据评论者的邮箱自动读取gravatar.com的头像；
• 配置管理->通用->DEFAULT_GRAVATAR选择默认的头像，完整解释如下³：

1. 404: do not load any image if none is associated with the email hash, instead return an HTTP 404 (File Not Found) response
2. mp: (mystery-person) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)
3. identicon: a geometric pattern based on an email hash
4. monsterid: a generated ‘monster’ with different colors, faces, etc
5. wavatar: generated faces with differing features and backgrounds
6. retro: awesome generated, 8-bit arcade-style pixelated faces
7. robohash: a generated robot with different colors, faces, etc
8. blank: a transparent PNG image (border added to HTML below for demonstration purposes)

总结 #

这一篇Hugo博客建设小记就写到这儿吧，我们已经快速拥有一个博客小站了，当然，还很粗糙。在此之前，我已经更新了一篇装修小记了，记录了一些Book主题的简单美化方法，请移步：