如何使用-AI-编写自己的网站

如何使用 AI 编写自己的网站

原文：towardsdatascience.com/how-to-code-your-own-website-with-ai/

WordPress 是一个常见的个人网站托管平台，在这里你可以展示你的作品集和其他关于自己的有用资源。在我转换之前，我已经使用 WordPress 大约 1 年了，我开始思考在使用 WordPress 时遇到的一些困难：

• 创建网站 - 实现我想要的设计很难

• 慢 - 在 WordPress 中创建和更新是慢的，因为它是一个拖放编辑器

• 缺乏灵活性 - 你必须使用预制的组件。或者，你也可以使用自定义 HTML 代码，但这样你仍然需要复制代码，这很慢

我接着想，使用像 Claude Code 或 Cursor 这样的代理编码工具来编程自己的网站是多么容易。

当我可以简单地提示 Claude Code 在 1 分钟内完成时，为什么我要花很多时间拖放组件，却仍然得不到我想要的设计呢？

那时我决定从托管 WordPress 切换到管理自己的网站，部署在 Vercel（免费）。本文的主要目的是向你展示如何做到这一点，以及为什么你实际上不需要任何编程经验来做这件事。

这张信息图表突出了本文的主要内容。我强烈建议将你的网站从拖放编辑器转换为使用编码代理自行编写的网站。这使得创建和更新网站都变得容易得多和快得多。图片由 Gemini 提供。

你可以在本文中找到我设计的我的网站。

为什么要自己编写网站代码

你应该开始编写自己的网站代码而不是使用像 WordPress 或 Webflow 这样的拖放编辑器的主要原因：

• 做起来超级简单 - 你实际上不需要接触任何代码

• 创建和更新你的网站要快得多

• 设计要好得多，因为编码代理擅长制作高质量的设计

这张图片展示了我网站上的 Speaking 页面。你可以看到顶部的导航栏和页面下面的具体内容。图片由作者提供。

因为更快，你也可以更快地迭代你的网站设计，这在尝试制作最佳网站时非常有用。

快速迭代速度是快速进步的关键

当然，也有人持相反意见，例如，WordPress 有很多有用的集成。然而，对我来说，优点远大于缺点。

只需输入一个提示，例如：

让网站上所有的按钮在悬停时淡入

这实际上在不到 1 分钟内更新了我的整个网站（包括克劳德代码更新代码并部署到 Vercel）。在 WordPress 中执行此相同操作可能至少需要 30 分钟。

现在想象一下，你每周需要做几次这样的更改。每次添加新内容到你的网站，或者当你意识到你想改变某些东西时。直接用编码代理在代码中更改它简单得多。

克劳德帮你自己编写网站

创建网站

希望你已经相信了为什么你应该开始自己编写网站（或者让克劳德为你编写），而不是使用拖放编辑器。现在，让我们来看看你该如何做到这一点。

这里的主要秘密是，考虑到编码代理在创建网站方面是多么出色，你实际上并不需要自己做太多。我是从之前的 WordPress 托管网站创建网站的。

---

我首先通过以下方式提示克劳德代码，其中eivindkjosbakken.com是我的 WordPress 网站：

Given my website here: eivindkjosbakken.com, copy this website exactly, 
by using React. Create a GitHub repository and push the code there

克劳德的代码随后创建了我之前网站的几乎完美复制品，我现在可以本地运行它。我检查了设计，并确保一切正常，大部分都是，除了几件小事，我将在下一节中介绍。

托管网站

我随后转向了网站托管。我使用 Vercel，因为它提供免费的网站部署，并且使用简单，可以从终端完全管理。从终端管理它非常方便，所以克劳德可以负责 Vercel 的部署和其他问题。

然而，在首次部署时，我必须在vercel.com上创建一个项目，并将我的代码库连接到该项目。你可以询问任何 LLM 如何做，他们将会给你一个准确的逐步指南，告诉你如何将你的代码连接到 Vercel。Vercel 还为你提供每天 100 次免费的部署，这应该绰绰有余。

连接到 Vercel 后，一切顺利，我可以通过网络访问我的网站。

更新网站

在复制我的 WordPress 网站后，我还发现了一些我想对我的网站进行的更新。例如，我想：

• 我的文章在鼠标悬停时应该突出显示，就像你在下面的图片中看到的那样

• 我想有一个更干净的导航栏，添加一些页面

• 我想在网站上托管我的电子书

这张图片突出显示了我对我的网站进行的设计改进之一。每次你在这个页面上悬停在一个文章上时，你都可以看到文章卡片被突出显示。图片由作者提供。

这些更改很快就能完成，我只需要向克劳德描述我的更改（即，使文章卡片在悬停时突出显示），它在一分钟内就完成了更改。使用拖放编辑器进行此更改可能需要更长的时间。

现在，只有您的想象力才能阻止您更新您的网站，实际上，您可以通过简单地提示您的编码代理来做出任何更改并快速迭代设计。

我必须解决的挑战

克劳德主要根据我网站的 URL 将我的旧 WordPress 网站重新创建为代码，但也有一些问题我必须解决，如下列所示：

• 我的 WordPress 有发送电子邮件给我的选项

• 我必须从旧网站上复制一些图像，例如，用于我的文章（手动过程）

• 社交链接的一些问题——找到正确的链接，并确保它们是高质量的

• WordPress 有一个邮件列表，现在我必须自己管理它

• 将域名从 WordPress 迁移到 NameCheap

对于电子邮件，我使用EmailJS来从我的网站上发送电子邮件。这项服务在从您的编码代理那里获得逐步指南后是免费且易于设置的。

对于图像复制，我简单地下载了图像到本地，将它们放入代码仓库，并告诉克劳德的代码在哪里可以找到这些图像。然后克劳德将这些图像复制到一个特定的图像文件夹中，以便它们可以在网站上托管。

对于社交链接，我只需要几次提示克劳德，附上社交链接的截图（例如，它们一度看起来非常模糊），克劳德就会通过三到四次提示和反馈解决问题。

对于邮件列表，我决定迁移到MailerLite，它提供了可以用于在您的网站上收集人们电子邮件订阅的嵌入式表单。您可以简单地将嵌入式表单提供给您的编码代理，它将将其嵌入到您的网站上。

迁移域名是最耗时的任务。我在 WordPress 购买了之前的域名，这使得过程有点复杂。然而，我让 Gemini 3 提供了一个逐步教程，它效果很好，我将域名转移到了我可以完全控制域名的 NameCheap。

结论

在这篇文章中，我讨论了如何将您的网站从像 WordPress 或 Webflow 这样的拖放编辑器迁移到您自己的托管网站。使用 Coding agents 和 Vercel 进行这个过程相对简单，它们随后为您提供更多对自己网站的掌控。此外，这还允许您更快地对网站进行迭代，并使更新网站变得简单。

当我们看到今天的编码代理工作得如此出色，以及您实际上不再需要编码经验来执行像更新网站设计这样的简单编程时，我相信我们正在完全远离拖放编辑器。

👉 我的免费资源

🚀 使用 LLMs 提升您的工程能力（免费 3 天电子邮件课程）

📚 获取我的免费视觉语言模型电子书

💻 我的视觉语言模型研讨会

👉 在社交平台上找到我：

📩 订阅我的通讯

🧑‍💻 联系我

🔗 领英

🐦 X / 推特

✍️ Medium