倚 倚栏听雨 · 学习记录
← 回到学习笔记
· 6702 字

AI编程实战之个人网站规划、搭建与运营

从网站定位、技术选型和AI协作开发出发，梳理个人网站的搭建、部署、内容管理、合规运营与长期维护方法。

学习目标

这篇笔记主要解决五个问题：

  1. 为什么要搭建个人网站。
  2. 静态网站、动态网站和混合方案应该怎样选择。
  3. 如何让 AI 协助完成需求分析、开发、测试和部署。
  4. 网站上线后如何持续更新、安全维护和积累内容。
  5. 广告、联盟营销、数字产品和咨询服务有哪些现实条件。

本文侧重网站的规划和运营，技术结构可以结合《网站技术架构全解析：从入门到实战》继续学习。

一、个人网站能带来什么

个人网站不是简单的网络名片，它更适合作为自己长期维护的内容和作品入口。

常见用途包括：

  • 整理学习笔记、项目复盘和技术文章。
  • 展示作品、案例、简历和服务能力。
  • 提供长期有效的联系方式。
  • 汇总分散在不同平台上的公开内容。
  • 建立可以搜索、分类和持续更新的知识库。
  • 为后续广告、产品或服务提供稳定入口。

第三方平台适合传播和交流，但账号规则、推荐机制和内容形式由平台决定。个人网站的域名、源码和内容可以由自己管理，自主性更高。

不过，自主性也意味着责任。域名续费、服务器安全、内容备份、隐私政策和文章质量都需要自己维护。

先明确网站定位。 技术选型之前，要回答网站为谁服务、解决什么问题。

可以用下面五个问题梳理需求：

  1. 网站的主要读者是谁？
  2. 首页最需要展示什么内容？
  3. 内容是文章、作品、图片，还是在线工具？
  4. 是否需要用户登录、订单、私密数据或实时协作？
  5. 自己愿意投入多少时间维护？

例如，一个以学习记录为主的网站，可以先确定：

目标读者：自己和对技术学习感兴趣的访客
核心内容：学习笔记、技术随笔
必要功能：文章列表、搜索、留言、移动端适配
维护方式：Markdown写作、Git版本管理、服务器自动部署
非必要功能：用户注册、复杂会员系统、在线支付

需求越清楚，AI 越不容易生成一套功能很多、维护困难但真正用不到的网站。

二、网站架构与框架选型

网站可以按页面生成方式和数据处理需求分为三类：

类型 工作方式 适用场景 主要代价
静态网站 构建时把内容生成HTML，访问时直接返回文件 博客、笔记、作品集、文档 内容更新后需要重新构建
动态网站 访问时运行后端程序并读取数据 登录、订单、权限、实时数据 开发、运维和安全复杂度更高
混合方案 主体静态，少量功能使用接口或第三方服务 评论、表单、统计、局部个性化 需要同时管理静态站和外部服务

静态网站结构简单、部署方便，没有业务数据库和登录接口时，攻击面通常更小，但这不等于绝对安全。服务器、Nginx、评论系统和统计脚本仍要维护。

动态网站也不是 AI 无法完成，而是身份认证、权限、数据库、支付和安全审计不能只依赖 AI 生成代码。个人内容站通常可以先保持主体静态，只给确实需要实时处理的功能增加后端。

常见静态网站框架

不同框架适合不同使用习惯：

框架 主要特点 更适合的场景
Eleventy Node.js生态，模板灵活，默认输出静态文件 博客、个人站、自定义内容网站
Hugo Go语言编写，构建速度快，内容和分类能力成熟 文章量较多的博客、文档、多语言站点
Astro 默认支持静态生成，也可以按需渲染，组件生态丰富 内容网站、需要局部交互的现代站点
VitePress 以Markdown和Vue为基础，默认主题偏技术文档 项目文档、知识库、技术内容

