AI 助力 0 基础建站：用时 3 天成本 20 元，我的网站上线了

最近很流行 Vibe Coding，对于没有编程基础知识的人，是不是通过 AI 工具协助，就能做出一些简单的项目？
出于记录生活、分享兴趣的想法，我决定先尝试搭建一个个人网站。
让我惊喜的是，在 AI 工具的帮助下，我仅用 3 天时间，花费了 20 元，就让我的网站成功上线了！
这篇文章将详细记录我的建站过程，分享如何从零基础起步，借助 AI 工具快速实现目标。
无论你是想创建博客、展示作品，还是单纯想学点新技能，我希望我的经历能给你一些启发。

一、网站成果

先来说一说最终成果，我的网站目前已经上线了。

我使用的是 Hugo+GitHub+Vercel+Cloudflare 的建站方案，各项工具都使用的免费套餐，只有买域名花了大约 20 元。
整个建站过程通过 AI 协助，我用自然语言向 Grok 提出诉求，然后它回答我解决方案，并提供代码，一切都在 Grok 的指导下成功上线。

（这是刚上线的网站 beta 版，内容和功能都还不完整）

建站的难点在于技术和成本，AI 的出现让这一切变得简单。
充分使用 AI 工具，不仅能帮我们快速了解基础知识、创建代码，还能给我们推荐了适合新手的工具和方案。
但 AI 只是工具，真正要产出成果，还是需要自己去学习、学会并使用它。

Q：零基础能不能通过 AI 学会搭建网站？
A：我的经历告诉你：能！
Q：难不难？
A：对有的人来说很简单，对有的人来说还是很难。
Q：……解释一下……
A：AI 确实能提供建站方案、流程步骤、甚至提供代码。但对零基础的人来说，拿着这些代码也不知道是什么意思。比如第一次看到 AI 教我创建 hugo 网站时，我不知道“终端”是什么，要在哪里输入这些命令。我也不明白输入的“mkdir~”和“cd~”是什么意思。对于零基础的人是真的不懂代码语言的含义。所以对零基础的人来说，除了学习“How”，还要学习“What”，还要补充学习“Why”。

当然这一切在 AI 的帮助下，都是可以快速学习并掌握的。
所以只要你想做想学，都不是难事了。

二、建站第一天：搜集资料，制定方案

这第一天就是“打基础”的阶段。
我的目标是搞清楚建立网站的流程，需要使用哪些工具，以及建站必需的成本。
没有任何编程经验的我，完全把 AI 当成我的“编程导师”。

明确建站目标

我希望建立一个博客网站，分享我觉得有意思的科技产品，也希望未来有机会能将它产品化，实现我的“one person business”的愿望。
同时，我需要网站有中英文双语版，希望用输出倒逼我输入，让我有持续学习和练习英语的机会。 这个网站要是简洁的、响应式的，电脑和手机都能正常显示的。
网站建立初期，要以尽量低的预算完成它。

AI 搜集资料

我使用的 AI 工具是 Grok，我先查询了建站的基础流程和基本知识。
Grok 告诉我，静态网站是新手的最佳选择，因为它简单、快速，且托管成本低。
它还推荐了几种静态网站生成器，如 Hugo、Jekyll，以及免费托管平台，如 Vercel、Netlify。
通过 AI 的介绍，我快速了解了建站的大致流程：确定方案 → 本地开发 → 内容编写 → 部署上线 → 域名绑定。

选择建站工具

在 Grok 的建议下，我最终选择并使用了以下工具：

• Hugo：一个轻量、快速的静态网站生成器，适合博客，生成网页的速度快，社区活跃，有丰富的主题和文档支持。并且 Hugo 对新手友好，只需简单的命令和 Markdown 文件就能生成完整网站。
• GitHub：用于版本控制和项目存储，完全免费。GitHub 不仅能保存网站代码，还能与 Vercel 联动，实现代码更新后自动部署。GitHub 是现代开发的标配，即使是新手也能通过简单命令管理项目。
• Vercel：一个免费托管平台，支持一键部署。它能自动识别 Hugo 项目，优化网站性能，如压缩图片、加速加载，还提供免费的临时域名。推荐 Vercel 是因为它与 GitHub 无缝集成，部署过程几乎零配置。
• Cloudflare：提供 DNS 管理和 CDN 服务。免费计划包括快速 DNS 解析、CDN 缓存、DDoS 防护和 SSL 证书，能加速网站加载并提升安全性。这些工具都是免费的，完美契合我的低成本目标。
• VS Code：一款免费的代码编辑器，功能强大，支持丰富的插件生态。这些工具都是免费的，完美契合我的低成本目标。
• iTerm：macOS 上的终端工具，替代默认的 Terminal。它的界面美观，支持分屏、主题定制，运行 Hugo 命令时效率更高。（本人 Mac 用户）

