我们是如何仅用 7 欧元，在 3 天内搭建出一个 1% 的网站的？

由于一些我们无法控制的因素，Aria、Tage和我被迫在两周内推出一家基于ChatGPT的聊天机器人网站，并使其成功盈利。风险极大，但有了朋友们的帮助，我们一定能成功。

失败绝不是我们的选择，所以我们坚信我们一定能成功——尤其要感谢那些在过去几天里一直陪伴在我们身边、支持我们的好朋友们。谢谢你们，这对我们意义非凡。“团队合作与友谊”这两个词在过去的日子里赋予了我们新的意义，这种意义或许是大多数人一生都无法体会的。

超越无限！

什么是1%网站？

那么，什么是“1%网站”呢？它指的是排名前1%的网站。也就是说，如果你随机挑选100个网站，包括我们的网站在内，那么根据中立的指标，我们的网站将是表现最好的。这可能不是一个科学的定义，我也无法证明我们确实位列前1%——但我还是有足够的信心公开声明这一点。所以，对于感兴趣的人，我在这里解释一下我们是如何做到的。

技术

我对WordPress真是又爱又恨。对于非技术人员来说，它是个很棒的工具。然而，对于一个从事 Web 相关技术 25 年的软件开发人员来说，它就像给赛车装上一个打开的降落伞。它生成的标记远非最佳，性能糟糕透顶，而添加Elementor只会雪上加霜。WordPress，尤其是与 Elementor 结合使用时，简直就是一锅“地狱般的标签汤”。几乎所有 CMS 系统或多或少都存在这个问题。不过，如果你不是软件开发人员，那就用 WordPress 吧——如果你需要搭建一个网站，它确实是一个很棒的无代码和低代码工具。但对我们来说，它完全“不适用”，所以我们选择完全基于Magic Cloud 和 Hyperlambda构建我们的网站。

这意味着每一个 HTML 标签都是使用 Visual Studio Code 手动添加的，如果您点击此页面的“查看页面源代码”即可了解这一点。这使我们能够完全控制浏览器渲染的内容，从而使网站的 HTML 质量提升了 1000 倍。由于 Hyperlambda 网站允许我们创建“可重用组件”，最终代码仍然 100% 符合“DRY”（Don't Repeat Yourself，不要重复自己）原则。

Hyperlambda 网站的基础知识

Hyperlambda 网站允许您在 Hyperlambda 中声明代码隐藏文件。例如，如果您有一个名为“foo.html”的 HTML 文件，您可以在同一文件夹中创建一个名为“foo.hl”的 Hyperlambda 文件，它将作为代码隐藏文件，允许您将 lambda 表达式动态地注入到 HTML 中，并用 lambda 表达式的返回值替换 HTML 中的相应内容。您可以点击此处阅读更多关于 Hyperlambda 网站的信息。滚动到页面底部即可找到相关部分。

Hyperlambda 网站让我们能够完全控制 HTML，同时还提供所有合理的默认设置，允许我们在需要时进行自定义。所谓“合理的默认设置”，指的是诸如静态资源的 HTTP 缓存等。

我们网站的博客部分与Jekyll类似，也就是说，博客内容本质上就是 Markdown 文件，只不过将 Markdown 解析为 HTML 的解析器（双关语！）是 Hyperlambda，而不是 Jekyll。如果您不喜欢 Hyperlambda，Jekyll 是一个非常棒的替代方案。

除了以上内容，我们还有一个私有的 GitHub 代码库，其中实现了 CI/CD 流水线，以 GitHub Action 的形式呈现。这意味着每次我向 GitHub 上我们网站的 master 分支推送代码时，都会自动部署一个新版本。为了说明这一点，请注意，我实际上是用 VSCode 来写这篇博客的…… ;)

Web框架

我们一开始完全没有使用任何模板。事实上，这个网站是从零开始手工设计的，我们唯一使用的“框架”是Bootstrap。除了 Bootstrap 之外，每一行代码、CSS 和 HTML 都是我们手工编写的，而且大部分都是用原生 JavaScript 编写的。所有动画都是纯 CSS 动画，同样也是手工编写的，甚至连联系表单的 HTTP POST 请求也是用 JavaScriptfetch函数手动创建的。如果您对细节感兴趣，我在下面提供了相关代码供您参考。

  function sendEmail(email, name, content, recaptcha_response) {
    fetch('https://ainiro.io/magic/modules/bazar/contact-us', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email,
        name,
        content,
        recaptcha_response
      })
    })
      .then(response => response.json())
      .then(response => {
        if (!response?.result === 'success') {
          throw new Error("Bad request")
        }
      })
      .then(() => {
        const contact_us = document.getElementById('contact_us');
        contact_us.className = "row fade-out";
        const thank_you = document.getElementById('thank_you');
        thank_you.className = 'row fade-in thank_you';
      }).catch((err) => {
        console.log(err);
        alert('We could not send your email :/');
      });
  }