框架没有绝对好坏。选型时应关注：

  • 是否适合自己的内容类型。
  • 是否有清晰文档和活跃维护。
  • 主题能否满足基本视觉需求。
  • 本地构建和部署是否稳定。
  • 自己是否能够理解目录和修改方式。
  • 后续迁移内容是否方便。

当前“倚栏听雨”使用 Eleventy 生成静态页面，由 Nginx 对外提供访问，文章使用 Markdown 保存，GitHub 负责版本管理。这种结构适合持续积累学习笔记和技术随笔。

三、用AI启动和修改现有项目

借助 AI 建站时，比较稳妥的方法是先选择成熟框架，再做小范围修改。

获取并运行现有项目

如果使用开源项目或自己的 Git 仓库，建议在空目录中开始，避免新项目文件与旧文件混在一起。

基本流程如下：

git clone <仓库地址> my-site
cd my-site
npm install
npm run dev

具体命令要以项目的 README.md 和 package.json 为准。有些项目使用 npm ci、pnpm、Hugo 或其他工具，不能看到是网站项目就直接套用同一组命令。

第一次安装依赖通常比后续启动慢。耗时主要受网络、依赖数量、磁盘性能和安全软件扫描影响，不能简单认定某一种操作系统一定更适合开发。

让 AI 帮助运行项目时，应要求它先阅读：

  • README.md
  • package.json
  • 站点配置文件
  • 内容目录
  • 构建和部署脚本

不要授权 AI 在不了解项目的情况下随意全局安装工具或修改系统环境。

在现有结构上增量修改

成熟项目通常会把站点名称、导航、作者信息和主题选项放在配置文件中。优先修改配置，不要为了换一个标题或颜色就直接重写框架核心代码。

可以让 AI 解释配置项，但不建议让它一次性给几百行配置全部添加中文注释。这样会增加维护成本，还可能破坏 YAML、JSON 或 JavaScript 配置语法。更稳妥的方法是只解释当前需要修改的部分，并把重要约定记录到维护文档中。

推荐按下面的顺序修改：

明确需求
-> 选择框架或现有项目
-> 本地运行原始版本
-> 让AI阅读项目结构
-> 分步骤修改页面和功能
-> 每次修改后测试
-> 提交Git版本

如果直接要求“帮我做一个完整个人网站”，AI 可能一次生成大量文件。虽然页面能够打开，但目录、样式和功能之间缺少稳定约束，后续每次修改都容易牵动其他部分。

更好的提问方式是：

这是一个现有Eleventy静态网站，请先阅读项目结构。

本次只完成一个任务：
在首页学习笔记区域增加“更多”按钮，
跳转到带标题、摘要和标签搜索的列表页。

约束：
1. 不重写原有架构。
2. 复用现有颜色、字体和间距。
3. 搜索范围不包括正文。
4. 同时检查桌面端和手机端。
5. 修改后运行构建，不处理无关文件。

一次只解决一个明确问题，更容易检查，也方便出现问题时回退。

明确人机分工并记录维护规则

AI 可以协助：

  • 根据目标整理需求清单。
  • 阅读现有项目和解释目录作用。
  • 生成模板、CSS、脚本和配置初稿。
  • 分析构建错误和浏览器控制台报错。
  • 编写测试、部署脚本和维护文档。
  • 检查链接、标题和 Markdown 格式。

人需要负责：

  • 决定网站定位和内容边界。
  • 审核文章真实性和表达。
  • 选择是否接入第三方服务。
  • 管理密码、密钥、域名和服务器权限。
  • 验证页面是否符合实际使用需求。
  • 对上线结果和合规问题负责。

AI 生成的代码不能直接视为正确结果。涉及登录、权限、支付、文件上传和删除操作时，更不能未经测试直接上线。

