在我个人常用的Windows11环境下，我习惯于尽可能地使用微软官方提供的包管理器 winget 来安装开源软件：

打开PowerShell并输入：
winget install Hugo.Hugo.Extended Git.Git
静待安装完成。
（当然，也可以使用cmd来进行上述及后续步骤）

这一步根据网络情况耗时不定，如果觉得 winget 太慢当然也可以根据Hugo官方文档：prebuild的内容下载压缩包并配置系统环境变量。（个人不喜欢这种不便于管理的方式）

安装完成后，在PowerShell中输入
hugo version
若显示类似如下字段，则说明Hugo安装成功。

hugo v0.117.0-b2f0696cad918fb61420a6aff173eb36662b406e+extended windows/amd64 BuildDate=2023-08-07T12:49:48Z VendorInfo=gohugoio

同样方式验证Git的安装
git version
显示类似如下字段，则说明Git安装成功。

git version 2.38.1.windows.1

使用资源管理器创建好用来存放网站的 Mysite 文件夹后，进入该文件夹并在空白处右键选择 Open in Terminal / 在终端中打开 。
（当然你也可以直接在cmd或powershell中使用 cd 指令索引到这个文件夹内）

PS C:\Users\NicEu\OneDrive\Documents\_00PersonalDocuments\Mysite>

根据Hugo官方文档：create a site的指示输入下面的指令来为网站创建所需文件
（注意Limewolf.top是我的网站命名，请为你的网站取名并改成你自己的）
hugo new site Limewolf.top

进入网站所在文件夹
cd Limewolf.top
目前终端显示的路径大致为：

PS C:\Users\NicEu\OneDrive\Documents\_00PersonalDocuments\Mysite\limewolf.top>

注意：我选用了Monochrome作为我的网站主题，这与Hugo在官方文档中使用的主题不同。

1. 在网站文件夹下初始化git项目（git是一个分布式版本管理工具）
   git init
2. 将主题文件包作为submodule下载并添加到网站所属的git项目下
   git submodule add https://github.com/kaiiiz/hugo-theme-monochrome.git themes/hugo-theme-monochrome
3. 修改网站配置文件使其使用刚下载的主题
   echo "theme = 'hugo-theme-monochrome'" >> hugo.toml

直接以本地服务器的方式运行网站：（此模式下网站会随着内容改动实时更新）
hugo server

或者，将网站打包发布在其文件夹下的 /public 中，以便后续部署到线上：
hugo

这一步骤就很自由了，跟着Hugo官方文档：add content的步骤，可以使用包含标题和日期属性的默认模板来创建文章：
hugo new content posts/my-first-post.md

此外，当然也可以完全手动创建，但需要对模板文件里的预设属性有一定的了解。

例如，本篇文章的属性就包括:

#+title: Hugo+Vercel建立个人博客
#+author: "Limewolf"
#+description: "个人如何使用Hugo+Vercel从0建站的参考"
#+date: 2023-08-26T02:56:54+08:00
#+keywords[]: hugo vercel github
#+tags[]: hugo vercel blog
#+categories[]: 博客技术
#+series[]: Hugo历险记 探索Vercel

它们有些用于分类筛选文章，有些便于搜索引擎发现这篇文章。

当然，属性的功能远不止于此，Hugo官方文档：all setting对此有很详细的说明。

这一步骤非常个性化且近乎可以无限探索，在此就不展开篇章叙述。
关于本站在这一环节的历程，可以在[建站日志]​栏目阅览。

前文中我们已经在网站文件夹内创建了Git项目，接下来只需要在github中创建仓库并将本地git项目关联至github仓库即可。

⚠️注意：首次使用Git的朋友可能还需要对git进行最基本的配置，可参考Github doc: 设置git完成如下两个步骤：

1. 配置git用户名和邮箱；
2. 配置https或ssh身份认证。

延申阅读：Github doc: 关于git，git常用指令表

注册并登录Github后，跟随Github doc: 创建存储库的指引即可快速创建一个仓库。其中：

• Repository name: 这是你的仓库名，我命名为了 Limewolf.top
• Description: 可填可不填，对仓库进行简要描述

