如标题所言，本文的目的是分享此网站从创建到部署的流程中所使用的技术以及解决方案，为有同样意愿的朋友提供一条简单直观的复现路径。同时，本文也是对自己所学习但没怎么搞懂的技术的二次审视，方便对自己的工作流进行优化。我本人并非来自于计算机科学专业，但在高中和大学的学习中或多或少的有接触到一些编程的基础。所以如果我可以做到，那任何人应该都可以做到。

搭建个人网站所要实现的技术难度并不高。如果是以成功部署为目的，那么你并不需要完全理解每一个步骤背后的原理是什么，但中途遇到的报错会需要你了解编程语言所做的事情是什么，从而找到问题的根源。

在遇到困难时，我建议善用语言模型来为你提供实时的帮助，它们所拥有的知识可帮助解决许多问题。当然，提问的方式以及判断回答是否可靠的技能也同样重要。这一点，我们会在未来的另一篇文章中一起探讨。

开发平台与工具

我使用运行在MacOS上的VS Code进行代码的编写，所以这里会分享的代码都是能运行在MacOS的Terminal中的。如果你使用的是其它的平台（如Windows）那么少部分代码也许需要修改成你的平台所兼容的语法。

我的个人网站本质上是整合了现有的解决方案并把它们拼凑在一起。能够实现的核心技术是hugo和其平台中的主题PaperMod，并最终用Github和Vercel进行部署。

网站的搭建过程中，我有让Google的语言模型Gemini 2.5来帮助我进行网站的构造。最终遇到的技术问题，也使用了OpenAI的ChatGPT帮助我进行了排错。如果没有它们的帮助，我想这个过程会艰难很多很多吧。

构建个人网站

首先，你需要在Terminal中记录你的Github所关联用户名与邮箱，这样未来就可以把本地写好的内容push到云端以准备部署。

git config --global user.name “你的用户名“
git config --global user.email "your_email@example.com"

接下来需要做的，是安装Hugo。你可以选择进入官网跟着官方的引导一起做，也可以选择在MacOS的Terminal中实现的方式。这里我会介绍第二种方式。

在确保你的环境中存在Homebrew后，请在Terminal中输入：

brew install hugo

Hugo安装完成后，你需要在设备上建立一个网站的项目。同样输入下列代码：

hugo new site my-blog #这里Hugo会建立的文件夹名为“my-blog”
cd my-blog #进入文件夹

此时文件夹也会在你的计算机的本地被创建。在MacOS里，默认的创建位置是用户文件夹下。

Hugo 本身只负责生成内容，外观则由主题决定。你可以在 Hugo Themes 官网上寻找喜欢的主题。这里以我的网站也同样使用的PaperMod为例：

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive

在配置文件 hugo.toml中，可以启用这个主题：

baseURL = "https://<你的网址>.io/" #先不管这个
languageCode = "zh-cn"
title = "我的博客"
theme = "PaperMod" # 告诉 Hugo 使用这个主题
buildFuture = true #允许markdown创建日期在未来，可以避免一些报错的排查

接下来，就可以使用Hugo去写第一篇文章了。

hugo new content posts/my-first-post.md

在文件夹中，你新建的Markdown文章会被储存在content/post中。点开文件（使用任何markdown编辑器都可以），你会看到类似这样的内容：

正文的内容需要在第二个 “+++“后编辑，Markdown语法会被自动识别。

+++
date = '2025-10-12T13:35:52-04:00'
draft = true
title = 'My First Post'
+++

first blog?

做完这一切后，我们可以对网站进行一个本地的预览。确保你当前的terminal中，你所在的文件夹是my-blog。

hugo server

然后打开浏览器，访问 http://localhost:1313/。

这时你只会看到一个空白的网页，而原因是创建markdown文件时draft默认状态是true，你需要手动将它改成：

draft = false

你的文章才会出现。当然，你在本地对 .md 文件做的任何修改，保存后浏览器都会自动刷新。如果一切顺利，你的网页应该会类似下图。如果你将鼠标悬浮到你的第一篇文章上，你会发现下图中蓝色箭头里指向的内容是你的本地host而非互联网上的网页。这个问题我们会在后续解决，所以不用担心。

接下来会用到VS Code。如果你安装了Shell命令，则可在terminal里使用下列的内容快速初始化VS Code环境。如果没有，也可以手动到VS Code中打开文件夹。

cd ~/my-blog
code .

接下来，在Github进行repository的创建：

创建成功后你会看到如下的界面：

回到Terminal中，输入下列的代码去保存当前的更改。

git add .
git commit -m "saved"

第二步，执行“…or push an existing repository from the command line”下的内容，类似下列代码。

git remote add origin https://github.com/yourcontent/example.git
git branch -M main
git push -u origin main

# 上面这些只是一个例子，你需要复制粘贴的应该是来自你自己的Github上所对应位置的代码。

一切顺利的话，再次打开你的repository，你会发现你的本地内容被全部推送到了云端。类似下图这样：

接下来，使用Vercel 部署网站。首先需要关联你的Github账号。

之后授权 Vercel 访问 GitHub。GitHub 会问你：“你想让 Vercel 访问哪些仓库？”。请选择 All repositories (所有仓库)。这是最简单方便的选项。点击 Save 或 Authorize (授权) 按钮。授权成功后，GitHub 会自动把你送回到 Vercel 的页面。你回到 Vercel 之后，在 blog 仓库旁边点Import；在下一个页面直接点击 Deploy。

这时，还有一些问题会需要解决。

首先，你需要在Vercel里关闭这个选项让blog对所有人可见。

然后，你需要对Environmental Variable与Build and Development中的一些内容做出更改。注意：以下的页面都是在你具体的部署工程中的Setting中，而不是你的主页的所有工程视角的那个Setting里。如果你没有在对应的位置找到设置，那么应该就是你访问Setting的位置不对。

首先去Environment Variable里，添加两个东西：

HUGO_ENV production
HUGO_VERSION 0.151.0

上图中Hugo Version是我目前安装的版本，如果你的版本并非0.151.0，那么请替换成你的版本号。

接下来到Build and Development页面中。首先将Framework Preset换成Hugo，如下图所示。

接下来，开启第一个和第二个Override。第一个里填写 hugo–gc；第二个里填写public。

最后，回到你的toml文件中。将baseURL用下图位置的新链接替换掉。

baseURL = "https://<你的网址>.io/" #把这行的网址替换成你的Vercel为你创建的网址。

这之后，再次回到Terminal使用命令：

git add .
git commit -m "update"
git push

你的网页在这之后，就能够顺利发布在互联网上并成功被访问了。

希望这篇文章有帮助到你！祝你也能顺利搭建和部署自己的个人网站！