当 AI 已经理解项目结构后，可以把稳定规则整理成项目维护指南，例如：

  • 文章存放目录和 Front Matter 格式。
  • 标题、摘要、标签和日期规范。
  • 图片目录与链接写法。
  • 构建、测试和部署命令。
  • 哪些目录不允许重写。
  • 文章发布前必须人工审核。
  • 服务器与 GitHub 的同步顺序。

维护指南的价值不是“训练一个不会犯错的 AI”，而是把项目约束固定下来。更换电脑、模型或对话后，可以先让 AI 阅读指南，减少重复解释。

发现生成内容不符合要求时，既要修改当前结果，也要判断是否需要补充指南。不能只更新规则而放任当前错误内容继续存在。

IDE侧边栏、命令行代理和网页对话各有用途。命令行工具便于执行构建和读取报错，IDE适合查看差异和编辑文件，网页对话适合讨论思路。工具形态本身不会保证结果更准确。

选择模型和服务时，可以关注：

  • 是否能稳定理解较大的项目上下文。
  • 是否支持所需的图片、文件或联网能力。
  • 生成速度是否影响实际工作。
  • 费用、隐私和数据保存规则是否可接受。
  • 出错后能否查看变更并回退。

具体价格和套餐会变化，应以服务商当前官方说明为准，不根据旧课程中的金额囤积资源。

四、从本地预览到正式上线

一个可维护的发布流程通常包括：

  1. 在本地或服务器源码仓库保存内容。
  2. 安装依赖并启动本地预览。
  3. 检查标题、链接、图片和 Markdown 格式。
  4. 运行正式构建。
  5. 在测试环境查看桌面端和手机端。
  6. 只上传变化的静态文件。
  7. 检查 Nginx 配置并重新加载。
  8. 从公网验证关键页面。
  9. 提交 Git 并推送远程仓库。
  10. 保留可以恢复的备份。

常见 Node.js 静态站点可以从下面三条命令开始确认：

npm install
npm run dev
npm run build

本地预览报错时，应先读取完整错误信息，判断是依赖缺失、Markdown 格式错误、端口占用还是配置问题。不能看到报错就让 AI 大范围重写项目。

如果网站使用 CDN，发布新文件后还要考虑缓存刷新或等待缓存过期。刷新前应先确认源服务器上的文件已经正确，避免把错误页面快速分发到所有节点。

这个网站的文章发布还增加了一条约束：文章必须先经过人工审核，得到明确上传指令后，才能进入正式内容目录。

发布自动化的目的不是跳过审核，而是减少重复命令和人为失误。

域名、HTTPS和网站基础设施

网站对外访问通常需要：

  • 域名。
  • DNS解析。
  • 网站托管或服务器。
  • Web服务器配置。
  • HTTPS证书。
  • 定期续费和到期提醒。

域名便于记忆、配置 HTTPS 和长期建立稳定入口。注册与续费价格因后缀、注册商和促销政策而变化，选择时应重点看长期续费价格和管理可靠性。

HTTPS证书用于加密浏览器与网站之间的传输，并验证域名身份。个人网站可以使用受浏览器信任的免费证书，但必须配置自动续期并定期检查。

CDN可以把静态内容缓存到离访客更近的节点，减少源站压力并改善不同地区的访问速度。小流量网站不必急着接入；它还会增加缓存、回源和故障排查的复杂度。

对象存储适合保存大量图片、附件和其他静态资源，可以减小代码仓库和发布包体积，通常还提供权限、生命周期、版本和 API 等能力。

使用第三方免费图床存在外链失效、限流、压缩、隐私和服务终止风险。长期内容更适合使用自己可管理的对象存储或随网站一起备份的资源目录。

如果网站使用中国大陆服务器，应根据实际服务内容和所在地要求办理必要手续，并在网页中按要求展示备案信息。公安备案、隐私政策、广告声明等是否需要以及如何展示，应以主管部门和服务商的最新规则为准。

域名和证书不是配置一次就可以永远不管。应记录到期时间，并确保续费邮箱和手机号可用。

