编辑器生成静态网页

Static site generators have become increasingly popular and, if my prediction is correct, usage will explode during 2016. Let’s establish what we mean by the term “static site generator” …

静态站点生成器已变得越来越流行，如果我的预测正确的话 ，其使用量将在2016年激增。让我们建立“静态站点生成器”这个术语的含义……

什么是静态站点？ (What is a Static Site?)

Think back to the first website you built. Most developers start by creating a series of pages contained within individual HTML files. Each will call in assets such as images, CSS and perhaps a sprinkling of JavaScript. You possibly launched these files directly from the file system without a web server. Life was simple.

回想一下您建立的第一个网站。 大多数开发人员从创建单个HTML文件中包含的一系列页面开始。 每个人都会调用资产，例如图像，CSS以及一些JavaScript。 您可能直接从文件系统启动了这些文件，而没有Web服务器。 生活很简单。

Difficulties arise as your site becomes larger and more complex. Consider navigation: it may be similar in every file, but adding a new page requires updates to every other. Even references to CSS and images can become awkward as folder structures evolve. You may have considered options such as server-side includes or PHP, but an easier option can be a content management system (CMS) …

当您的站点变得越来越大和越来越复杂时，就会出现困难。 考虑导航：每个文件中的导航可能都相似，但是添加新页面需要彼此更新。 随着文件夹结构的发展，甚至对CSS和图像的引用也可能变得笨拙。 您可能已经考虑过诸如服务器端包含或PHP之类的选项，但是更简单的选项可以是内容管理系统(CMS)…

什么是内容管理系统？ (What is a Content Management System?)

A CMS typically provides administrative control panels — which allow authors to write content that’s stored in a back-end database. When a visitor requests a URL, the CMS:

CMS通常提供管理控制面板-允许作者编写存储在后端数据库中的内容。 访客请求URL时，CMS：

1. determines which page is required确定所需的页面
2. requests appropriate content from the database从数据库中请求适当的内容
3. loads an HTML template (normally from the file system)加载HTML模板(通常从文件系统加载)
4. renders the content within the template, and在模板中呈现内容，并且
5. returns a formatted HTML page to the visitor’s browser.将格式化HTML页面返回到访问者的浏览器。

This occurs almost instantly. The template can include code to generate menus according to the navigation hierarchy. Life is sweet, and more than one in four people choose the PHP/MySQL-powered open source WordPress CMS to manage their website.

这几乎立即发生。 模板可以包括用于根据导航层次生成菜单的代码。 生活是美好的，四分之一以上的人选择使用PHP / MySQL支持的开源WordPress CMS来管理他们的网站。

Unfortunately, a CMS raises a different set of issues:

不幸的是，CMS提出了一系列不同的问题：

• You need to adhere to the CMS’s way of working. It can be awkward to add custom text or components.您需要遵守CMS的工作方式。 添加自定义文本或组件可能很麻烦。
• The server is doing more work, and performance can be affected.服务器正在做更多的工作，并且性能可能会受到影响。
• There are additional points of failure. A software upgrade or database failure can bring your site down.还有其他一些故障点。 软件升级或数据库故障可能会使您的网站瘫痪。

什么是静态网站生成器？ (What is a Static Site Generator?)

An SSG is a compromise between using a hand-coded static site and a full CMS, while retaining the benefits of both. In essence, you generate a static HTML-only website using CMS-like concepts such as templates. The content can be extracted from a database but, more typically, Markdown files are used.

SSG是在使用手动编码的静态站点和完整的CMS之间的折衷，同时保留了两者的优点。 本质上，您使用类似于CMS的概念(例如模板)生成仅静态HTML的网站。 可以从数据库中提取内容，但是更典型地，使用Markdown文件。

The site generation can occur on your development machine or staging server. The resulting HTML files are then deployed to a live web server. Users will never know the difference.

网站生成可以发生在您的开发计算机或登台服务器上。 然后将生成HTML文件部署到实时Web服务器。 用户永远不会知道区别。

A related concept is a “Headless” or “Decoupled” CMS. These use an interface such as WordPress to handle content administration but allow other systems to access the data via a REST API. Therefore, an SSG could build a static website using WordPress page content extracted from an internal server. The resulting HTML files can be uploaded to a web server — but the WordPress installation need never be accessible from outside the organization.

