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

静态站点生成

In this article, Thomas Peham, a tech marketer at Usersnap, explains how and why static site generators can help with your landing page workflow.

在这篇文章中，托马斯Peham，在高科技营销Usersnap ，解释如何以及为什么静态的网站发生器可与您的目标网页的工作流程帮助。

Nobody likes finding bugs. Even worse, no one enjoys finding bugs while shopping for digital products. That is why, as a company providing a web-based bug tracking tool to tens of thousands of users, we have to ensure a bug-free environment.

没有人喜欢发现错误。 更糟糕的是，没有人喜欢在购买数字产品时发现错误。 因此，作为向成千上万的用户提供基于Web的错误跟踪工具的公司，我们必须确保没有错误的环境 。

With our increasing number of web pages – and therefore increasing lines of code – we were motivated to look for ways to improve our internal workflow.

随着网页数量的增加(以及代码行的增加)，我们被激励寻找改善内部工作流程的方法。

In this article, I’d like to give you some insights into the journey we undertook in the last couple of months to change our stack of tools and the way we produce and deploy new landing pages.

在本文中，我想向您介绍我们在过去几个月中进行的更改工具堆栈的过程，以及我们生产和部署新着陆页的方式。

usersnap.com的新工具堆栈 (New Tool Stack for usersnap.com)

Once we decided to improve our internal workflow for the landing pages on usersnap.com, there were a lot of questions that needed to be answered. Which content management system to use? Which software tools? And many more questions.

一旦我们决定改善usersnap.com上的着陆页的内部工作流程，便有很多问题需要回答。 使用哪个内容管理系统？ 哪些软件工具？ 还有更多问题。

We ended up using Hugo as our main website framework for usersnap.com. This decision has resulted in a completely new way of collaboration and development for the team.

我们最终将Hugo用作usersnap.com的主要网站框架。 这一决定为团队带来了全新的协作与发展方式。

静态站点生成器的好处 (The Benefits of a Static Site Generator)

So what role does Hugo play in our website setup? Hugo is an open source static site generator. Static site generators build a web page at the moment you’re creating new content or editing it.

那么，雨果在我们的网站设置中扮演什么角色？ Hugo是一个开源静态站点生成器 。 静态网站生成器会在您创建新内容或对其进行编辑时立即构建一个网页。

In contrast, content management systems like WordPress build a page every time a visitor requests one (although there are various caching techniques available).

相反，诸如WordPress之类的内容管理系统会在访问者每次请求一个页面时建立一个页面(尽管有各种缓存技术可用)。

There are a lot of benefits of choosing a static site generator like Hugo over a system like WordPress. And those advantages are not only about performance.

选择像Hugo这样的静态站点生成器而不是像WordPress这样的系统有很多好处。 这些优势不仅与性能有关。

Static web pages created with Hugo give you 100% control over your content and web design. If you’re planning on launching a website with different kinds of layouts and content, it would make sense to consider a static site generator over a content management system, as you’ll be faster and more flexible. Moreover, you don’t need to understand all the peculiarities of a given CMS, but would only need to know the basics of HTML and CSS.

使用Hugo创建的静态网页可让您100％控制您的内容和网页设计。 如果您打算启动具有不同布局和内容的网站，则可以考虑在内容管理系统上使用静态网站生成器，因为这样可以更快，更灵活。 而且，您不需要了解给定CMS的所有特性，而只需要了解HTML和CSS的基础知识。

Originally, Hugo started as a side project by Steve Francia. Today, the Hugo community has more than 165 contributors, 35 themes and thousands of users.

最初，雨果是史蒂夫·弗朗西亚 ( Steve Francia)的附带项目。 如今，雨果社区已拥有165个以上的贡献者，35个主题和数千个用户。

Having already used Hugo for our side project bugtrackers.io, we knew it was the framework we wanted to use for usersnap.com as well.

在已经将Hugo用于我们的辅助项目bugtrackers.io之后 ，我们知道这也是我们也想用于usersnap.com的框架。

Netlify上的静态主机 (Static Hosting on Netlify)

After deciding that a CMS like WordPress adds more complexity than benefits, our search for a static hoster began. The requirements were plain and clear. The static hoster had to work great with GitHub, and we needed to be able to set up a deploy process that everyone in our company would be able to perform.

在确定像WordPress这样的CMS增加了更多的复杂性而不是好处之后，我们开始寻找静态托管者。 要求是明确的。 静态托管商必须与GitHub紧密协作，并且我们需要能够建立一个部署过程，我们公司中的每个人都可以执行。

When Divshot (our host for bugtrackers.io) closed down after being acquired by Google, we switched to Netlify. We were quite satisfied with Netlify, so it was a natural and easy decision to choose it for our static landing pages as well.

当Divshot(我们的bugtrackers.io的托管人)被Google收购后关闭时，我们切换到了Netlify 。 我们对Netlify感到非常满意，因此为我们的静态目标网页选择它也是一个自然而容易的决定。

使用GitHub进行版本控制 (Version Control with GitHub)

Having GitHub already in place for a couple of other projects, we knew that GitHub would be the place for our source code management. Setting up a private repository for our new landing pages and connecting GitHub with Netlify was pretty straightforward.

已有其他几个项目的GitHub，我们知道GitHub将成为我们的源代码管理的地方。 为我们的新登录页面设置私有存储库，并将GitHub与Netlify连接起来非常简单。