• 仓库可见性我选择的是 Public ，理由为：

  1. 本站所使用的所有技术都是开源的，如果未来我对其中的技术进行了个性化更改， 我希望这些新技术/个性化配置也是开源的；
  2. 我放在网站中的内容都是愿意公开展示的。
• .gitignore: 在Git项目的文件夹中，并不是所有文件都需要参与到Git项目当中， 所以就有了gitignore这样的黑名单机制将名单内的文件剔除git项目。
  我选择了 None ，这是因为我需要一个全新的空仓库。同时我在本地配置了该文件，后续会一并上传到github仓库中。
  根据个人需求的不同，该文件的配置有很多模板可以参考。这里我放上本站的 .gitignore 文件链接（修改自 themes\hugo-theme-monochrome\exampleSite\.gitignore ）：Github，Onedrive
• README file: “仓库说明书”，为了创建空仓库而不勾选，我将在本地手动创建

• License: 开源许可，为了创建空仓库而不勾选。
  这需要根据网站内容及其代码的性质来决定，在众多开源协议中，具体怎么选可以参考这里或者搜索引擎。
  我为本站选择的是 CC-BY-NC-SA 4.0 协议(Creative Commons)，理由是：

  1. 本站所使用的所有技术都是开源的，如果未来我对其中的技术进行了个性化更改， 我希望这些新技术/个性化配置也是开源的；
  2. 我默认允许在注明来源且非商用的情况下，对本站内已公开的我个人产出的文章、作品、图片等进行转载、再创作， 并希望其衍生品也采用相同的协议；

  关于如何选择CC协议版本、如何使用CC协议及CC协议的详细信息 可通过相应链接了解更多，关于它的中文讲解，这篇b站文章和这篇知乎文章可以作为参考

在网站本地的git项目根目录下根据需要配置好 README.md 、 .gitignore 、 license.txt 文件，在当前目录下打开PowerShell，使用
git status
来查看已修改但未保存至git中的文件。使用
git add .
来将当前文件夹下所有已修改未保存至git的文件标记。使用
git commit -m 'first commit'
来将上述文件的更改保存进git，并以 'first commit' 来批注。

最后，在github中进入到新建的仓库中，根据提示，在PowerShell中依次键入

git remote add origin git@github.com:<Your-github-id>/<Your-repo>.git
git branch -M master
git push -u origin master

一切顺利的话，在命令行提示push完毕后，刷新github仓库的页面，就可以看到刚上传的网站源文件了。

  git add
  git commit
  git push

每次网站需要更新时，只需依次执行“标注要保存修改的文件”、“保存修改”、“上传修改”这三个步骤即可。

很显然，在上述方式中，我将网站的所有源代码都上传到了git仓库。

之所以上传源代码，理由如下：

1. 多端创作：我希望交由平台来生成网站，这样即便我当前所使用的设备（比如手机、平板等）没有运行网站所需的环境， 我也可以专注于内容创作，将编辑完成的内容通过git或者网页上传至github，即可完成网页的更新。
2. 备份与版本管理：一个仓库同时为网站的配置文件和内容做版本管理和备份

当然，每个人的需求不同，除了本站使用的方法，还可以选择只上传由hugo生成在网站目录下 /public 中的文件。
这样做或许代码和api隐私性更强、仓库更精简。

又或者，把上述两种方案结合起来，一个仓库存放配置文件，另一个仓库存放网页…..

总之，根据自己的需求来选择。相对应的方案都能在网络上找到公开资料。

注册并登录Vercel，参考vercel doc: overview和vercel doc: deploying git创建vercel项目，登录github账户并导入网站源代码仓库。

1. 将 Configure Project -> Framework Preset 的参数改为 Hugo
2. 在 Configure Project -> Environment Variables 中添加键值对: key: HUGO_VERSION, Value: 0.117.0
   具体版本号以自己安装的Hugo版本为准。
3. （这一项是Monochrome主题中提供的命令）
   勾选 Configure Project -> Build Command: 后的 Override ，将本项参数改为 hugo --environment production --minify
4. （这一项是Monochrome主题中提供的命令）
   勾选 Configure Project -> Development Command: 后的 Override ，将本项参数改为 hugo server --environment production
5. 按下 Deploy ，泡杯咖啡，稍作等候即可