本文分享我使用 Hugo 和 Vercel 搭建博客的过程。

1. 方案确定

为了找到合适的搭建方案，我参考了v2ex上的一个帖子。这里有很多方案，并且也有一些朋友们的成果展示。经过比较后，我决定使用 Hugo 来搭建博客，并通过 Vercel 进行部署。
Hugo是一个静态网站生成器，搭建速度快，且支持自定义主题，对于我这种非前端来说，非常友好。
Vercel是一个云平台，它可以与github项目关联，支持一键部署网站，每次更改都能即时预览。

2. 方案实施

2.1 用 Hugo 搭建一个网站

2.1.1 安装 Hugo

首先进行 Hugo 的安装：

1brew install hugo

其他系统可以到Hugo 官网查看。
可以通过以下命令来检查版本：

1hugo version

2.1.2 创建新站点

使用 Hugo 创建一个新的站点：

1hugo new site my-blog

这里会创建一个名为 my-blog 的目录，里面包含了一些默认的文件和目录结构。

2.1.3 选择并安装主题

Hugo有很多可选主题，可以在Hugo Themes 网站上查看，选一个自己喜欢的就好了，然后可以按照主题的安装说明进行操作，放置在themes目录下。

2.1.4 配置主题

安装好主题后，需要进行一些配置，比如修改 config.toml 文件，这里设置了博客的信息以及一些运行所需要的参数。

2.1.5 添加内容

Hugo的内容文件存放在content目录下，比如文章、页面等。文章可以使用markdown格式来写。

2.1.6 本地调试

可以使用以下命令本地进行调试：

1hugo server -D

可在http://localhost:1313/看到效果。

2.2 使用 Vercel 部署网站

vercel会默认提供域名，如果想要自己的域名，可以在阿里云、腾讯云、namecheap、godaddy等网站购买。

2.2.1 注册 Vercel 账号

如果还没有 Vercel 账号，可以到Vercel 官网注册一个。

2.2.2 上传 GitHub 仓库

将上面本地的网站项目上传到github上。

2.2.3 创建vercel新项目

在 Vercel 中创建一个新项目，并关联到 GitHub 仓库，这样后面github更新，vercel会自动进行部署。

2.2.4 在hugo中配置vercel.json

在hugo的config.toml同级目录下，创建vercel.json文件，配置hugo版本、构建命令等信息，使得 Vercel 可以正确部署hugo项目。内容示例：

1{
2"build": {
3   "env": {
4      "HUGO_VERSION": "0.1.1"
5   }
6},
7"buildCommand": "hugo --gc --minify",
8"outputDirectory": "public"
9}

2.2.5 部署网站

在 Vercel 页面中点击“Deploy”按钮，Vercel 会自动部署网站。部署完成后，就可以通过 Vercel 提供的域名访问你的博客。

2.2.6 配置域名

如果想要使用自己的域名，可以在 Vercel 中添加域名，并在域名供应商处进行相应的 DNS 配置。

以 Namecheap 为例： 在 Namecheap 的域名管理面板中，找到高级 DNS 设置。

设置 CNAME 和 A 记录以指向 Vercel 提供的地址。
CNAME: 例如将 www 指向 Vercel，这里可以设置为cname-china.vercel-dns.com，这样国内也可以快速访问。
A 记录: 将根域名指向 Vercel 的 IP 地址。
然后保存，等待生效。

个人博客搭建
在Vercel中设置preview环境
Add Google Analytics To Blog
How To Set Up Google Search Console