Especially with a static site generator like Hugo, this workflow becomes even more powerful.

特别是对于像Hugo这样的静态网站生成器，此工作流程将变得更加强大。

With the command hugo you configure Hugo on Netlify. You simply choose how your project should be built, and which directory should be hosted publicly. 

使用hugo命令，您可以在Netlify上配置Hugo。 您只需选择应该如何构建项目以及应该公开托管哪个目录。

Netlify will run your build command and deploy the result whenever you push it to GitHub. 

每当您将其推送到GitHub时，Netlify都会运行您的构建命令并部署结果。

In our case, the configuration look like this:

在我们的例子中，配置如下所示：

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

(We do run additional tools for JavaScript and CSS preprocessing.)

(我们确实为JavaScript和CSS预处理运行其他工具。)

使用Codeship和Usersnap进行测试 (Testing with Codeship and Usersnap)

When it comes to testing and QA, most people seem to be busy avoiding that topic. ;)

对于测试和质量检查，大多数人似乎都在忙于避免该话题。 ;)

With Codeship (for automated tests) and Usersnap (for manual tests), I think we’ve found the perfect tool chain that allows us to report bugs on the fly while having a safety net with automated tests.

借助Codeship (用于自动测试)和Usersnap (用于手动测试)，我认为我们找到了理想的工具链，该工具链可让我们即时报告错误，同时拥有自动测试的安全网。

So before our code gets hosted at Netlify, it will be tested, prepared and deployed with Codeship. This way, we’ve set up a staging and production environment for our static websites.

因此，在我们的代码托管在Netlify之前，它将与Codeship一起进行测试，准备和部署。 通过这种方式，我们为静态网站设置了暂存和生产环境。

Once deployed, we use Usersnap (yes we eat our own dog food) for manual testing and QA or simply for discussing new ideas or for collecting feedback on any content.

部署后，我们将使用Usersnap(是的，我们自己吃狗粮)进行手动测试和质量检查，或者只是讨论新想法或收集有关任何内容的反馈。

All in all, the development workflow looks like this:

总而言之，开发工作流程如下所示：

To get everybody in our team in the loop, we connected Codeship and Usersnap with Slack. New pushes show up in a dedicated Slack channel. Furthermore, developers get notified on new bug reports and feedback inside Slack.

为了使团队中的每个人都参与其中，我们将Codeship和Usersnap与Slack连接在一起。 新的推送会显示在专用的Slack频道中。 此外，Slack内部的新错误报告和反馈会通知开发人员。

管理错误并完成工作 (Manage Bugs and Get the Job Done)

Getting alerts and notifications on new bugs and errors is one thing. Prioritizing, assigning and fixing them is something else.

获取有关新错误和错误的警报和通知是一回事。 确定它们的优先级，分配和修复是另一回事。

Our product and development team relies on a product roadmap, which we call a feature matrix. This feature matrix includes all features, bug fixes and change requests our team is working on.

我们的产品和开发团队依赖于产品路线图，我们将其称为功能矩阵 。 此功能矩阵包括我们团队正在处理的所有功能，错误修复和更改请求。

Aside from the feature matrix, we also use a couple of internal tools to make communication and life in general easier. We like to call Slack our home, because it enables us to communicate with each other throughout the company.

除了功能矩阵之外，我们还使用了一些内部工具来简化沟通和生活。 我们喜欢将Slack称为我们的家，因为它使我们能够在整个公司中相互沟通。

For managing new projects and getting the job done, we rely on the product management tool Blossom, which gives us a good view of the bigger picture. For example, we have a Blossom board for our product, which gives us a great overview of the current state of new product requirements. We also have boards for all our static website projects.

为了管理新项目并完成工作，我们依赖于产品管理工具Blossom ，它使我们能够更好地了解全局。 例如，我们为我们的产品提供了一块Blossom板，这使我们能够对新产品要求的当前状态有一个很好的了解。 我们还有所有静态网站项目的董事会。

下一步是什么？ (What’s Next?)

As a growing startup, we’re continually thinking of new ways to be more efficient. Adding new people to our development team also requires us to rethink how we work and to identify work that must be done differently.

作为一个成长中的初创公司，我们一直在思考提高效率的新方法。 向我们的开发团队添加新人员还需要我们重新考虑我们的工作方式，并确定必须以不同的方式完成的工作。

With our new workflow, we found a way to be more productive in deploying new landing pages.

通过我们的新工作流程，我们找到了一种在部署新目标页面方面更加高效的方法。

Looking into the future, we think DevOps is a topic that is becoming increasingly important for growing companies.

展望未来，我们认为DevOps对成长中的公司而言正变得越来越重要。

Outsourcing infrastructure to services like AWS or Azure became a de-facto-standard for building and scaling software.

将基础结构外包到AWS或Azure等服务已成为构建和扩展软件的实际标准。

Therefore, infrastructure operations are becoming less important – though we see an increasing need in resources, skills and tools for taking care of your software operations and services. And luckily, there are already various services out there which help you to speed up your DevOps.

因此，尽管我们看到用于照顾您的软件运营和服务的资源，技能和工具的需求在不断增长，但是基础架构的运营已变得不那么重要。 幸运的是，已经有各种服务可以帮助您加快DevOps的速度。

翻译自: https://www.sitepoint.com/developing-a-static-site-generator-workflow/

静态站点生成