免费的静态网页托管
Did you know that you can host static sites for free on a number of high-grade services? This doesn’t just save money, but also means you’re deploying to globally distributed CDNs and automating processes.
您是否知道可以免费在许多高级服务上托管静态网站？ 这不仅节省资金，还意味着您正在部署到全球分布的CDN并实现流程自动化。
Provided: Netlify
提供：Netlify
In a previous article, we reviewed 100 Jamstack tools, APIs and services to power your sites, which included a lot of hosting services.
在上一篇文章中，我们回顾了100个Jamstack工具，API和服务来为您的网站提供动力 ，其中包括许多托管服务。
In this article, we’ll get hands-on and show you how to host static sites with an automated pipeline for deployment.
在本文中，我们将动手实践，并向您展示如何使用自动管道进行部署来托管静态站点。
Does this sound complicated? It’s easier than you’d think.
这听起来复杂吗？ 它比您想象的要容易。
You can actually host websites for free — even dynamic ones — with the AWS Free Tier (Amazon Web Services), the GCP Free Tier (Google Cloud Platform) and Windows Azure (with some workarounds).
实际上，您可以使用AWS Free Tier (Amazon Web Services)， GCP Free Tier (Google Cloud Platform)和Windows Azure(带有一些变通方法 )来免费托管网站，甚至可以动态托管网站。
But when you go to give that a try, you’ll come across a number of conditions, fine print considerations, and implementation constraints:
但是，当您尝试一下时，会遇到许多情况，精细的打印注意事项和实现约束：
how much computing power do you need? 您需要多少计算能力？ your credit card number, please? 您的信用卡号码好吗？ where do you want to deploy to? 您想部署到哪里？ is your account brand new? 您的帐户是全新的吗？ and not older than 1 year? 且不超过1年？ actually, what services? 实际上，什么服务？Often this is more a tryout than an actual freebie (hence the reason why AWS Amplify Storage is not included in this list). And while some power users might take advantage of the goodies, if you aren’t well acquainted with these platforms beforehand, you’ll find out that the learning curve to start using these services is very steep, and that for every cloud service you intend to use you’ll need to find out first in which way each provider reinvented the wheel before you can actually spin it into any free deployment.
通常，这是比实际的免费赠品更多的尝试(因此，此列表中未包含AWS Amplify Storage的原因)。 尽管一些高级用户可能会利用这些好处，但是如果您事先对这些平台不熟悉，就会发现开始使用这些服务的学习曲线非常陡峭，并且对于您打算使用的每个云服务要使用该工具，您需要首先找出每个提供者以何种方式重新发明了轮子，然后才能将其实际应用到任何免费部署中。
Let’s see now how a handful of smaller players rose to prominence with free hosting services that aren’t a hassle to implement and have fewer strings attached.
现在，让我们来看看少数几个较小的参与者是如何通过免费托管服务而扬名的，这些托管服务实施起来并不麻烦，并且附带的字符串也更少。
Netlify — the company that coined the Jamstack term — launched in March 2015. In its short time in business, it has put a lot of effort into delivering on the promise of being the “the fastest way to build the fastest sites”.
Netlify (创造了Jamstack术语的公司)于2015年3月成立。在业务短时间内，它付出了巨大的努力，以实现成为“最快的方式来构建最快的站点”的承诺。
Netlify literally developed a drag-and-drop service with this premise:
Netlify在此前提下确实开发了拖放服务 ：
Drag and drop a folder with your site’s HTML, CSS, and JS files. We’ll publish them live and give you a link to share it.
拖放包含站点HTML，CSS和JS文件的文件夹。 我们将实时发布它们，并为您提供共享链接。
You don’t even need a Netlify account! It doesn’t get any simpler than that. And you get these features right out of the box:
您甚至不需要Netlify帐户！ 没有比这更简单的了。 您可以立即使用以下功能：
free HTTPS 免费的HTTPSworldwide deployment to Netlify Edge, a distributed multi-cloud CDN
在全球范围内部署到分布式多云CDN Netlify Edge
And there’s more:
还有更多：
you can claim the site (at which point you do need an account) 您可以声明该网站的版权(此时您需要一个帐户) attach a domain to it for free (also with free HTTPS) 免费附加域(也使用免费HTTPS)take it further with the Netlify Workflow, Functions and more
Netlify工作流程 ， 功能以及更多 功能使它更进一步
If you in fact get an account, you’ll find that linking a GitHub, GitLab, or Bitbucket repository for automated deployments is dead easy.
如果实际上有一个帐户，您会发现链接GitHub，GitLab或Bitbucket存储库以进行自动部署非常简单 。
The way this works is very simple: you commit changes to your repository, Netlify gets notified instantly via webhooks, and it immediately deploys those changes online. That’s it — no credit card, and no fine print that will hit you later (that I’m aware of). Should anything go wrong with a deployment, no worries: you’ve got one-click rollbacks available right on the web interface!
它的工作方式非常简单：您将更改提交到存储库，Netlify会通过webhooks立即收到通知，并且会立即在线部署这些更改。 就是这样-没有信用卡，也没有精美的印刷品会在以后打击您(我知道)。 如果部署出现任何问题，请放心：您可以在Web界面上一键式回滚！
And this workflow, easy as it is to implement, is very much in tune with the continuous integration and continuous delivery (CI/CD) pipelines that gained traction among the DevOps practices that are so in demand these days.
而且，这种工作流程易于实施，非常适合持续集成和持续交付 (CI / CD)管道，这些管道在如今非常需要的DevOps实践中获得了关注。
If you didn’t know by now, you can host static websites for free, straight out of your repositories in GitHub Pages and GitLab Pages.
如果您现在还不知道，则可以免费在GitHub Pages和GitLab Pages 中的存储库中免费托管静态网站 。
Both GitHub Pages and GitLab Pages are very easy to use. Just follow these guidelines:
GitHub Pages和GitLab Pages都非常易于使用。 只需遵循以下准则：
Getting Started with GitHub Pages
GitHub Pages入门
Hosting on GitLab.com with GitLab Pages
使用GitLab页面在GitLab.com上托管
Turning dynamic sites into static HTML/CSS assets, which results in huge gains in speed and security, is a rising trend in web development. And with the proper tool set, it makes deployment a lot easier. We won’t cover the process here, but you can check our article on turning WordPress into a static site for a 10x gain in speed for a primer.
将动态站点转换为静态HTML / CSS资产，从而在速度和安全性方面带来巨大收益，这是Web开发的一种上升趋势。 并使用适当的工具集，它使部署变得更加简单。 我们不会在此处介绍该过程，但是您可以查看有关将WordPress转换为静态站点以使引物速度提高10倍的文章。
As an alternative approach, you could create an automated pipeline to turn a set of static assets into something that would pretty much behave like a dynamic site. For example, you could push Markdown files to your repository and automatically build these into a web page to get it deployed to your website. How? Jekyll.
作为一种替代方法，您可以创建一个自动化管道，以将一组静态资产转换为行为类似于动态站点的东西 。 例如，您可以将Markdown文件推送到存储库中，然后自动将其构建到网页中，以将其部署到您的网站上。 怎么样？ 杰基尔 。
GitHub has a good set of tutorials to this end: Setting up a GitHub Pages site with Jekyll.
GitHub为此目的提供了一系列很好的教程： 使用Jekyll设置GitHub Pages网站 。
Also check these guides:
另请查看以下指南：
Creating and Tweaking GitLab CI/CD for GitLab Pages
为GitLab页面创建和调整GitLab CI / CD
Jekyll: GitHub Pages
Jekyll：GitHub页面
Users have complaine about GitHub Pages being extremely slow, sometimes taking as much as 20–30 minutes to just deploy a handful of HTML files. Navigation can suffer from performance issues, with a latency as high as five seconds. This is really odd, considering GitHub Pages uses (or should be using) a CDN. (See Faster, More Awesome GitHub Pages).
用户抱怨GitHub Pages的运行速度非常慢 ，有时仅部署少量HTML文件就需要20到30分钟。 导航可能会遇到性能问题，延迟高达五秒钟。 考虑到GitHub Pages使用(或应该使用)CDN，这确实很奇怪。 (请参阅更快，更出色的GitHub Pages )。
And while some of these issues might have been addressed by Microsoft (GitHub’s parent company), in general the number and quality of free features offered by GitLab is insane.
尽管Microsoft(GitHub的母公司)可能已经解决了其中一些问题，但总体而言，GitLab提供的免费功能的数量和质量令人发指 。
GitHub PagesGitLab PagesStatic site generator (SSR)JekyllGatsby, Jekyll, Hugo, Middleman, Harp, Hexo, Brunch, and moreplugins supportnoyesBuild configurationTravis CITravis CIHTTPS supportpartial/buggyyes, incl. custom domains GitHub页面 GitLab页面 静态站点生成器(SSR) 杰基尔 Gatsby，Jekyll，Hugo，Middleman，Harp，Hexo，Brunch等 插件支持 没有 是 构建配置 特拉维斯CI 特拉维斯CI HTTPS支持 部分/越野车 是的，包括 自定义域Heroku is a very interesting case as, unlike the aforementioned providers, it allows free hosting of dynamic sites, also with a strong focus on continuous integration and continuous delivery.
Heroku是一个非常有趣的案例，因为与上述提供商不同， 它允许免费托管动态网站 ，并且非常注重持续集成和持续交付 。
Heroku uses a proprietary lightweight container technology called Dynos to run apps, and because your environment will be containerized (see Understanding Docker, Containers and Safer Software Delivery for more information) you can effectively deploy your app in virtually any programming language — such as Python, PHP, Node.js, or plenty of others). You can also integrate it with a PostgreSQL or Redis database … and even with a “Kafka-as-a-service“!
Heroku使用称为Dynos的专有轻量级容器技术来运行应用程序，并且由于您的环境将被容器化(有关更多信息，请参见了解Docker，容器和更安全的软件交付 )，因此您几乎可以以任何编程语言(例如Python ， PHP ， Node.js或其他许多版本 )。 您还可以将其与PostgreSQL或Redis数据库集成，甚至与“ Kafka即服务 ”集成！
Heroku’s flexibility means that the service isn’t as easy to use as Netlify. But it’s nowhere near as difficult as AWS, GCP or Azure. In fact, if you’ve already used containers before, you might find your way around Heroku in no time.
Heroku的灵活性意味着该服务不如Netlify易于使用。 但这远不及AWS，GCP或Azure。 实际上，如果您以前已经使用过容器，那么您可能会很快找到Heroku的出路。
Yes, there’s a catch here: your app will “sleep” after 30 minutes of inactivity. So if your site goes idle (no visits) for a short while, Heroku will put the resources assigned to run your web app on standby until the server gets a new request.
是的，这里有一个陷阱： 30分钟不活动后，您的应用程序将“睡眠” 。 因此，如果您的站点短时间处于空闲状态(无访问)，Heroku将使分配用于运行Web应用程序的资源处于待机状态，直到服务器收到新请求为止。
If you wanted to show your app to a colleague or client, chances are that the latency (the time it takes for a request to get served) when you first hit the page will be huge, as resources will need to be allocated again when the app “wakes up”. After that — as long as it remains active for at least 30 minutes — latency should be normal.
如果您想向同事或客户展示您的应用，则首次点击该页面时的延迟(请求得到响应所花费的时间)将非常大 ，因为当用户访问该页面时需要重新分配资源。应用程式“醒来”。 在那之后(只要它保持活动至少30分钟)，延迟应该是正常的。
As a result of this resource-saving mechanism, this freebie is good for testing ideas online, but not really suitable for anything else.
由于这种节省资源的机制，这个免费赠品非常适合在线测试想法，但实际上并不适合其他任何东西。
Google Firebase, the cloud suite for mobile, web and Unity development, also ships Firebase Hosting.
Google Firebase(用于移动，Web和Unity开发的云套件)也附带了Firebase Hosting 。
You can use the service for free up to 10GB of storage and 10GB of data transferred per month*, including free SSL certificates even for custom domains and support for multiple sites per project. That’s quite good!
您可以使用该服务免费获得每月最多10GB的存储空间和10GB的数据传输 *，包括免费的SSL证书(甚至用于自定义域)，以及每个项目支持多个站点。 很好！
Unlike Netlify, deploying with Firebase Hosting isn’t as straightforward. Firebase doesn’t read the webhooks out of your repository for a transparent CI/CD pipeline. Instead, you’ll have to use the command line interface tool, Firebase CLI.
与Netlify不同，使用Firebase托管进行部署并不是那么简单。 对于透明的CI / CD管道，Firebase不会从存储库中读取Webhooks。 相反，您必须使用命令行界面工具Firebase CLI 。
From the Firebase documentation:
从Firebase文档中 ：
Install the Firebase CLI. The Firebase CLI makes it easy to set up a new Hosting project, run a local development server, and deploy content.
安装Firebase CLI 。 Firebase CLI可以轻松设置新的Hosting项目，运行本地开发服务器以及部署内容。
Set up a project directory. Add your static assets to your local Hosting project folder and set up Cloud Functions or Cloud Run for your dynamic content and microservices. You can then test your site locally by running firebase serve.
设置项目目录 。 将静态资产添加到本地Hosting项目文件夹中，并为动态内容和微服务设置Cloud Functions或Cloud Run。 然后，您可以通过运行firebase serve在本地测试您的站点。
Deploy your site. When things are looking good, run firebase deploy to upload the latest snapshot to our servers. New versions are released all at once, so you’ll never have to worry about half-finished deployments. But, if something does go wrong, you can roll back with one click.
部署您的站点 。 一切正常后，请运行firebase deploy将最新快照上传到我们的服务器。 新版本会立即发布，因此您不必担心部署完成一半。 但是，如果确实有问题，您可以一键回滚 。
Link to a Firebase Web App (optional). By linking your site to a Firebase Web App, you’re able to use Firebase Performance Monitoring to gain insight into the performance characteristics of your site.
链接到Firebase Web App (可选) 。 通过将网站链接到Firebase Web App ，您可以使用Firebase Performance Monitoring来了解您网站的性能特征。
Just a bit of setup, but it isn’t difficult either. Here you can check out the full documentation for deployments.
只是一些设置，但这也不难。 在这里，您可以查看有关部署的完整文档 。
You need to consider that these companies already have a massive infrastructure in place and we’re mostly talking static assets that need no preprocessing during runtime. So the overhead to run these static sites is small. This contrast is best demonstrated by Heroku with its dynamic support — it saves resources when sites are idle, which for small sites is most of the time.
您需要考虑到这些公司已经拥有庞大的基础架构，而我们主要是在谈论静态资产，这些资产在运行时不需要进行预处理。 因此，运行这些静态站点的开销很小。 Heroku的动态支持可以最好地证明这种对比-在站点空闲时可以节省资源，而在大多数情况下，这对于小型站点而言是这样。
And companies also get something out of it: spotlight! You might come for the free beer but if the venue and the menu are appealing enough, you might as well stay and pay for dinner when the time is right.
公司也从中受益：聚焦！ 您可能会来免费喝啤酒，但是如果场地和菜单足够吸引人，那么您最好在适当的时候留下并支付晚餐费用。
There were some companies offering free plans that we didn’t get to cover, like Surge and Vercel (formerly ZEIT Now), both of which are Jamstack-oriented much like Netlify. But hopefully you’re getting a lot more than “free hosting” out of this article: when you’re implementing a deployment pipeline, you’re really taking your workflow to the next level, as you automate processes that are tedious, prone to painful mistakes, and quite often cannot be reversed (i.e. overwritten files on FTP).
有一些公司提供了我们无法涵盖的免费计划，例如Surge和Vercel (以前称为ZEIT Now)，它们都像Netlify一样面向Jamstack。 但希望您从本文中获得的不仅仅是“免费托管”：在实施部署管道时，您实际上将工作流程提升到了一个新的水平，因为您可以自动化繁琐且易于操作的流程痛苦的错误，并且通常无法撤消(例如，FTP上的文件被覆盖)。
And who doesn’t like free hosting? But again, there’s more to it when you’re also deploying to CDNs worldwide and making your site blazing fast all over the world
还有谁不喜欢免费托管？ 但是同样，当您还要在全球范围内部署CDN并让您的网站在世界范围内快速发展时，还有很多其他功能
So, you can pretty much forget about paying to host a static website for many of your projects, and power up your workflow in the process. Lucky you! 💥
因此，您几乎可以忘记为很多项目付费托管一个静态网站，并在此过程中增强工作流程。 幸运的你！ 💥
Get up to speed with the Jamstack. Our Jamstack Foundations collection helps you take your first steps into the Jamstack and beyond, and we’re adding to it constantly. We’ll bring you the tutorials you need to become a pro. You can always refer to our index as it’s updated at the end of our Introduction to the Jamstack:
赶紧使用Jamstack。 我们的Jamstack Foundations系列可帮助您迈入Jamstack及其它领域之外的第一步，并且我们会不断对其进行补充。 我们将带给您成为专业人士所需的教程。 您可以随时参考我们的索引，因为它在Jamstack简介的末尾进行了更新：
➤ Jamstack Foundations
➤Jamstack基础
翻译自: https://www.sitepoint.com/how-to-host-static-sites-for-free-with-an-automated-pipeline/
免费的静态网页托管
相关资源：down_52pojie_cn：可在静态网站上托管的单页文件浏览器。吾爱破解论坛爱盘页面的源代码-源码