一个相关的概念是“无头”或“解耦” CMS。 它们使用诸如WordPress之类的界面来处理内容管理，但允许其他系统通过REST API访问数据。 因此，SSG可以使用从内部服务器提取的WordPress页面内容来构建静态网站。 可以将生成HTML文件上载到Web服务器-但从未需要从组织外部访问WordPress安装。

Popular static site generators include Jekyll, Pelican, Hugo and Metalsmith — see StaticGen for many more. Let’s examine the benefits of using one …

流行的静态站点生成器包括Jekyll ， Pelican ， Hugo和Metalsmith-有关更多信息，请参见StaticGen 。 让我们研究一下使用…的好处。

1.灵活性 (1. Flexibility)

CMSs normally constrain your options, because they’re tied to a database with specific fields. If you want to add a Twitter widget to some pages, you’ll normally require a plugin, a shortcode or some custom functionality.

CMS通常会限制您的选择，因为它们绑定到具有特定字段的数据库。 如果要在某些页面上添加Twitter小部件，通常需要使用插件，简码​​或某些自定义功能。

In a static site, the widget can simply be inserted into a file directly or using a partial/snippet. There are few limits, because you’re unshackled by the those imposed by a CMS.

在静态站点中，可以将窗口小部件直接直接插入文件中，也可以使用部分/片段插入。 没有什么限制，因为您不受CMS施加的限制的束缚。

2.更好的表现 (2. Better Performance)

Most CMS applications offer built-in or plugin-powered cache systems to ensure pages are generated and reused when possible. This is effective, although the overhead of managing, validating and re-generating cached pages remains.

大多数CMS应用程序都提供内置的或由插件驱动的缓存系统，以确保在可能的情况下生成和重用页面。 尽管保留了管理，验证和重新生成缓存页面的开销，但这是有效的。

Static sites are pre-cached pages which never expire. Files can also be minified prior to deployment to guarantee the smallest load. A static site will always perform better than a CMS-powered version using a similar template.

静态站点是永不过期的预缓存页面。 还可以在部署之前将文件缩小，以确保最小的负载。 静态网站始终会比使用类似模板的CMS支持版本更好。

3.较少的服务器端依赖性 (3. Fewer Server-side Dependencies)

A typical WordPress installation requires:

典型的WordPress安装要求：

• a suitable operating system such as Ubuntu or CentOS合适的操作系统，例如Ubuntu或CentOS
• a web server such as Apache or NGINXWeb服务器，例如Apache或NGINX
• PHP with associated extensions and web server configurationsPHP及其相关的扩展和Web服务器配置
• MySQLMySQL
• the WordPress applicationWordPress应用程序
• any necessary plugins任何必要的插件
• the theme/template code.主题/模板代码。

These dependencies must be installed and managed. WordPress requires less effort than some other applications, but it’s still possible for a single update to any part to cause chaos.

必须安装和管理这些依赖项。 WordPress比其他一些应用程序需要更少的工作，但是任何部分的单个更新仍然可能引起混乱。

A static site is lightweight, and can be hosted by any web server able to return HTML files. There is nothing else to install, manage or update.

静态站点是轻量级的，并且可以由任何能够返回HTML文件的Web服务器托管。 无需安装，管理或更新。

4.提高可靠性 (4. Improved Reliability)

A CMS is complex, with many moving parts and points of failure. Run a WordPress site for any length of time and you’ll almost certainly encounter the dreaded “Failed to establish a database connection” error. Unforeseen CMS problems can arise from sudden traffic surges, which crash the database or restrict active connections.

CMS很复杂，有许多活动部件和故障点。 任意时间运行WordPress网站，几乎可以肯定会遇到可怕的“无法建立数据库连接”错误。 突发的流量激增可能导致无法预料的CMS问题，这可能使数据库崩溃或限制活动连接。

Serving a static site is less intensive — the server just has to return flat files. It’s still possible to crash a web server, but it’ll take considerably more concurrent requests.

为静态站点提供服务的强度较低-服务器只需返回平面文件。 仍然有可能使Web服务器崩溃，但是它将需要更多的并发请求。

5.优越的安全性 (5. Superior Security)

There are several reasons why someone may want to attack your website. Traffic hijacking, rogue advertising, linking, authenticity spoofing and malware hosting all permit an unauthorized user to make monetary and/or kudos gains.

有人可能想要攻击您的网站有几个原因。 流量劫持，流氓广告，链接，真实性欺骗和恶意软件托管都允许未经授权的用户获取金钱和/或荣誉。

