从零搭建个人网站：逃离算法、重回独立博客时代

为什么选择搭建个人网站？

社交媒体的困境

如今的社交平台已经变了味：

• Facebook 充斥着 AI 生成的低质内容
• Twitter 演变成信息噪音的集散地
• Instagram 完全沦为 TikTok 的翻版
• 所有平台都在疯狂抓取用户数据和时间

更关键的是，你在这些平台上创作的内容并不真正属于你。算法决定谁能看到你的作品，平台规则随时可能改变。

重新发现 Indie Web

半年前，我偶然看到一个关于"独立网络（Indie Web）"的视频。这才发现，原来有一整个社区的人都在用自己的方式打造个人网站——不依赖大平台，完全掌控自己的数字空间。

这让我想起童年时浏览那些充满创意的个人博客：每个站点都有独特的设计，站长们分享着自己真正热爱的内容。那种纯粹的创作自由深深吸引了我。

从入门到崩溃：我的建站过程

第一阶段：重拾 HTML/CSS

虽然我之前学过 HTML 和 CSS，但一年多没碰代码，几乎忘得一干二净。刚开始时：

• 每个 HTML 标签都要查文档
• CSS 布局经常出现意想不到的错位
• 甚至完全推翻了第一版网站设计

最大的挑战：如何让网站看起来不像"新手练习作业"？

我决定回归经典——模仿 2000 年代早期那种色彩鲜艳、元素丰富的个人主页风格。我使用了：

• 复古背景图案生成器
• 闪烁文字 GIF 制作工具
• 各种小图标、按钮和徽章

第二阶段：陷入"永不满意"循环

当网站基本成型后，新的问题出现了：越看越不满意。

浏览其他优秀的个人网站时，我总觉得自己的作品像"婴儿涂鸦"。特别是看到那些应用了 CRT 显示器效果的炫酷网站，我开始怀疑自己的设计。

这时候有两个选择：

1. 推倒重来（但已经投入太多时间）
2. 想办法优化现有设计

我选择了后者，并做出一个大胆决定——添加主题切换功能。

第三阶段：JavaScript 的逆袭

为了实现双主题切换（亮色 + 暗色复古 CRT 风格），我必须重新学习 JavaScript。

最初的实现方式非常笨拙：

• 在每个页面复制两套完整内容
• 用不同的 CSS 文件控制显示/隐藏
• 导致代码极其冗余混乱

后来我发现可以用组件化思维解决：

• 只对特定元素（如标题）应用主题类
• 用 JavaScript 动态切换 CSS 文件
• 大幅减少重复代码

这个过程让我想起学 React 时的愉悦感——当你找到更优雅的解决方案时，那种成就感无可替代。

网站功能与设计亮点

主题：粉色梦幻 vs 复古终端

亮色主题采用粉色系，干净整洁且充满活力；暗色主题则模拟老式 CRT 显示器效果，星空背景配合扫描线滤镜，营造出赛博复古氛围。

切换按钮设计了悬停预览效果——鼠标经过时能隐约看到另一主题的样子，这个小细节我特别满意。

博客区：Windows 98 桌面还原

博客部分是我最骄傲的作品。使用 98.css 框架，完整还原了 Windows 98 桌面环境：

• 可最小化/关闭的窗口
• 可交互的开始菜单
• 能播放音乐的 CD 播放器组件
• 任务栏显示打开的"应用"

所有窗口逻辑都是我用原生 JavaScript 编写的。当点击最小化按钮，窗口真的会缩到任务栏；点击关闭，图标会消失但可以从桌面重新打开。

实用互动组件

除了视觉效果，我还添加了多个实用功能：

• 访客计数器：记录网站访问量
• 状态更新：实时显示我在做什么
• 实时聊天组件：访客可以留言互动
• 电子宠物（Tamagotchi）：访客可以喂养养成
• 网页环链接：发现其他有趣的独立网站

这些功能让网站不再是静态展示，而是一个有生命力的互动空间。

从 NeoCities 到 NecoWeb：选择合适的托管平台

为什么迁移？

最初我选择 NeoCities 托管网站——它是最知名的 Indie Web 平台。但后来发现几个问题：

• 默认允许 AI 抓取网站内容训练模型
• 不支持外部脚本，限制了功能扩展
• 付费会员功能性价比不高

NecoWeb 的优势

NecoWeb 虽然较新、社区较小，但优点明显：

• 明确禁止 AI 爬虫抓取用户内容
• 支持外部脚本和更灵活的功能
• 会员价格更合理，权限更实用