五、内容创作与网站运营

一个网站能否持续被访问，主要取决于内容是否真实、清楚、可搜索和持续更新，而不是首页动画有多少。

文章可以围绕：

  • 真实解决过的问题。
  • 学习过程中的方法和误区。
  • 项目搭建与故障排查记录。
  • 工具使用和版本差异。
  • 对旧文章的补充和修正。

发布前应检查：

  1. 标题是否准确，是否与旧文章重复。
  2. 技术步骤是否实际验证。
  3. 命令是否说明运行环境。
  4. 图片和链接是否可访问。
  5. 是否包含密码、令牌、内部地址等敏感信息。
  6. 是否使用了没有授权的图片或大段内容。
  7. 文章是否遵守网站既定发布规则。

AI 可以帮助整理结构和润色，但不能替代个人经历和事实核验。完全由 AI 批量生成、没有验证的内容，很难建立长期信任。

Markdown与HTML的关系

Markdown 是常见的内容源格式，静态站点生成器可以把它转换为 HTML。Markdown 并不是所有网站唯一的写作方式，也不是从古至今都在使用；不少网站使用 HTML、富文本编辑器、数据库或内容管理系统保存文章。

个人网站常用的 Markdown 语法包括：

## 二级标题

- 无序列表
- 另一项

> 引用内容

