开发静态站点生成器工作流程

静态网站生成器：提升落地页工作流程的利器

核心要点：

• 静态网站生成器（如Hugo）提供诸多优势，包括完全控制内容和网页设计、速度提升和灵活性增强。与WordPress等内容管理系统每次访问者请求时才构建页面不同，静态网站生成器在创建或编辑新内容时构建网页。
• 迁移到静态网站生成器可以简化托管流程。Usersnap公司成功使用Netlify，它与GitHub配合良好，并提供简易的部署流程。
• 使用GitHub进行源代码管理，使用Codeship进行自动化测试，以及使用Usersnap进行手动测试，可以为静态网站创建强大的开发工作流程。这种工具组合允许高效的错误报告和自动化测试，确保高质量、无错误的环境。

本文中，Usersnap的技术营销人员Thomas Peham解释了静态网站生成器如何以及为什么可以帮助您的落地页工作流程。

没有人喜欢发现bug。更糟糕的是，没有人喜欢在购买数字产品时发现bug。这就是为什么，作为一个为数万用户提供基于网络的bug跟踪工具的公司，我们必须确保一个无bug的环境。随着我们网页数量的增加——以及因此而增加的代码行数——我们有动力寻找改进内部工作流程的方法。在本文中，我想向您介绍一下我们在过去几个月里为改变我们的工具堆栈以及我们生成和部署新落地页的方式所进行的旅程。

Usersnap.com的新工具堆栈

一旦我们决定改进usersnap.com落地页的内部工作流程，就需要回答很多问题。使用哪个内容管理系统？哪些软件工具？还有更多问题。我们最终使用Hugo作为usersnap.com的主要网站框架。这一决定导致团队的协作和开发方式发生了彻底的改变。

静态网站生成器的优势

那么Hugo在我们网站设置中扮演什么角色呢？Hugo是一个开源的静态网站生成器。静态网站生成器在您创建新内容或编辑内容时构建网页。相反，像WordPress这样的内容管理系统会在每次访问者请求时构建一个页面（尽管有各种可用的缓存技术）。选择像Hugo这样的静态网站生成器而不是像WordPress这样的系统有很多好处。而且这些优势不仅仅是关于性能。使用Hugo创建的静态网页使您可以100%控制您的内容和网页设计。如果您计划启动一个具有不同布局和内容类型的网站，那么考虑使用静态网站生成器而不是内容管理系统是有意义的，因为您会更快、更灵活。此外，您不需要了解特定CMS的所有特性，而只需要了解HTML和CSS的基础知识。Hugo最初是由Steve Francia作为副项目启动的。如今，Hugo社区拥有超过165位贡献者、35个主题和数千名用户。我们已经在我们的副项目bugtrackers.io中使用了Hugo，我们知道它也是我们想要用于usersnap.com的框架。

Netlify上的静态托管

在决定像WordPress这样的CMS带来的复杂性大于好处之后，我们开始寻找静态主机。要求很简单明了。静态主机必须与GitHub完美配合，我们需要能够设置一个公司中的每个人都能执行的部署流程。当Divshot（我们在bugtrackers.io的主机）在被Google收购后关闭时，我们切换到Netlify。我们对Netlify非常满意，因此选择它作为我们的静态落地页也是一个自然而简单的决定。

使用GitHub进行版本控制

由于我们已经在其他几个项目中使用了GitHub，我们知道GitHub将是我们源代码管理的地方。为我们的新落地页设置一个私有存储库并将GitHub与Netlify连接起来非常简单。

特别是对于像Hugo这样的静态网站生成器，此工作流程变得更加强大。使用命令hugo，您可以在Netlify上配置Hugo。您只需选择项目的构建方式以及哪个目录应公开托管。每当您将其推送到GitHub时，Netlify都会运行您的构建命令并部署结果。在我们的例子中，配置如下所示：

<code>Repository: usersnap/landing-pages
Branch: master

Build cmd: cd src && npm install &&node_modules/bower install && node_modules/brunch/bin/brunch 
build —production && cd .. && hugo

Public folder: /public</code>

（我们确实运行了用于JavaScript和CSS预处理的其他工具。）

使用Codeship和Usersnap进行测试

说到测试和质量保证，大多数人似乎都在忙于避免这个话题。;) 使用Codeship（用于自动化测试）和Usersnap（用于手动测试），我认为我们找到了完美的工具链，它允许我们在拥有自动化测试安全网的同时，随时报告bug。因此，在我们的代码托管在Netlify之前，它将由Codeship进行测试、准备和部署。通过这种方式，我们为静态网站设置了登台和生产环境。部署后，我们使用Usersnap（是的，我们使用自己的产品）进行手动测试和质量保证，或者只是讨论新想法或收集对任何内容的反馈。总而言之，开发工作流程如下所示：

为了让团队中的每个人都参与进来，我们将Codeship和Usersnap与Slack连接起来。新的推送会显示在专门的Slack频道中。此外，开发人员会在Slack中收到有关新错误报告和反馈的通知。

管理bug并完成工作

接收有关新bug和错误的警报和通知是一回事。对它们进行优先级排序、分配和修复是另一回事。我们的产品和开发团队依赖于产品路线图，我们称之为功能矩阵。此功能矩阵包括我们的团队正在处理的所有功能、bug修复和更改请求。除了功能矩阵之外，我们还使用一些内部工具来简化沟通和生活。我们喜欢将Slack称为我们的家，因为它使我们能够在整个公司中相互沟通。为了管理新项目并完成工作，我们依赖于产品管理工具Blossom，它使我们能够很好地了解更大的图景。例如，我们有一个针对我们产品的Blossom看板，它使我们能够很好地了解新产品需求的当前状态。我们还拥有所有静态网站项目的黑板。

下一步是什么？

作为一个不断发展的初创公司，我们不断思考如何提高效率的新方法。将新员工添加到我们的开发团队也要求我们重新思考我们的工作方式，并确定必须以不同方式完成的工作。通过我们的新工作流程，我们找到了一种在部署新落地页方面提高效率的方法。展望未来，我们认为DevOps对于发展中的公司来说正变得越来越重要。将基础设施外包给AWS或Azure等服务已成为构建和扩展软件的事实上的标准。因此，基础设施运营正变得不那么重要——尽管我们看到对资源、技能和工具的需求日益增长，这些资源、技能和工具用于处理您的软件运营和服务。幸运的是，已经有各种服务可以帮助您加快DevOps的速度。

(文章其余部分为FAQ，已在之前的回复中涵盖，此处省略重复内容)

以上是开发静态站点生成器工作流程的详细内容。更多信息请关注PHP中文网其他相关文章！