对于注重内容所有权和创作自由的创作者来说，NecoWeb 是更好的选择。如果你担心作品被 AI 无偿使用，这一点尤其重要。

💡 MasLogin 提示：如果你需要安全管理多个网站账号（比如同时运行多个独立网站），可以使用 MasLogin 反检测浏览器。它能为每个账号创建独立的浏览器环境，避免平台检测到关联，保护你的多账号运营安全。

持续优化：永无止境的完善之路

移动端适配

虽然个人网站主要面向桌面浏览，但我还是做了基础的响应式设计，确保手机用户也能正常访问内容。

组件化重构

为了方便后续维护，我将侧边栏、页眉、页脚等重复元素改造成可复用组件。现在修改一处，全站同步更新——大大提升了效率。

代码优化与清理

回顾早期代码，我发现很多冗余和不规范的写法。虽然功能正常，但作为学习项目，我决定逐步重构这些"技术债"。

重要的是：不要因为代码不完美就放弃发布。先让作品上线，再慢慢打磨——这才是真实的创作过程。

这段经历教会我什么？

重新爱上编程

本以为这个项目会让我对编程产生厌倦，结果恰恰相反。解决实际问题、看到成果立即呈现的过程，比任何教程都更能激发学习热情。

我甚至开始学习 Python，纯粹是因为享受编程的乐趣。

拥抱不完美的创作

在 AI 工具泛滥的今天，人类创作者最大的优势不是完美，而是真实与独特。我的网站代码混乱吗？是的。设计专业吗？不算。但它是100% 我自己做的，带着我的审美、想法和学习轨迹。

这种不完美，恰恰是最珍贵的价值。

数字空间的所有权

在自己的网站上，你不需要担心：

• 算法是否推荐你的内容
• 平台规则突然改变
• 账号被无故封禁
• 数据被用于训练 AI

这种完全掌控感，是任何社交平台都无法给予的。

给想要入门的你：实用建议

从简单开始

• 不要一上来就追求完美设计
• 先搭建基础框架，再逐步美化
• 学会使用开发者工具检查问题

利用现有资源

推荐资源：

• Sadgrl 的布局生成器：快速生成复古风格布局
• 98.css：Windows 98 风格组件
• NeoCities / NecoWeb：免费托管平台
• 各类复古元素素材网站

加入社区

独立网络社区非常友好，大家乐于分享经验和资源。浏览其他人的网站，不仅能获得灵感，还能通过"查看源代码"学习技巧。

保持耐心与热情

建站是马拉松，不是冲刺。我的网站从开始到基本成型，花了几个月时间。期间经历无数次想放弃的时刻，但每次突破一个技术难题，都会重新燃起动力。

结语：在算法时代保持人性

这个项目提醒我，互联网本该是人类表达的乐园，而非数据收割的农场。当我们把创作主动权交还给自己，会发现那些"不完美"的作品，反而最能打动人心。

如果你也厌倦了社交媒体的算法推荐，不妨试试搭建自己的小角落。代码不会？没关系，现在有大把教程和工具帮你入门。重要的是开始行动，在这个过程中学习、成长、享受创作的快乐。

欢迎访问我的网站（链接见评论区），在留言板留下你的足迹。也期待有一天，能在 Indie Web 的某个角落遇见你的作品。

---

常见问题解答

完全不懂编程可以搭建个人网站吗？

可以！虽然有一定学习曲线，但 HTML/CSS 是最容易入门的编程语言。网上有大量免费教程，像 FreeCodeCamp 提供系统化课程。即使每天只学 30 分钟，一个月内就能掌握基础。

NeoCities 和 NecoWeb 哪个更适合新手？

NeoCities 社区更大、资源更多，适合想要快速上手并获得反馈的新手。NecoWeb 更注重隐私保护和功能自由度，适合有一定基础且重视内容所有权的用户。两者都提供免费方案，可以先尝试 NeoCities，熟悉后再考虑迁移。

个人网站需要多少费用？

基础版完全免费：NeoCities/NecoWeb 提供免费托管，无需购买域名和服务器。如果想要自定义域名（如 yourname.com），每年约 10-15 美元。付费会员功能（如更大存储空间）通常每月 5 美元左右。

如何保护个人网站不被 AI 抓取？

可以采取以下措施：

• 在 robots.txt 文件中禁止爬虫访问
• 使用 NecoWeb 等默认阻止 AI 爬虫的平台
• 添加"禁止 AI 训练"的版权声明

虽然无法 100% 阻止，但能大幅降低被抓取的风险。