简介
Stackbit是一个允许你在Jamstack网站上进行协作的平台，使你的团队能够直观地编辑它们，而不是处理Markdown、git或编写任何代码。你可以利用Jamstack的优势，包括更好的性能、更严格的安全、更低的成本和更大的可扩展性，以及内联视觉编辑的便利。你可以从各种主题中选择，以帮助你开始，你以后可以定制这些主题。一旦你在视觉上设计了你的Jamstack网站并配置了任何可选的集成，你就可以将你的网站部署到云端。
在本教程中，你将创建一个基于Next.js的博客网站，编辑其设计和内容，并将其发布到DigitalOcean应用平台上。
前提条件
要完成本教程，你需要。
- 一个DigitalOcean账户
- 一个GitHub账户。如果你没有，你可以在GitHub的注册页面上创建一个。
- 在你的GitHub账户上安装DigitalOcean GitHub应用程序。该应用程序将您的Github账户与DigitalOcean应用平台集成，使您能够直接从Github上的代码创建应用程序和网站，并保持最新版本的部署。
第1步 - 创建一个新的Stackbit项目
要开始，你需要一个Stackbit账户，如果你还没有，请在浏览器中访问Stackbit来创建一个。在你创建了一个用户名和密码后，你会收到一封验证邮件。如果你被要求将你的账户连接到GitHub，你可以暂时跳过这一步；你将在以后连接它。
一旦你创建了一个账户，点击Build Your Project按钮或直接访问Stackbit来创建一个新项目。在这个过程的第一步，你会被提示选择一个主题来开始你的网站。Stackbit主题包括用于各种用途的基础设计。对于博客，你可以使用Fresh、Ampersand或Fjord主题，或者如果你想在博客的同时展示一个投资组合，你可以使用Exto或Agency主题。对于一个静态生成的店面，你可以从Planty开始。要看设计是什么样子的，以及一个主题所包含的页面，请点击每个主题下的实时预览按钮。
在本教程中，你将使用Ampersand主题来创建一个博客。向下滚动主题页面，选择Ampersand。
选定主题后，你还需要做一些设置，包括将你的账户连接到外部服务。
第二步 - 将你的GitHub账户连接到Stackbit上
除了默认的页面和设计之外，一个主题还包含一个静态网站生成器和一个无头CMS，如下图所示。静态网站生成器为你的网站创建最终的HTML和资产，而无头内容管理系统（CMS）定义了如何存储用于你的网站的内容。
创建初始网站的下一步是选择你的静态网站生成器和CMS。在本教程中，你可以为静态网站生成器保留NextJS的默认值，并使用基于git的CMS，将内容与网站设计一起保存在git中。
由于你使用的是基于git的CMS，你需要授权Stackbit在你的Github账户上创建一个新的 repo。点击GitHub标志下的连接按钮，按照步骤将Stackbit应用程序安装到GitHub。
连接GitHub账户后，连接按钮将被一个下拉菜单取代，让你配置GitHub连接，但你可以保留默认设置。接下来，你将连接你的DigitalOcean账户。
第3步 - 将你的DigitalOcean账户连接到Stackbit
当你发布你的网站时，它将被部署到DigitalOcean应用程序平台。点击DigitalOcean标志下面的连接按钮，在您的DigitalOcean账户上授权Stackbit。
点击连接按钮后，会出现一个弹出窗口，要求您在您的DigitalOcean账户上授权Stackbit。
现在你的DigitalOcean账户已经连接到Stackbit，勾选确认你已经配置了DigitalOcean GitHub应用程序。
随着所需账户的连接，你可以更进一步创建你的网站。
第4步 - 在Stackbit创建你的新网站
要创建你的网站，点击创建网站按钮。你会被带到一个页面，显示你的新网站正在建立和配置中，并且正在建立一个实时预览环境。
一旦网站完成，会出现一个标有Launch Stackbit的按钮，这将使你能够对你的网站进行修改。
第5步 - 视觉上设计和编辑你的网站
构建过程完成后，你将被带到实时预览环境，Stackbit Studio。在这里，你可以通过视觉编辑器对网站的布局、图片、内容和所有其他组件进行修改。
你的团队可以独立地合作撰写文章、上传图片，并为营销活动创建新的登陆页面。
当你把鼠标悬停在一个元素上时，光标会改变，表示你可以编辑它，像这样。
当该元素支持标记时，会出现一个编辑器。点击介绍部分，在编辑器中更新文本。
当你完成对文本的编辑后，点击 "保存 "按钮返回到预览中。这些变化会立即反映在版面上。
接下来，你将编辑出现在主页上的一个帖子。点击题为 "在山中行走的基本规则 "的帖子的图片。这将在预览和左边的元素列表中突出该元素。一个工具提示将出现。
点击 "编辑图像"按钮。它看起来像一支铅笔在画一条线。一个图像选择器会出现，上面有你的网站已经拥有的所有资产。在这种情况下，你将上传一个新的图像来使用。
你将用同样的图片替换叠加了Sammy的图片。从DigitalOcean下载图片并保存在本地。
点击上传按钮，会出现一个对话框，你可以选择图片；选择你刚下载的Sammy图片。一旦图片被上传，选择它并点击保存。你应该在实时预览中看到图片立即更新。
接下来，编辑帖子的标题。点击它，应该出现工具提示。用你自己的文字来更新。
一旦你完成了，点击阴影区域的任何地方，标题就会被保存。主页应该看起来像这样。
你也可以在他们自己的页面中编辑帖子。点击主页旁边的箭头，展开页面列表部分。
在这里你可以点击一个页面来编辑它，从模板中删除你不需要的页面，并创建新的页面。由于这个网站使用的是博客模板，所以帖子的内容被存储在/posts 文件夹中。如果你展开它，你可以看到所有的帖子，通过点击一个帖子，你可以进行编辑。展开/posts，点击basic-rules-for-walking-in-the-mountains 。
这将加载相应帖子的页面。
正如你所看到的，标题被更新了，但帖子页面上使用的图片是原来的图片（没有Sammy）。这是因为主题使用的帖子模型允许你为博客feed指定不同的图片，而不是单一的帖子。要看到你可以在这个页面上定制的所有属性，请使用左边的元素列表。
编辑列表中的元素将改变这个帖子，但编辑下面Stackbit Ampersand Theme列表中的元素将影响整个网站。接下来，改变帖子的日期。点击 "日期"元素。
将日期设置为今天的日期，并注意到在实时预览中，帖子已经被更新。
你也可以落到代码中，直接编辑（不需要本地设置）。在这种模式下，你可以使用Markdown编辑你的内容，也可以编辑主题元素。您将在代码编辑器内编辑版权声明，然后在网站的底部页脚添加一个DigitalOcean推荐徽章。
点击顶部菜单中的<>代码。你会看到一个分割视图，左边是代码编辑器，右边是实时预览。
代码编辑器是开放的，可以编辑你在右边预览的博客文章的内容的标记。你现在不打算编辑该文章。向下滚动实时预览，直到你能看到带有版权通知的页脚。点击该通知，它将被高亮显示，并会出现一个工具提示。
左边的按钮带你到显示页脚的代码，而右边的按钮带你到存储页脚内容的地方。点击内容按钮，看一下编辑器。现在文件config.json 已经打开。
用© Sammy 替换footer.content的内容。实时预览应该在一秒钟后更新以反映新的值。
现在点击左边的工具提示按钮，这将打开编辑器，进入渲染页脚的文件。
现在，在包含社交媒体链接的框中添加你的推荐徽章。在包含社交链接的div ，复制你的独特推荐徽章的HTML。在预览更新后，它应该是这样的。
继续对你的网站进行任何其他编辑。每当你做出改变，你的预览就会更新。当你准备好了，你将在下一步发布网站。
第6步 - 发布您的网站到DigitalOcean应用程序平台
一旦您对预览中的变化感到满意，点击Stackbit编辑器右上角的发布按钮，直接发布到App Platform。
您可以现在就发布整个网站，或者只发布一个页面，或者按计划发布。在这种情况下，保持默认设置，并点击发布。现在你将切换到DigitalOcean App Platform账户，那里已经创建了一个新的启动程序，目前正在进行构建和部署。
通过点击左上角项目名称旁边的齿轮图标，打开项目设置。然后点击 "连接的服务">"DigitalOcean"旁边的 "打开"按钮**。**
这将带你到你的项目在DigitalOcean的仪表板。如果部署仍在进行中，你应该看到一个进度条，并有一个链接到正在发生的构建日志。
如果构建已经完成，你也可以点击部署，这将显示你的网站的更新历史。
点击最近一次部署的细节，查看构建日志。
点击状态栏中的Live App，或标题下方的链接，查看您在App Platform上运行的新静态网站。
总结
在本教程中，你已经用Stackbit模板建立了一个新的网站，并将其部署到DigitalOcean的App平台。Stackbit的可视化创建、编辑和协作工具，结合App Platform的构建和部署功能，可以让一个Jamstack网站在短时间内准备好与所有不同的利益相关者共享并部署到云端。
