如何用AI工具快速搭建一个个人网站？

过去搭建一个个人网站，我们需要去学习搭建网站会用到的 3 大件（HTML+CSS+JavaScript）、研究用哪种网站框架好，或是外包给专业的技术人员/工程师来做，而现在有了 AI 之后，一切都变了：

只要你能向 AI 说清自己的需求，它分分钟可以生成帮你生成一个可在真实生产环境中使用的网站。

下图是使用 boardmix博思白板内置的 boardmix AI 生成网站首页代码的示例：

借助 boardmix AI， 即便是不懂技术的小白，也能用自然语言（即日常使用的大白话）与 AI 进行对话，让 AI 根据我们的需求，快速搭建出一个可在生产环境中使用的网站。

如果你也有搭建网站的想法，但又想以尽可能低的成本将想法付诸实现，不妨跟着下面的教程，使用 boardmix AI 强大的代码生成功能，搭建一个令人印象深刻的个人网站。

使用 boardmix AI 创建的网站效果

在使用 boardmix AI 创建网站之前，我们先来看一下使用 boardmix AI 创建的网站效果，下图是刚打开网站看到的页面。

注：我们将 boardmix AI 创建的网页通过 Netlify 进行部署，想查看网页效果的朋友，可以在浏览器中打开部署的链接：

使用boardmix AI创建网页示例，戳此查看！

往下滑动页面，可以看到公司简介和提供的服务

继续向下滚动，则是公司团队介绍、联系我们、友情链接、社媒平台和版权声明的内容。

使用 boardmix AI 创建网站会用到的工具

在创建网站之前，我们先来了解一下基于 boardmix AI 搭建网站会用到的 4 类工具：

• 代码生成工具

• 网站开发工具

• 代码托管平台

• 网站部署工具

其中网站开发和网站部署工具有比较多的选择，你可以根据自己的喜好选择任意一款工具，这里我们选择的网站开发工具是 VS Code，网站部署工具是 Netlify。

*使用boardmix AI创建网站所需的工具-Made by boardmix博思白板

下面以创建一个公司的官网为例，简要介绍基于 boardmix AI 创建网站的过程：

使用 boardmix AI 生成网站代码

在电脑浏览器打开 boardmix博思白板的官网，进入 boardmix 工作台，点击「新建白板文件」，创建一个白板。

在新建的白板文件中，点击左上角的 AI 助手，打开下图所示的 AI 助手面板，点击面板的输入框，与 boardmix AI 开启互动问答。

使用 boardmix AI 生成网站代码之前，我们可以先规划一下网站首页包含的内容，或是让 boardmix AI 给我们提供参考：

有了网站首页的初步想法之后，就可以向 boardmix AI 发起请求：

Step1：生成一个公司网站的首页html，页面内容必须包含公司简介、提供的服务、团队介绍、联系我们、友情链接、社媒平台、版权声明内容，其中公司简介、团队介绍要包含有图片，联系我们是表单的形式，供用户提交信息，社媒平台必须带有微博、知乎、小红书、B站平台的logo图片，要求给页面设置CSS样式，使用Tailwind CSS 2.2.16版本，并且网页的每个部分，例如导航栏、公司简介、服务、团队介绍、联系我们，要有清晰的区分，能够给用户更好的体验

输入指令之后，boardmix AI 就会生成整个网页的框架，点击面板右下角的「添加至画布」，将 AI 生成的代码插入白板中。

选中文本框中的所有代码并复制，把代码粘贴到代码编辑器 VS Code 中，将文件保存为 index.html 文件，在浏览器中打开这个文件，就能预览网页的效果。

下图是 boardmix AI 初次生成的 html 代码在浏览器中渲染的效果，已经按照我们的要求，给出了网站的整体框架。

页面中显示为裂开的图片，是因为生成的代码仅提供了占位符，没有与之对应的图片，我们可以将缺失的图片替换为自己喜欢的图片。

Step 2：替换网页中丢失的图片

在 index.html 文件的同一路径下，创建一个 images 文件夹，用来存放网页会用到的所有图片，如网站的 logo 图标、社媒平台的 logo、团队成员图片等。

准备好图片后，逐一将网页代码中的 src 属性值更改为 images 文件夹中对应的图片，需要注意的是，src 属性值最前面需要带有文件夹的名称和一个斜杆，如下图右侧的 images/ ，后面是图片的名称和后缀名。

修改代码之后保存并刷新页面，原本丢失的图片就能正常显示了。

在现有网站内容的基础上，如果我们想进一步丰富页面的内容，譬如在导航栏和公司简介之间添加一个区域，用于展示公司的愿景、价值观或者产品的 Slogan，我们可以接着向 boardmix AI 提需求：

Step 3：我想在导航和公司简介之间添加一个类名为header的区域，这个区域带有一张宽度为100%的图片，同时图片最上方有一行文本，写着公司的愿景，麻烦你帮我写一下这部分的html代码，同时别忘了使用Tailwind CSS进行布局

---

