基于Hugo搭建Blog + 托管至Vercel + 绑定域名

前言

本文是一篇关于使用hugo搭建blog的文章，并最终托管至vercel且配置了自己的域名，本章节主要谈一谈我为什么要使用本文的这种方式进行搭建

为什么使用hugo

搭建独立的blog有很多最佳实践方式，例如

基于成熟的blog平台：知乎，博客园，CSDN等
基于Notion，wolai等笔记工具进行公开分享或者是基于开发的api做的一些blog，例如NotionNext等
自己部署的静态blog，例如hugo，hexo等
还有一些其他的比较过时的不再提

本文使用的就是上述的hugo，这种方式相较于其他方法的优点（结合自己的需求出发）

计划做多平台的发布，内容要掌握在自己手里，所以除了自己搭建的blog，还可能会在知乎，公众号等平台发布，所以需要通过纯Markdown形式来书写blog，这就排除了成熟的blog平台和notion这两种便捷的方式
hugo相较于hexo，速度更快，使用的人更多，虽然hexo的插件比较多，但是我的目标是要确保极简，以阅读体验为第一目标，所以不是很在乎插件的特效

为什么使用vercel托管

大部分的教程都是将hugo或者hexo这样的静态blog通过github.io进行托管，但受限于国内的网络影响，blog内容不太容易被检索和访问到，而通过vercel托管可以使用他们的全球cdn加速、域名绑定等服务，并且对于小访问量而言都是免费的

综上我选择这种方式，下面将介绍一下如何做，以及注意事项

1. 本地部署hugo

在本地部署hugo，完成blog的大部分设置以及文章的预览效果

安装

在linux上建议通过snap安装，其他系统根据参考文档中方法自行选择安装方式，安装完成后确定好版本号（后面部署时候需要确保版本号一致）
```
sudo snap install hugo
hugo version
```
blog工程初始化(下面以opencubed-blog名称为例子)
```
cd ~
hugo new site opencubed-blog
```

安装主题（这里选择的是PaperMod），更多主题可以从上面的官方推荐主题链接中寻找

cd opencubed-blog
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

配置blog的基本信息，编辑 hugo.toml 或者是 config.toml （取决于hugo版本）

baseURL = 'https://opencubed.club/'
languageCode = 'en-us'
title = "Open³ Blog"
theme = "PaperMod"

[params]
  ShowReadingTime = true
  defaultTheme = "auto"

创建一篇文章
```
hugo new posts/hello-world.md
```
编辑 content/posts/hello-world.md，添加内容后，将 draft: true 改成 false 才能显示
本地预览
```
hugo server -D
```
访问：http://localhost:1313

2. 上传至github

上传至github的好处是方便做版本管理、多设备编辑、vercel导入

云端新建仓库：在自己的github中新建同名private的空仓库
.gitignore配置，因为在hugo中有很多中间的资源文件在构建的时候会自动生成，不需要关心，下面是.gitignore中需要忽略的内容
```
public/
resources/
.hugo_build.lock
```

推送至云端（注意：下面仓库地址换成自己的）

git add .
git commit -m "Initial Hugo blog"
git remote add origin origin git@github.com:xxx/opencubed-blog.git
git push -u origin main

3. 托管至vercel

登录 https://vercel.com/ : 可以使用github登录并授权，即可在vercel中直接使用自己github中的仓库
点击 “Add New Project”
选择你的 GitHub 仓库（例如opencubed-blog）
设置：
- Framework: 选择 Other
- Build Command: hugo
- Output Directory: public（可为空）
- Install Command: npm install（可为空）
- Environment Variable:
```
HUGO_VERSION=v0.147.0  # 用你本地使用的 Hugo 版本
```
点击 Deploy

4. (可选) 配置自定义域名

我的顶级域名是 opencubed.club , 我计划使用该域名作为blog的首页，因为这样我就不需要再做一个首页，并且对于 SEO 友好，而不是 blog.opencubed.club

Vercel 中添加自定义域名

vercel 中选择 opencubed 项目
设置 → Domains → 添加自定义域名
输入 opencubed.club
verce会提供两个 DNS 记录，分别是 A 记录和 CNAME 记录，两者的用途
1. A记录用于顶级域名的 DNS 解析，即 opencubed.club
2. CNAME 记录用于子域名解析，例如 <www.opencubed.club>

DNS服务商添加域名解析

在自己的域名服务商，例如 DNSPod ，找到自己的域名，选择添加记录
根据页面的指导，分别添加 A 记录和 CNAME 记录，注意：
1. A 记录类型，记录值是一个固定的IP, vercel 页面有提供
2. CNAME 记录类型，记录值是一个类似于域名，但需要注意的是，最后有一个.

5. 更换电脑后编辑blog

需要确保hugo环境一致和仓库能正确pull即可

安装与之前版本一致的hugo
clone 仓库
```
git clone --recurse-submodules https://github.com/yourusername/opencubed-blog.git
```
⚠️ 一定要加 --recurse-submodules，这样会把主题一起克隆下来
如果忘记了，可以手动执行：
```
git submodule update --init --recursive
```

6. 图床配置

为了能在多平台发布，还是需要使用图床，并且需要兼顾稳定性，价格，速度，个人觉得目前最佳实践就是下面的参考中的方案：Cloudflare R2 + PicGo + (WebP Cloud)，优点有几点

免费额度几乎完全够用
阿里云OSS还需要备案

最后

访问 https://www.opencubed.club/ ，出现入正确内容，表示部署完成

基于Hugo搭建Blog + 托管至Vercel + 绑定域名

前言

为什么使用hugo

为什么使用vercel托管

1. 本地部署hugo

相关参考

安装

2. 上传至github

3. 托管至vercel

4. (可选) 配置自定义域名

Vercel 中添加自定义域名

DNS服务商添加域名解析

5. 更换电脑后编辑blog

6. 图床配置

相关参考

最后

前言#

为什么使用hugo#

为什么使用vercel托管#

1. 本地部署hugo#

相关参考#

安装#

2. 上传至github#

3. 托管至vercel#

4. (可选) 配置自定义域名#

Vercel 中添加自定义域名#

DNS服务商添加域名解析#

5. 更换电脑后编辑blog#

6. 图床配置#

相关参考#

最后#

前言

为什么使用hugo

为什么使用vercel托管

1. 本地部署hugo

相关参考

安装

2. 上传至github

3. 托管至vercel

4. (可选) 配置自定义域名

Vercel 中添加自定义域名

DNS服务商添加域名解析

5. 更换电脑后编辑blog

6. 图床配置

相关参考

最后