NotebookLM + Gemini = 网站构建器（免费且无需代码）

我们都知道Notebook LM在整理研究、提炼关键信息以及总结海量文档方面表现卓越。但如果这些洞见不应只停留在笔记本里呢？今天，我将展示如何将一堆密集复杂的研究资料——比如NASA关于阿尔忒弥斯任务的技术文档——通过Gemini转化为一个惊艳的交互式单页网站。我们将一步步搭建它、完善它，并真正免费发布到互联网上，全程无需编写任何代码。让我们开始吧。首先，我们需要建立我们的智慧库。

在笔记本中，我直接收集了来自NASA的几份厚重的PDF报告，内容涉及阿尔忒弥斯计划、任务概述、SLS火箭的工程规格以及科学载荷的详细信息。一旦Notebook LM消化并整理了这些海量数据，我们就会导出这些知识，并将其直接导入Gemini。我想指出的是，这是我正在探讨的主题，但这可以适用于任何内容。它可以是关于你的业务，或是together的不同主题。我们将要经历的过程对所有情况都适用。这就是大多数人常犯错误的地方。他们直接要求AI构建网站，结果导致布局混乱。

我们将把Gemini视为一位专业的用户体验设计师。我们需要一份蓝图。这将是提示词。如果你想重复使用，这个提示词会放在下面的描述中。我要求它扮演一位专业的用户体验设计师和教育技术专家。它将分析我即将上传的Notebook LM笔记本，并研究其设计等各个方面。你可以在下方更具体地查看提示词。现在，我只需点击加号，你就能看到Notebook LM。我需要将它与我正在讨论的笔记本连接起来。所以，我将选择NASA的太空发射系统，并与之连接。我将在专业版上完成这个操作。

我刚刚发现，这样分析这里的结构效果更好。我打算用mit来替代它。现在，我想指出，在这个提示中，我明确提出了我的需求。这样做总是有益的。如果你有想要重点关注的特定领域，务必在提示中说明。所以，往下看，注意Gemini是如何将用户体验的各个方面都规划出来的。它现在还没有开始编写代码，而是在理清流程，并确定页面上哪些部分需要进行深入的技术研究。如果我继续往下翻，你可以看到这里所有的不同部分。既然我们已经有了一个坚实的蓝图，我们就切换到Gemini的画布上。我们将把我们的蓝图交给它，并请它编写代码。

我在提示词中使用Tailwind CSS，因为它能即刻呈现那种时尚现代的外观。好的，这就是我们要用的提示词。现在我要切换到画布界面，直接粘贴这段内容。实际上，我确实借助了Gemini来编写这些提示词——我提供了颜色方案等所有需求，并且明确要求采用Tailwind CSS框架，这是关键部分。如果你也在用Gemini，同样可以请它协助撰写这类提示词。可以看到，系统将采用我们刚刚确认的结构蓝图，结合Tailwind CSS框架进行构建，其中还融入了多种配色方案，并对网站结构进行了简要说明。那么，我现在就准备提交这个方案了。

一旦完成，我无需点击预览。它已经自动跳转到顶部的预览界面。你可以看到代码就在这里。我们将复制这段代码，接下来我会展示如何将其应用到你的电脑上，甚至在我们完成这里的修改后，如何上传到网站。但现在你看，它已经处理了所有那些密集的NASA PDF文件等内容，并应用了用户体验设计，整个蓝图构建了一个功能齐全的着陆页，包含我们的深度分析和技术数据。这里的布局实际上相当美观。我想特别指出，你可以点击这里的分享按钮。如果我点击分享，你就可以复制这个链接。

我可以直接打开另一个标签页，粘贴进去，整个页面就会显示出来。注意看顶部标有Gemini。你可以看到我已经登录了我的账户。当我们把它移到自定义网站时，所有这些都会消失。你不会看到Gemini，它会在你完全功能的免费网站上。现在，我要跳回到这里的Gemini，我可以继续处理这个。所以，Canvas最棒的地方在于它是一个动态的工作空间。我们将在底部添加另一个部分，用于下载内容，比如教育者指南。我只需要告诉它就行。那么，让我们让它更具互动性。在页脚上方添加一个新部分，命名为“可下载任务指南”。

我这就把它发出去。你会看到我给出的提示会直接融入这个设计中。好的，我们往下翻看看。可以看到它添加交互式卡片的位置。但问题是，如果我点击这里，注意，没有任何反应。假设我确实想添加一个链接。我在我的Google云端硬盘里放了一份SLS技术规格的PDF文件，并且确保共享了这个文件夹。这样，任何有链接的人都能访问。所以，如果你要共享云端硬盘里的内容，请务必确认权限设置正确。我现在就直接复制这个链接。