我承认这有点简单，但它能完成任务。提交表单的界面如下所示，以确保我们支持 reCAPTCHA（版本 3）。

  function onSubmit(e) {
    grecaptcha.ready(function () {
      grecaptcha
        .execute('YOUR_RECAPTCHA_TOKEN_HERE', { action: 'submit' })
        .then(function (token) {
          const msg = 'Website; ' + document.getElementById('website').value + '\r\n\r\nMessage;\r\n' + document.getElementById('info').value;
          sendEmail(
            document.getElementById('email').value,
            document.getElementById('name').value,
            msg,
            token
          );
        });
    });
    e.preventDefault();
    return false;
  }

这就是我们页面中几乎所有的 JavaScript 代码。如果您需要一个“联系我们”表单，当然可以随意使用上面的代码。

ChatGPT聊天机器人

当然，经验丰富的软件开发者肯定会质疑并问：“你是怎么让聊天机器人运行起来的？”这时我可以回答说，这就是我让聊天机器人运行起来的方法。它只是一个简单的 JavaScript 包含标签，而且是 Magic Cloud 的一个集成组件。所以，我完全没费什么力就让网站上出现了一个基于 ChatGPT 的聊天机器人。我怀疑这里面可能蕴含着某种“非我发明”的教训，但我还是留给读者自己去发现吧……

SEO指标

如果你的网站不在谷歌搜索结果页面 (SERP) 上，那它就如同不存在一样。我们使用Seobility来衡量 SEO 效果。这是一个非常棒的工具，可以让你根据关键词、标题、描述等指标来评估网站的表现。只需将你的网站输入 Seobility，5 分钟后它就会告诉你所有做得不好的地方，并提供改进建议。以下是我们网站根据 Seobility 的评估结果。

我需要强调的是，我之前花了几个月的时间优化 WordPress 网站，却连上述分数都达不到。原因在于WordPress 中“太多花里胡哨的东西” ，本意是“让一切变得简单”，结果却导致控制力下降、HTML 代码冗余增多，网站响应速度也变差。我承认这个网站并不完美，但 84% 的分数轻松超越了 99% 的网站。更重要的是，它只用了 3 天就搭建完成，而且我们未来还会继续优化它。

页面速度

这确实“有点复杂”。我们的网站本身性能卓越。然而，谷歌的 reCAPTCHA JavaScript 库（说得委婉点）实在“差强人意”。如果有人有其他替代方案的建议，欢迎在评论区留言。讽刺的是，谷歌一方面使用页面速度指标来衡量“网站质量”，从而提升搜索引擎排名，另一方面却开发了一个会阻塞 3 秒并多次下载自身的验证码库。我并非第一个指出这一点的人。但遗憾的是，我们必须使用验证码来阻止机器人发送邮件，这让我们陷入了进退两难的境地。

我甚至尝试过手动优化 reCAPTCHA 的 JavaScript 库，您可以检查我们着陆页上的 JavaScript 代码来查看——但彻底解决这个问题根本不可能，或者至少我不知道该怎么做。我们从PageSpeed Insights中得到的 98% 的惩罚都来自 reCAPTCHA 和 Google Tag Manager。真是讽刺…… :/

即使在我的 iPhone 上没有 Wi-Fi，通过 5G 网络，网站也能在 3 秒内加载完毕。请在评论区告诉我们它在您的手机上的加载速度如何。如果没有 reCAPTCHA 和 Google Tag Manager，加载时间会缩短到 0.5 秒。最后，我们注册了一个CloudFlare账户，这让我们能够通过其强大的 CDN 服务显著提升页面加载速度。目前我们仍在使用免费版本，所以还没有启用文档边缘缓存——但一两周内我们应该也会实现这个功能。

结论

总之，我们就是这样在三天内，用7欧元的预算，打造了一个访问量占比1%的网站，在各项中性指标上都超过了99%的网站。不过，再给我们三个月时间，访问量占比可能就只有0.1%了。

最后，我必须对所有人表示感谢。所有的图片都是Tage创作的，他不仅制作出了精美的图片，还大幅缩小了图片尺寸，这对于SEO和页面加载速度指标来说至关重要，我认为他做得非常出色。当然，Aria也提供了很多帮助，包括质量保证测试、文字润色等等。最后，DALL-E创作了Tage没有参与制作的图片，为整个项目画上了完美的句号。

利用以下技术，我们仅用 3 天就创建了一个 1% 的网站，每月花费不超过 7 欧元。

• Hyperlambda 和 Magic Cloud
• 达尔-E
• SEOB 能力
• 页面速度洞察
• CloudFlare
• Visual Studio Code
• Adobe Illustrator（Tage 的工具）

最后， UpCloud的服务器每月只需 7 欧元——UpCloud 是一家非常棒的云服务提供商，我与他们合作多年。

总拥有成本

每月7欧元，3个人工作3天，我们就拥有了一个“1%网站”。下面是最终成果的截图，包括与聊天机器人的基本交互。在我看来，7美元就能做到这样，相当不错了^_^

嘘，如果您需要像我们这样基于 ChatGPT 的网站聊天机器人，欢迎联系我们获取报价。我们也正在寻找合作伙伴来帮助我们销售产品，如果您有兴趣，请联系我们。