网站更新指南：重建一个 Hugo 网站的全流程（保姆级干货）

快速上线你的专属网站！一篇详细的 Hugo 个人博客网站搭建攻略！

Carrie
2025年5月24日
2 min read

网站更新指南：重建一个 Hugo 网站的全流程（保姆级干货） — 新版科技迷妹网站

当一个网站上线后，网站的改版和更新成为每一位站长的必修课。无论是优化用户体验、提升性能，还是添加新功能、修改 bug，定期对网站进行更新都是保持竞争力的关键所在。

在我的网站第一个版本上线后，模板里有些小功能加载时总出现问题，以我现有的技术水平又无法解决。加上多看一阵子后，觉得整个版面不够简洁美观。于是准备换一套模板，就是给我的网站换一套皮肤。

本文围绕 Hugo 网站上线后换模板的方法，记录并分享其整个过程。

网站改版的两种方法

在网站改版的过程中，选择合适的方法至关重要。

如果现有网站结构和功能基本满足要求，仅需小幅调整或优化，则可以直接在原有模板上修改代码。
如果现有网站结构和新的需求差距较大，不如直接新建一个项目，重新搭建整个网页。

也就是说，网站改版可以分为两种方法：

方法一：在原有网站模板上直接修改代码
方法二：重新部署一个新的 Hugo 项目

由于我的网站已经上线了，想改动的地方比较多，从网站功能到页面布局，都有想要调整的地方。而每次修改都要十分注意细节，以免操作失误引起页面 bug。

思虑再三，我觉得一点一点修改，不如直接换一套新的模板、更接近我需求的模板。于是我是直接放弃的原来的项目代码，换了一套新的模板。

以下主要记录和分享第二种方法的过程。

这和初次建立网站的流程几乎一样，我还是使用的 Hugo+GitHub+Vercel 建站，这次相当于复习建站的流程了。

新建 Hugo 项目

在这次重新建立 Hugo 项目时，我不禁想到，以后要是代码维护起来变得困难了，修改 bug 很繁琐了，或者需要给网站来个大规模改版升级时，我都可以如此操作，毕竟用 Hugo 搭建静态网站是非常灵活便捷的。

缝缝补补改衣服，不如咱直接换一件新衣服，是不是？

1.创建新的 Hugo 项目

为了区分之前的项目“aitechgirl”，这次新建项目我命名为“aitechgirlnew”。
在终端运行以下命令创建一个新的 Hugo 项目：

hugo new site aitechgirlnew

我用的是 iTerm，从截图命令行其实也显示出 Hugo 项目建立的 5 个过程，并不难，再一起梳理一下：

创建 Hugo 项目
选择主题
编辑主题设定
创建新文章
本地预览

hugo 项目代码

2.选择主题

从 Hugo Themes 重新选择一个主题并安装，这次我选择了主题 pehtheme：

$ git clone https://github.com/fauzanmy/pehtheme-hugo.git

克隆这个主题到项目文件夹后，在新建的项目文件的 themes 会出现这个模板文件：
Hugo 项目文件夹

3.编辑主题设定

在新建的 Hugo 项目中，默认会带一个空白的 hugo.toml 文件，这是用来定义这个项目的设置文件，可以在其中添加自己需要的主题配置。

这时要记得把主题改成模板的名字：

theme = "theme-pehtheme"

另外，要参考模板里hugo.toml设置的内容，对应修改成自己网站的内容。
此时的 baseURL 要链接到本地，可以实时查看网站修改后的样子。
baseURL = “http://localhost:1313/” 是 Hugo 通用的本地查看链接。

hugo 主题配置

4.添加内容

在新项目中，添加一个 Markdown 文件，撰写你的文章内容。
使用命令生成新的文章：

hugo new posts/my-first-post.md

如果之前网站有发布过文章，可以直接将 content 复制到新项目中合并。
不过也要注意两个模板 content 结构是否一致，比如多语言的 content 文件夹里有语言分类，如我的分类是/en/和/zh/，这要根据新模板的结构来确定文章位置。

5.本地预览

以上设置完成后，可以运行 Hugo 内置服务器查看效果，输入命令：

hugo server

这样就可以在本地预览到网页效果了。

科技迷妹网站本地预览

新建 GitHub 仓库并托管代码

无论是直接修改代码还是重新部署 Hugo 项目，代码管理都是关键环节。
以下是新建 GitHub 仓库的步骤：

1.创建 GitHub 仓库

Github 个人主页

创建新的仓库，填写仓库名称，我的新项目名称就是“aitechgirlnew”。
可以现在添加项目描述也可以之后再补充，然后完成创建。

Github 新建仓库

2.上传代码到 GitHub

将我的本地项目推送到 GitHub 仓库：

git init
git remote add origin https://github.com/Carrie1895/aitechgirlnew.git
git branch -M main
git push -u origin main

这样就将新项目的代码托管到新的 GitHub 仓库了。

新建 Vercel 项目并绑定域名

Vercel 是一个强大的静态网站托管平台，支持 Hugo 等静态网站生成器。
新的 Hugo 项目生成了新代码，要用新的 GitHub 仓库托管，也要建立新的 Vercel 项目来部署网页。

以下是新建 Vercel 项目的步骤：

1.创建 Vercel 项目

登录 Vercel 官网。
点击 New Project，选择之前创建的 GitHub 仓库。
按提示完成配置，点击 Deploy。

新建 Vercel 项目

2.检查临时域名网页效果

在完成以上步骤，Vercel 部署完成后，其实已经生成了临时域名 “https://aitechgirnew.vercel.app/"，此时可以点击打开，检查网页是否如本地部署的效果一致。如果一切正常，那就可以直接绑定域名上线了。

而我的网站在此环节，就出现了如缩略图那样的无法打开的效果，打开是一堆代码页面。

Vercel 项目主页

这不是我第一次出现这个问题了，第一次网站上线也是这种情况。似乎是一些 Hugo 模板长久没有更新，出现了一些不兼容。

此时需要在项目的设置里，修改部署环境，设置 Hugo 版本。当然具体要看你的模板要求和不兼容问题是什么。

我的修改如下：

Name：HUGO_VERSION
Value：0.135.0

Vercel 部署环境

修改完成后，临时域名 https://aitechgirnew.vercel.app/ 可以打开访问，一切正常了。

3.绑定域名上线

当临时域名的网页正常后，就可以将自己的域名绑定到新仓库上了。

进入 Vercel 新项目设置，找到 Domains 选项
添加自己的域名

完成绑定后，访问域名测试网站是否正常加载，指向新的页面。

Vercel 域名设置

如果是第一次上线绑定域名，还需要到域名服务提供商处修改 DNS 配置，将域名解析指向 Vercel 提供的服务器地址。但整体流程是一致的。

感受

网站更新和改版是一个系统的工程，无论是直接修改代码，还是重新部署一个新的项目，都需要仔细对待。代码是一串逻辑严谨的语言，稍有错误都会无法呈现想要的效果。

经过第一次操作后，第二次改版我觉得还是顺手很多。整个过程并不难，操作几次就掌握了，Hugo 对于新手建站还是很友好的。

不过我的命名方式有点傻，应该没有人像我一样用“new”“again”这样去表达改版吧。想到一些软件改版会用“1.0”“2.0”这样数字顺序来记录版本号，我后续也会参考这种命名方式。

好的，希望我的分享对新手搭建个人博客网站有所帮助吧。