那么，我这就回到这边，准备输入这个指令。具体内容是：更新太空发射系统的下载按钮，就是这里这个规格说明按钮。把它的href链接描述改成这个确切的URL。这个链接是我刚刚从这里复制过来的。我会保持所有现有的Tailwind CSS类、布局以及悬停动画完全不变。好了，我要发送这个指令了。现在，我们去测试一下。这就是我们修改的那个按钮。我也可以对其他每个按钮进行同样的操作。现在，如果我点击下载PDF，它确实会带我打开PDF文件。所以，我只是告诉它我想要修改什么，它提供了链接，现在PDF就能打开了。不过，这里我需要指出一点。

我要回到之前打开的那个窗口，就是浏览器里刚加载的这个页面。你看，上面这个链接末尾是3CD9，它和我刚才创建的那些实例不同。所以，如果你们还没完成，需要重新分享链接。如果我刷新这个页面，往下滚动时你会发现那些更新内容并不在这里。虽然这个页面还在，但更新没有同步。那么，我这就切换回去。如果你还在用T123操作，我们需要再次点击分享按钮，进入分享界面后它会生成新链接，我们复制这个链接即可。注意，这次的链接编号已经变了。

注意看，现在链接末尾显示的是A338。所以，如果我打开一个新页面，直接粘贴这个链接，你会发现，往下滚动就能看到我们做的更新。每次你进行更新时，链接都会改变。因此，如果你把链接放在某个地方，更新后一定要记得修改链接。这也是我想教你如何把它变成个人网站的原因之一，这样你就能控制链接。你仍然可以更新内容，只需将文件上传到新版本，而无需更改链接。所以，即使我点击这个，一切都能正常运作。现在，让我们进入下一步。好的，接下来我们要做的是。

我们要去复制代码。不过别担心，你不需要做任何编程工作。我只需要点击分享，然后选择复制内容。现在，我是在Windows系统上操作。如果你用的是Mac，你需要用文本编辑器来完成这个步骤，但我在用Windows。我准备打开记事本。记事本打开后，我会把刚才复制的内容粘贴进去。所以，我要按Ctrl+V。这就是刚刚编写那个网站的所有代码。现在，保存方式有特定要求。我要点击文件，选择另存为。在我的桌面上，有一个名为Artemis的文件夹，里面有个web文件夹，我就把文件放在那里。我要把它命名为index.html。这一点很重要。

确保你下拉并访问所有文件。然后我直接点击保存。好了。注意，我刚去了桌面。我进入了那个Artemis文件夹，我是说那个网页文件夹。这里就是我刚创建的index.html文件夹文件。注意，它会用我的默认浏览器（Chrome）打开。我只需双击这个文件。看，这在我的电脑上。这已经不在Gemini里了。如果我查看顶部，它没有显示Gemini。如果我往下滚动到底部，点击PDF，这个应该还能用。因为那只是指向我Google文档的链接。所以，我们这里有了这个。怎么让它上线呢？因为像这样单独放在我的桌面上，它什么也做不了。

如何分享链接呢？现在你可能在想，我们刚才为什么要那么做？为什么不直接使用Gemini内置的分享按钮？你当然可以那样做，但如果你想让它成为一个真正的资源中心，有几个重要原因让你不应该这么做。首先，那个分享链接会让你的网站困在Gemini的界面里，看起来不像一个独立的网站。其次，也是最重要的一点，如果你将来不小心删除了这个聊天记录，你的网站就会下线，所有链接都会失效。通过将代码导出到桌面，我们去除了AI的品牌标识。我们永久拥有这个文件，它变成了一个100%专业的独立网站。但现在让我们把它放到网上，这样我们就能分享链接了。

作为演示，我将使用Netlify Drop。它能让我直接把文件拖到这里进行在线展示。现在，你可以为它设置自定义域名。找个地方购买主机服务，把文件上传到线上，那样也能正常运行。但接下来我要做的是：点击这里的浏览按钮，从桌面文件夹里选取这个文件——我只有一个文件。点击上传，再确认上传。这样单个文件就会开始上传。我的项目已上线。这里我用的是免费版本。如果你在此注册免费账户，会发现能享有更多权限。

这仅仅是我要快速使用的密码。我会点击链接，然后粘贴密码。好了，我们开始吧。所以，这是基于右上角这个地址的在线版本。这个链接只在一小时内有效，但我只是想展示一下测试过程。这是一个功能齐全的网站，我们已经下载了。它不再连接到Gemini。你可以看到这里的一切都运行正常。就是这样。Netifi 刚刚生成了一个实时安全的公共链接。你可以把它放在电子邮件、Google Classroom 或任何其他地方。最重要的是，如果你明年想用新的有效载荷规范更新这个指南，你只需将更新文件夹拖回这里即可。

网站即时更新，而你的网址保持不变，没有失效链接。你刚刚从Notebook LM中提取了复杂的研究内容，使用Gemini构建了一个定制网站，无需编码知识便将其发布到网络上。感谢收看本周的《教师科技》。我们下次再见，带来更多科技技巧与教程。