以下内容是 Mike Neumegen 来自 CloudCannon 的赞助客座文章。本系列不仅是关于构建 Jekyll 网站，还将通过 CloudCannon 添加简单的可编辑性。
文章系列
在本系列中，我们将为一家名为 Coffee Cafe 的虚构咖啡馆构建一个网站。本教程将使用 CloudCannon 为网站添加内容管理系统。CloudCannon 是 Jekyll 和静态网站的内容管理系统。它允许您的团队/客户在线更新内容，并保持静态网站的优势。
我们将托管 Coffee Cafe 网站，定义可编辑区域，并与非开发人员职员共享。
设置
您看到的第一个屏幕是仪表板，您可以在其中创建和访问 CloudCannon 中的网站。创建一个网站，并将其命名为 Coffee Cafe。
要将文件添加到网站，请通过将我们从 上一教程 创建的网站拖放到浏览器中来上传网站。CloudCannon 还支持与 GitHub、Bitbucket 和 Dropbox 同步文件。
要 配置 Jekyll 网站 并告诉 CloudCannon 为我们的网站使用 Jekyll，我们需要一个配置文件。从右上角的“添加文件”菜单中创建一个空文件，并将其命名为 _config.yml。
当文件更改时，CloudCannon 将构建网站并将其推送到 *.cloudvent.net 地址。单击顶部的链接以查看您的实时 Coffee Cafe 网站。
编辑内容
非开发人员使用开发人员定义的可编辑区域在 CloudCannon 中更新内容。可编辑区域是带有 editable 类的 HTML 元素。要添加此类，请通过单击 index.html 文件来打开代码编辑器。
将 editable 类添加到您希望非开发人员更新的 HTML 元素。此示例使整个 div 可编辑
<div class="column third editable">
<div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg" alt="search" width="100" data-cms-original-src="/images/search.svg"></div>
<h3>Improve</h3>
Our customers rank up to 20% higher on their targeted keywords
</div>此示例将编辑限制在 div 内部的某些元素
<div class="column third">
<div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg" alt="search" width="100" data-cms-original-src="/images/search.svg"></div>
<h3 class="editable">Improve</h3>
Our customers rank up to 20% higher on their targeted keywords
</div>保存更改，并打开右上角的可视编辑器，以查看可编辑区域的实际效果。在可视编辑器中，黄色框内的内容可以进行在线更新。
与非开发人员共享
与其他工作人员共享网站，可以让他们协作处理内容。转到“网站设置”->“共享”，输入同事的电子邮件地址，将权限级别设置为“非开发人员”，然后点击“添加共享”。
CloudCannon 将发送一封电子邮件邀请他们编辑网站。
非开发人员登录，打开 Coffee Cafe 网站，转到可视编辑器，并更新可编辑区域。
他们可以在右上角的“设置”按钮中访问的“设置”面板中更新页面标题和其他元数据。 CloudCannon 文档 提供了详细的选项来控制前置信息界面。
博客
可以通过转到左侧边栏上的“集合”->“帖子”来访问博客。
要创建一个新的草稿帖子，请使用右上角的“添加文件”菜单。新的草稿和现有的博客帖子将在易于使用的编辑器中打开。有一些选项用于保存更改和发布草稿。
状态
“状态”页面上有一些建议、状态和网站更改的历史记录。
工作流
本地工作非常适合开发人员，因为您可以使用现有的工具。通过将您的网站从 GitHub 或 Bitbucket 与 CloudCannon 同步来保留此工作流，并使用 git push 发布更改。CloudCannon 将获取这些更改，构建网站并将其发布到线上。当非开发人员在 CloudCannon 中更新内容时，更改将发布到线上并提交到存储库。
您可以使用 Git 分支拥有多个环境（例如，登台环境和生产环境）。为每个环境设置一个 Git 分支，并为每个分支创建一个 CloudCannon 网站。在登台环境中工作，然后将更改合并到生产环境中，所有操作都在 CloudCannon 中完成。
我们的可编辑网站
Coffee Cafe 网站现在已经上线，并且可以使用 CloudCannon 进行编辑。虚构的工作人员可以自己更新内容，无需代码。开发人员可以使用他们喜欢的代码编辑器在本地工作，并使用 Git 推送更改。
CloudCannon 如何存储可编辑内容？
您好！
所有内容都将保存回原始源代码。这意味着所有内容更改都将推送到 GitHub、Bitbucket 或 Dropbox（如果您已将它们连接）。
Mike
我认为显示 CloudCannon 生成的文件以及转发到 Jekyll 编译器中的文件将有助于读者更好地理解正在发生的事情，并对 CloudCannon 自动化的内容有一个更好的认识。
目前第 2 部分文章的写作方式与 Jekyll 无关（除了 CloudCannon 恰好使用 Jekyll 在幕后）。
我认为 CloudCannon 并非“在幕后使用 Jekyll”，而是 CloudCannon 为您的 Jekyll 网站提供了 UI。不会生成任何魔法文件，它只是提供了一种方法来编辑博客的 Markdown 文件或 HTML 文件。从源代码的角度来看，它与普通的 Jekyll 网站完全相同。CloudCannon 并非在自动执行它，而是允许非技术用户更新 Jekyll 网站。
值得一提的是完全免费的替代方案 prose.io，几年前由优秀的 DevelopmentSeed 开源。我将它用于所有 Jekyll 项目。
这个 Jekyll 看起来很酷。在这系列文章之后，我发现关于这个 Jekyll 内容管理系统的一些重要有用之处。它与其他企业级 Web 内容管理服务非常相似，最近这些服务为前端和后端开发人员提供了不同的编辑器。Jekyll CMS 提供了工具来设计可扩展且安全的静态网站，它利用 CloudCannon 自动优化和通过 CDN 将页面分布到不同的区域。易于使用的界面和一定程度的扩展能力使 Jekyll 成为静态网站的一个不错的 CMS，然而，它很难容纳复杂的网站。对于管理复杂的网站，请使用 Sitefinity CMS、WordPress、Drupal 或 Umbraco。