在选择这些工具过程中，我也对比咨询了其他选项，比如 Jekyll、WordPress、Netlify 等，但是在 Grok 的帮助下，我最终确认采用 Hugo+GitHub+Vercel+Cloudflare 的组合，这应该是最适合新手快速建站和长期维护的方案。

选择 Hugo 模板

一个好的网站模板能大大减少设计工作，我决定在第一天就选定 Hugo 模板。

访问 Hugo 官方主题网站（https://themes.gohugo.io/ ），那里有数百个免费主题可供选择。我的目标是找一个简洁的、响应式、适合博客的模板。

我的网站目前使用的是模板 Niello (https://themes.gohugo.io/themes/niello/ )
在部署过程我尝试过好几个模板，有些部署完成后发现改动调整起来比较复杂，于是更换了几次模板。

对于新手来说，选择功能越少布局越简单的越好，后期可以再根据需求添加模块。
另外也要注意，选 License 是 MIT 也会更简单。

成本控制

在网站建立过程中，唯一需要花钱的地方是域名。当然，如果你不需要自己的域名，托管在平台上（如 Vercel 提供的免费子域名）甚至可以做到零成本。

但我的诉求是建立一个拥有自定义域名的网站，不仅看起来更专业，还能为后期使用 Google 的套件（如 Google Analytics、Google Search Console、Google AdSense）提供更便捷的配置支持，同时提升搜索引擎优化（SEO）效果。

可以购买域名的服务商有很多，国内有阿里云、腾讯云，国外有 GoDaddy、Namecheap。我在选择服务商时，优先考虑价格、续费成本和易用性。

经过比较，我发现同样的域名，在 Namecheap 旗下的 Spaceship 上购买最便宜，使用优惠码后“.com”的域名首年仅需约 20 元，既满足我的预算需求，又便于与 Vercel 和 Cloudflare 集成。

制定方案

根据 AI 整合资料，明确接下来每一步需要做什么：

• 第一天：搜集资料，学习建站流程，确定建站工具
• 第二天：配置工具，注册账号，本地开发，撰写文章，测试效果
• 第三天：购买域名，部署和绑定，网站上线

三、建站第二天：配置环境，本地开发

第二天是“实操日”。
在确定建站工具后，就需要下载相关工具软件、注册账号，先在本地开发出网站样子。
这个阶段我完全依靠 AI，尤其是不懂的地方一定要让 AI 提供详细的步骤和说明。

电脑配置与环境搭建

将我的诉求描述清楚，AI 会提供了详细的步骤。

跟着提示，我先后下载并安装了以下工具软件：

• Homebrew：这是 macOS 上的一个包管理工具，类似于手机的应用商店。它通过简单命令安装和管理软件（如 Hugo），而不需要手动下载和配置。我们要用它来安装 Hugo 和其他可能的依赖工具。
• Hugo：一个快速的静态网站生成器，它将你写的 Markdown 文件（文章）和模板（主题）转换为静态 HTML 文件，生成可以直接发布的网站。它负责创建网站结构、渲染主题，并提供本地预览功能。
• Git：一个版本控制工具，用于下载和管理代码或主题。我们用它来从 GitHub 下载 Niello 主题的代码。另外，如果你想将网站发布到 GitHub Pages，Git 也是必须的。
• Visual Studio Code：文本编辑器，用于编辑 Hugo 的配置文件（config.toml）、Markdown 文章文件（.md）和可能的主题文件。
• iTerm2：macOS 上的一个高效、美观的终端工具，替代默认的终端应用，用于运行 Hugo 和 Git 命令。
• Node.js： 一个 JavaScript 运行环境，某些 Hugo 主题（包括 Niello）可能需要它来处理前端资源（如 JavaScript）。
• npm：Node.js 的包管理器，用于安装 Tailwind CSS 和其他依赖。
• Tailwind CSS：Niello 主题使用 Tailwind CSS 提供现代、响应式的样式。Tailwind CSS 需通过 npm 安装并配置。

接着，我在 VS Code 中添加了 Markdown 和 Hugo 相关的插件，方便后续编写和调试。整个配置过程花了不到 1 小时，AI 提供的教程里每一步我不懂的，都会及时询问，它的解答让我少走了很多弯路。

创建 Hugo 项目

• 安装 Hugo，创建新站点：

我给项目命名为“aitechgirl”，在 iTerm2 中运行 :

hugo new site aitechgirl

这创建了一个名为 aitechgirl 的 Hugo 项目文件。进入项目目录：

cd aitechgirl

• 配置主题（Niello）：

Niello 主题（https://themes.gohugo.io/themes/niello/）基于 Tailwind CSS，现代且响应式。我按照主题文档，从 GitHub（https://github.com/itsmevjn/niello）克隆主题：

git submodule add https://github.com/itsmevjn/niello.git themes/niello

复制 Niello 的示例配置到项目根目录：

cp themes/niello/exampleSite/hugo.toml hugo.toml
cp -r themes/niello/exampleSite/content .

编辑 hugo.toml，确保主题设置正确：

theme = "niello"

• 安装 Node.js 依赖：

Niello 使用 Tailwind CSS，需安装依赖：

npm install

运行构建脚本生成样式：

npm run build

• 本地测试

启动服务器：在 aitechgirl 目录运行：

hugo server

访问网站：打开浏览器，访问 http://localhost:1313。能看到 Niello 主题的网站，包含首页、关于页、文章，导航清晰，响应式设计适配手机和电脑。

Hugo 项目结构

创建项目后，在本地会生成一个我命名为“aitechgirl”的文件夹。
刚开始我对里面的东西是什么也完全不了解，不过 AI 这个好老师会不厌其烦地给我解答各种问题。

• 各类主要文件（夹）作用：
  • archetypes：文章模板，定义新文章的默认格式。
  • content：存放网页的文章（Markdown 文件）。
  • data：存放数据文件（如 JSON 或 YAML）。
  • layouts：自定义模板（通常由主题提供）。
  • public：生成静态网站后，输出文件存放在这里。
  • static：存放图片、CSS、JS 等静态资源。
  • themes：存放 Hugo 主题（如 Niello）。
  • hugo.toml：网站配置文件，控制网站设置。

测试和编写内容

根据自己对网站定位，修改介绍信息，并添加文章测试效果。 用 VS Code 打开 aitechgirl 文件夹，找到对应的文件。
我的参考如下：

title = "科技迷妹"
[params]
  description = "分享有意思的科技产品，关注一个人的创业项目"
[[menu.main]]
  name = "首页"
  url = "/"
[[menu.main]]
  name = "关于"
  url = "/about/"
[[menu.main]]
  name = "文章"
  url = "/posts/"

创建新的文章 content/posts/my-post.md：

---
title: "第一篇博客"
date: 2025-05-14
---
这是我的第一篇文章！

注意模板格式

在我的模板里，文章开头都有一段如下信息，这是文章的 Front Matter。
Front Matter 就像是 Hugo 文章的“身份证”，定义了标题、日期、分类、标签等关键信息，控制文章如何显示和组织。Hugo 使用这些信息来生成网页、组织内容和优化 SEO。

+++
title = 'Example1 Title - ZH'
date = 2024-12-11T09:34:12+08:00
categories = ["Example 1 - ZH"]
tags = ["eg1 - zh"]
keywords = ["SEO", "Keywords", "Here"]
description = "SEO Description Here"
draft = false
+++

如果一开始你像我一样不懂得其作用，可以发给 AI 让它说明其作用。以下是 AI 给出的每个字段的解释：

1. title = ‘Example1 Title - ZH’

• 含义：文章的标题，显示在页面顶部、文章列表或浏览器标签。
• 作用：定义文章名称，如“Example1 Title - ZH”（“ZH”可能表示中文内容）。
• 示例：在网站上，这篇文章的标题会是“Example1 Title - ZH”。

2. date = 2024-12-11T09:34:12+08:00

• 含义：文章的创建或发布日期，格式为 ISO 8601（YYYY-MM-DDThh:mm:ss+ 时区）。
• 作用：
  • 决定文章在列表中的排序（如按时间降序）。
  • 显示在文章页面（如“发布于 2024 年 12 月 11 日”）。
  • +08:00 表示东八区（中国标准时间）。
• 注意：通常由 Hugo 自动生成（运行 hugo new 时），也可手动修改。

3. categories = [“Example 1 - ZH”]

• 含义：文章所属的分类（categories），一个数组，可以有多个值。
• 作用：
  • 用于组织内容，如将文章归类到“Example 1 - ZH”分类。
  • 网站可生成分类页面（如 /categories/example-1-zh/），方便用户浏览同类文章。
• 示例：点击分类链接，查看所有“Example 1 - ZH”文章。

4. tags = [“eg1 - zh”]

• 含义：文章的标签（tags），一个数组，用于描述文章主题或关键词。
• 作用：
  • 提供更细粒度的内容标记，方便用户通过标签（如“eg1 - zh”）查找相关文章。
  • 生成标签页面（如 /tags/eg1-zh/）。
• 区别：标签比分类更灵活，通常用于交叉主题。

5. keywords = [“SEO”, “Keywords”, “Here”]

• 含义：文章的 SEO 关键词，优化搜索引擎收录。
• 作用：
  • 添加到页面的 标签，告诉搜索引擎文章的核心主题。
    • 提高文章在搜索结果中的排名。
• 示例：搜索引擎可能因“SEO”“Keywords”优先显示此文章。

6. description = “SEO Description Here”

• 含义：文章的简短描述，用于 SEO 和页面预览。
• 作用：
  • 添加到 标签，显示在搜索引擎结果或社交媒体分享预览中。
  • 吸引用户点击（如 Google 搜索结果下的摘要）。
• 示例：搜索此文章时，显示“SEO Description Here”作为简介。

7. draft = false

• 含义：文章是否为草稿状态（true 或 false）。
• 作用：
  • draft = false：文章已完成，Hugo 会生成并发布。
  • draft = true：文章为草稿，仅在本地预览（hugo server -D）时显示，不生成到生产环境。
• 用途：便于编写未完成的内容，待完善后再发布。

8. +++ 分隔符

• 含义：标记 Front Matter 的开始和结束，Hugo 识别 TOML 格式。
• 作用：将元数据与文章内容（Markdown）分开。

9. Example 1 Content - ZH

• 含义：Front Matter 后的 Markdown 内容，文章的正文部分。
• 作用：这是用户在网站上看到的实际内容，使用 Markdown 语法编写（如标题、段落、图片）。
• 示例：## 表示二级标题，显示为“Example 1 Content - ZH”。

整个 Front Matter 也可以根据自己的需要修改、删除和增加，让文章展示出需要的信息。
当然，前期可以先不用调整，按照模板格式添加内容，就可以将测试文章发布出来了。
其他的信息，如修改图片、修改布局、修改字体颜色等等，都可以咨询 AI 获得解决办法。

注册账号

为后续网站部署做准备，我注册了三个平台账号：

• GitHub（github.com）：用邮箱创建免费账号，建立了“aitechgirl”仓库，用于存储代码。Grok 会提供代码教我用 git push 推送项目。
• Vercel（vercel.com）：可以直接用 GitHub 账号注册，准备一键部署。Vercel 的免费计划就能支持这类小型网站。
• Cloudflare（cloudflare.com）：注册过程简单，只需邮箱验证和基本信息。也可以在第三天注册并添加域名。

至此，我的本地网站已初具雏形，账号注册也为部署铺平了道路。

四、建站第三天：部署上线，域名绑定

第三天是“冲刺日”，目标是让网站上线并绑定自定义的域名。

GitHub 托管

为了托管网站代码并与 Vercel 集成，要先在 GitHub 创建了一个仓库，然后将本地 Hugo 项目推送上去。
我在 GitHub 上并创建同名的“aitechgirl”仓库后，在 iTerm2 中进入项目目录“aitechgirl”，运行以下命令初始化 Git 并推送代码：

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/Carrie1895/aitechgirl.git
git push -u origin main

推送成功后，在 GitHub 上确认代码已上传。
这不仅是为了要备份了项目，还是为部署到 Vercel 做准备。

Vercel 部署

注册并登录 Vercel（vercel.com），点击“New Project”，选择 GitHub 仓库“aitechgirl”，Vercel 自动检测到 Hugo 项目，我无需调整配置，只确认了以下默认设置：

• Framework Preset：Hugo
• Root Directory：默认（项目根目录）
• Output Directory：public

点击“Deploy”，几分钟后 Vercel 会生成一个临时域名（如我的是 https://aitechgirl.vercel.app/）。访问该链接，网站与本地预览一致，响应式设计在手机和电脑上都完美呈现。整个过程不到 10 分钟。

其实到这一步，如果没有自定义域名的需求，就可以作为普通网站分享文章或产品集了。
特别是适合设计工作者，可以在网上分享自己的作品。

购买域名

为了让网站更专业，以及希望能长远发展，我是决定购买自定义域名的。
经过查询和对比价格后，我是在 Spaceship 上购买的域名，使用优惠码后，首年优惠价仅约 20 元（约 3 美元，视汇率）。

注册 Spaceship 账号，加入购物车，勾选免费的 WHOIS 隐私保护（隐藏个人信息），通过信用卡或支付宝完成付款。购买完成后，Spaceship 仪表板显示域名状态为“Active”。

域名绑定

为加速网站访问并增强安全性，我使用 Cloudflare 配置域名解析。

1. 添加域名到 Cloudflare

登录 cloudflare.com，在仪表板中，点击“添加网站”（Add a Site），输入域名 aitechgirl.com，然后点击“继续”。Cloudflare 会扫描现有的 DNS 记录（如果域名已有配置），但因为我的域名是新购买的，扫描结果为空。接着，Cloudflare 提供了两个专属的名字服务器（Name Servers，例如 dawn.ns.cloudflare.com 和 jim.ns.cloudflare.com）

2. 更新域名注册商的 Name Servers

我的域名是在 Spaceship（spaceship.domains）购买的，因此登录我的 Spaceship 账户，进入域名管理页面，找到 aitechgirl.com 的 DNS 设置。默认情况下，Spaceship 使用自己的名字服务器，但我需要将其更改为 Cloudflare 提供的两个名字服务器。点击“Name Servers”选项，输入 Cloudflare 的两个地址（例如 dawn.ns.cloudflare.com 和 jim.ns.cloudflare.com），保存更改。通常 DNS 名字服务器的更改可能需要 1-24 小时，但 Cloudflare 较快，我的更改完成 1 分钟后即时生效。更改后，回到 Cloudflare，点击“完成”以确认域名已添加。

3. 配置 DNS Records

在 Vercel 中添加域名（Add Domain），输入自定义的域名 aitechgirl.com，然后输出 DNS 记录，可以直接下载配置文件。进入 Cloudflare 的仪表板中，可直接上传 DNS 记录以指向 Vercel 的服务器。一般是使用 A 记录或 CNAME 记录，因为它简单且适合 Vercel 的部署。也可以手动添加，参考如下：

• 主域名（aitechgirl.com）：

  • 类型：A
  • 名称：@
  • 目标：76.76.21.21（Vercel 的通用 IP 地址）
  • 代理状态：已代理（Proxied，推荐）或仅 DNS（DNS Only）
  • TTL：自动（Auto）

• 子域名（www.aitechgirl.com）：

  • 类型：CNAME（推荐，即使主域名用 A 记录，www 仍用 CNAME）
  • 名称：www
  • 目标：cname.vercel-dns.com
  • 代理状态：已代理（Proxied）
  • TTL：自动（Auto）

网站上线

网站上线后，进行全面测试。
用电脑和手机访问 aitechgirl.com，检查文章、图片、导航和响应式布局，一切正常。
这样，我就拥有了属于自己的网站，可以按我的想法添加内容，分享感兴趣的话题了。

五、经验总结

创建属于自己的网站没有想象中难！
在 Grok 的帮助下，我只花了 20 元，从零基础建成了一个自定义域名的网站，支持手机和电脑访问，简洁又美观。
整个过程用时 3 天，虽然不能说有多快，毕竟零基础的我需要一定时间学习和试错，相信这是普通人都能做到的成绩和水平了。
真正的难点是在于持续运营和长期维护。
接下来，我计划定期更新博客文章，在 AI 帮助下学习和体验更多有意思的项目，并分享实操的过程。
欢迎关注，希望我的经验对你有所帮助！

• Tags:
• 建站
• 新手教程