A CMS opens a number of attack vectors. The most obvious is the login screen: it’s only as secure as the weakest user password. Be aware that any page running server-side code also offers potential exploits — for example, firing spam emails via your contact form. It may not be obvious that someone has gained access; the worst culprits want to stay hidden.

CMS打开了许多攻击媒介。 最明显的是登录屏幕：它仅与最弱的用户密码一样安全。 请注意，任何运行服务器端代码的页面也都具有潜在的漏洞利用-例如，通过您的联系表发送垃圾邮件。 有人获得访问权限可能并不明显； 罪魁祸首想躲藏起来。

A static site has little or no server-side functionality. You cannot access it via scripting or database security holes. Someone could still gain access via SSH or FTP, but they would struggle to do much damage other than defacing pages or uploading files. A quick git status or folder check can reveal break-ins. It’s then simple to change passwords, wipe the whole site and regenerate it again.

静态站点几乎没有服务器端功能。 您无法通过脚本编制或数据库安全漏洞访问它。 某些人仍然可以通过SSH或FTP获得访问权限，但是除了使页面涂污或上传文件外，他们还会造成很大的损失。 快速的git status或文件夹检查可以显示入侵。 更改密码，擦除整个站点并重新生成它很简单。

6.客户控制注意事项 (6. Client Control Considerations)

You spend weeks building attractive CMS themes for the client to trash their site within minutes of your hand-over. Using a CMS is not necessarily easy, and it offers considerable power to content editors. You can lock down rights such as plugin installation, but it won’t prevent someone changing fonts, adding weird colors, using poor photography or corrupting the layout.

您花了数周的时间来建立吸引人的CMS主题，以使客户在移交后的几分钟内就将其网站丢弃。 使用CMS不一定很容易，它为内容编辑器提供了强大的功能。 您可以锁定诸如插件安装之类的权限，但它不会阻止某人更改字体，添加怪异颜色，使用较差的摄影效果或破坏布局。

A static site can use Markdown files. That limits the user’s options; they make fewer mistakes and cannot adversely affect the pages. Some will miss the CMS content administration panels, but you can either:

静态站点可以使用Markdown文件。 那限制了用户的选择； 他们犯的错误更少，并且不会对页面造成不利影响。 有些人会错过CMS内容管理面板，但是您可以：

1. use their existing CMS and cleanse data before generation, or在生成之前使用其现有的CMS并清除数据，或者

2. provide simpler workflows such as editing Dropbox files in StackEdit.

   提供更简单的工作流程，例如在StackEdit中编辑Dropbox文件。

7.版本控制和测试 (7. Version Control and Testing)

Database data is volatile. A CMS permits users to add, delete or change content on a whim. Wiping the whole site is a few clicks away. You can back up databases but, even if that’s done regularly, you’re still likely to lose some data.

数据库数据易失。 CMS允许用户随心所欲地添加，删除或更改内容。 只需单击几下即可擦除整个网站。 您可以备份数据库，但是即使定期进行备份，您仍然可能丢失一些数据。

A static site is safe presuming your content is defined in Markdown files and you use a version control system such as Git. Old files are retained, and changes can be undone quickly. Testing becomes easier because the site can be generated and previewed anywhere — even on a client’s PC.

假设您的内容是在Markdown文件中定义的，并且使用了版本控制系统(例如Git)，则静态站点是安全的。 保留了旧文件，并且可以快速撤消更改。 测试变得更加容易，因为可以在任何地方(甚至在客户的PC上)生成和预览站点。

With a little more effort, you can implement deployment systems to build the site on a staging server, then update the live server when new content has been reviewed and approved.

稍加努力，您就可以实施部署系统，以在登台服务器上构建站点，然后在新内容经过审核和批准后更新实时服务器。

So all is good in the static site world. Or is it? Read my follow-up post on 7 Reasons NOT to Use a Static Site Generator. And for a practical demonstration of how to build a site with a static site generator, see my How to Create a Static Site with Metalsmith article.

因此，在静态站点世界中一切都很好。 还是？ 阅读有关不使用静态网站生成器的7个原因的后续文章。 有关如何使用静态站点生成器构建站点的实际演示，请参阅我的如何使用Metalsmith创建静态站点文章。

翻译自: https://www.sitepoint.com/7-reasons-use-static-site-generator/

编辑器生成静态网页