boardmix AI 会在回答中返回对应的代码片段，点击代码右上角的「复制代码」，将代码复制到剪贴板。

回到代码编辑器中，将代码粘贴到导航栏和公司简介之间，保存修改后的代码，刷新浏览器页面。

修改后的网页效果如下，但这里还有一个小问题，公司愿景的文本与图片是上下排列的关系，不是我们想象中悬浮在图片上方的状态，因此我们还要调整一下文本和图片的布局。

回到 boardmix博思白板，继续与 boardmix AI 对话，让它进一步完善现有的代码：

Step 4：文本位于p标签中，与图片是上下换行的关系，我想让文本悬浮在图片的正中间，而不是换行的关系，这得怎么修改代码呢？

boardmix AI 会返回修改后的代码，同样点击右上角的「复制代码」，替换前面复制到编辑器中的代码，经过调整之后，文本就会悬浮在图片上方。

除了调整文本与图片的相对位置，文本颜色默认为黑色，与下方的图片对比不够明显，因此我们还可以调整文本的颜色。

Step 5：文本的颜色是黑色的，我该如何修改Tailwind CSS的类名，把文本变为白色的呢？

boardmix AI 会返回将文本设置为白色的代码，并且会在代码下方说明代码进行的变更，方便我们快速定位到相应的位置，在代码编辑器中作出修改。

到这里，我们可以算是初步完成了一个静态网页的制作，如果你还想进一步完善，可以考虑进行如下操作：

• 文本下方的图片设置为鼠标不可选中的状态

• 降低图片的亮度

• 团队成员的矩形照片裁剪为圆形

• ……

简言之，只要是你想到的，或是从别的网站上看到的效果，都可以对着 boardmix AI 描述自己的需求，让它生成相应的代码，共同完善最终的网页效果。

将网页和图片上传到 GitHub

编写好一个网页后，我们可以尝试将网页和图片上传到托管平台 GitHub，再结合后面的部署操作，将只能在本地打开的网页发布为人人可访问的网页。

将网页和图片上传到 GitHub，可遵循下面的操作：

• 创建一个 GitHub 账户（如果还没有的话），访问 GitHub 首页并注册。

• 在 GitHub 上创建一个新的仓库。点击右上角的 + 图标，然后选择 New repository。为仓库起一个名称，例如 “create_website_with_boardmix_ai"，设置为公开仓库。你可以勾选 Initialize this repository with a README，以便在仓库中创建一个自述文件。

• 最后点击 Create repository，完成 GitHub 仓库的创建。

将本地文件上传到 GitHub，主要有 2 种方式，一种是使用 Git 命令行，另一种是使用 GitHub 页面的上传功能，方便起见，这里选择后一种方式：

• 在 GitHub 仓库页面上，点击 Add file 按钮，然后选择 Upload files。

• 将你的 HTML 文件和图片拖放到上传区域，或者点击 choose your files，从本地电脑中选择文件。

• 输入提交信息，然后点击 Commit changes，确认上传文件。

*上传到GitHub仓库的网页和图片文件

部署发布网页 demo

最后来到部署发布网页的步骤，我们这里选择部署工具是 Netlify，具体步骤如下：

• 在浏览器中打开 Netlify 首页，创建一个账户：点击右上角的 Sign Up 按钮，然后选择使用 GitHub 账户进行注册，授权 Netlify 访问你的 GitHub 账户。

• 首次登录后，你将看到 Netlify 的仪表盘。点击 Import Project 按钮开始导入 GitHub 仓库。

• 选择仓库来源：点击 Import from GitHub，然后在弹出的对话框中选择你想要部署的 GitHub 仓库。如果该仓库不在列表中，你可能需要在 GitHub 中为 Netlify 授权访问该仓库。

• 配置项目：在 Configure Your Project 页面上，确认项目名称和仓库，其他选项无需修改，点击下方的 Deploy 即可。

• 部署项目：Netlify 将自动部署你的项目，并为其分配一个 URL，例如 create-website-with-boardmix-ai.netlify.app。稍等片刻，你的项目将完成部署，可以通过分配的 URL 访问。

至此，你已经成功将 GitHub 仓库部署到了 Netlify 平台。如果你把 URL 分享给身边的小伙伴，他们打开就能看到你用 boardmix AI 创建的网站。每当你向 GitHub 仓库推送新的更改时，Netlify 会自动为你的项目重新部署。

写在最后

在本文中，我们详细介绍了如何使用 boardmix AI 这个强大的工具来创建一个网站。借助这一 AI 工具，即便是从未接触编程的小白，也能用自己每天在说的大白话（即自然语言），让 AI 生成构建网页或互联网产品所需的编程语言，想法从提出到真正落地，用 boardmix AI 足矣，省时又省力。

现在，相信你已经看到了 boardmix AI 的潜力，希望这篇文章能激发你的创造力，开始尝试使用 boardmix AI 来实现自己各种天马行空的想法，一起共同探索 boardmix AI 的无限可能！

以上，希望本文的分享，能够帮到你。 我是效率君，那我们下次再见！