[链接文字](https://example.com)

![图片说明](/images/example.png)

Front Matter 通常放在文件开头，用于记录标题、日期、标签和摘要。字段名称由具体项目决定，不能从其他框架直接复制。

用创作指南稳定文章格式

可以在项目中维护一份简短的文章指南，说明：

  • 文章必须真实、准确、通俗易懂。
  • 标题和摘要怎样填写。
  • 标题层级怎样使用。
  • 命令需要注明运行环境。
  • 图片和外部链接怎样检查。
  • 哪些内容不得发布。
  • 上传前需要人工审核。

指南能够帮助 AI 保持格式一致，但不能代替逐篇审核。AI 可能虚构数据、经历、产品价格和人物信息，所有具体事实都要核对。

根据真实数据选择主题

选题可以参考：

  • 站内搜索中没有得到结果的关键词。
  • 访问统计中的入口页面和搜索词。
  • 留言、邮件和工作中反复出现的问题。
  • 旧文章中需要补充或更新的内容。

统计数据应先检查样本量、来源和时间范围。某个关键词短期上升，不一定代表长期需求。

不建议让 AI 根据热点自动生成几十篇文章后直接发布。批量内容容易重复、失实或偏离网站定位，也可能降低读者信任。自动化可以帮助收集选题、生成草稿和运行格式检查，但每篇文章仍应经过人工审核和明确发布指令。

搜索、评论和统计功能

搜索。 静态网站可以在构建阶段生成文章索引，再由浏览器执行关键词搜索。搜索范围应根据需要控制在标题、摘要、标签等字段，避免正文重复内容造成大量无关结果。

评论。 评论可以接入独立服务，但要考虑：

  • 垃圾留言和恶意内容。
  • 服务可用性和数据备份。
  • 用户隐私和第三方请求。
  • 评论服务故障时不能影响正文阅读。

访问统计。 统计工具可以帮助了解：

  • 哪些文章被阅读。
  • 访客通过什么页面进入。
  • 手机端和桌面端的比例。
  • 哪些页面加载较慢。

统计结果只能作为改进参考。不要为了追求数字而发布夸张、错误或偏离主题的内容。

统计工具本身也会处理访问数据。接入前应了解其 Cookie、IP 地址、数据保存位置和隐私政策，并在网站隐私说明中如实披露。

六、网站变现方式与成本

网站上线不等于会自动产生收入。以下方式都需要真实内容、稳定流量和访客信任。

广告。 广告平台通常需要审核网站内容、流量来源、隐私政策和合规情况。收入会受到访问量、访客地区、内容主题、广告位置和点击质量影响，没有固定标准。

接入广告后，应避免广告遮挡正文、误导点击或明显降低阅读体验。

联盟营销。 联盟营销是通过专属链接推荐产品或服务，在满足平台规则后获得佣金。

使用时应：

  • 只推荐自己了解的产品。
  • 清楚标注链接可能带来佣金。
  • 不夸大功能和收益。
  • 遵守平台、广告和消费者权益相关规则。

佣金比例因产品和计划而异，不能把个别高比例当作普遍情况。

数字产品。 数字产品可以是课程、模板、电子书、脚本或工具。它们虽然可以重复销售，但仍有开发、维护、客服、平台、税务和退款成本，并非“后续每一份都是纯利润”。

产品必须基于真实能力，明确适用范围，不能出售未经授权的资料或把开源代码简单换名后宣称完全自研。

咨询服务。 一对一咨询不容易规模化，但可以帮助了解真实需求。起步阶段可以用它验证：

  • 用户愿意为什么问题付费。
  • 自己的解决方案是否有效。
  • 哪些问题适合进一步做成文章、工具或产品。

提供咨询时，要明确服务范围和交付内容，不承诺无法保证的结果。

不要只看收入，也要计算成本

个人网站的成本不只有域名和服务器，还可能包括：

  • HTTPS、存储、CDN和备份。
  • 邮件、评论、统计和数据库服务。
  • AI模型、图片生成或第三方接口。
  • 主题、插件和商业软件授权。
  • 内容创作、技术维护和客服时间。
  • 备案、合同、税务和合规工作。

有些方案可以免费或低成本起步，但价格和免费额度会变化。选择服务时应查看当前官方价格，不应根据旧课程中的具体金额做长期预算。

七、网站安全与备份

静态站点仍要做好基本安全工作：

  • SSH 使用密钥并限制权限。
  • 管理后台采用不常见路径和身份验证。
  • 服务器、Nginx和依赖及时更新。
  • 密码、令牌和私钥不提交到 GitHub。
  • 发布前检查文件权限。
  • 对源码、文章和服务器配置分别备份。
  • 定期验证备份是否可以恢复。

GitHub 是版本管理和异地副本，但不能自动替代完整备份。服务器配置、私密环境变量、数据库和第三方服务数据仍需单独处理。

八、怎样判断网站是否在变好

可以定期观察：

  • 是否持续发布经过验证的内容。
  • 旧文章是否得到修正和更新。
  • 搜索是否能找到目标文章。
  • 手机端是否易于阅读。
  • 页面是否存在失效链接和图片。
  • 备份和恢复流程是否可用。
  • 访客是否通过留言或邮件获得帮助。
  • 维护网站所花的时间是否可以接受。

个人网站首先要能长期维护。功能少但稳定、内容真实且持续更新，通常比短期堆积大量功能更有价值。

域名注册时间或网站存在时间可能只是众多历史信号之一，不能据此保证搜索排名。购买旧域名还可能继承过去的垃圾外链、处罚记录或商标风险。与其依赖域名年龄，不如持续改善内容质量、页面性能、内部链接和真实用户体验。

九、本篇小结

AI 降低了个人网站开发和维护的门槛，但没有替代需求判断、内容审核、安全管理和长期运营。

这篇笔记可以归纳为五点：

  1. 先确定网站定位，再选择静态、动态或混合架构。
  2. 优先使用成熟框架，在现有结构上做增量修改。
  3. 让 AI 协助开发和排错，人负责审核、验证和最终决策。
  4. 网站价值来自真实内容、稳定维护和访客信任，不来自夸张的收益承诺。
  5. 广告、联盟营销、数字产品和咨询都可以尝试，但必须计算成本并遵守相关规则。

网站真正上线只是开始。把每一次学习、实践和复盘认真保存下来，才会逐渐形成属于自己的长期内容资产。

技术指导来自：Python4Office