静态网站托管_在Netlify上托管静态站点的教程

静态网站托管

I host my blog on Netlify.

我在Netlify上托管我的博客。

I moved a while ago, my previous hosting was having some issues that made my site unreachable for a few hours, and while I waited for it to get up online again, I searched around for a quick way to bring it back and I created a replica of my site on Netlify.

我前一阵子搬家了,以前的主机出现了一些问题,导致我的网站在几个小时内无法访问,在等待网站重新上线的同时,我搜寻了一种快速的方法将其恢复,并创建了一个我在Netlify上的网站副本。

Since this blog runs on Hugo, which is a Static Site Generator, I don’t need a lot of work to move the blog to a new hosting. All I need is something that can serve HTML files, which is pretty much any hosting on the planet.

由于此博客运行在Hugo (这是一个静态网站生成器)上,因此无需太多工作即可将博客移至新的托管网站。 我需要的是可以提供HTML文件的东西,几乎可以托管在这个星球上。

I started looking for the best platform for a static site, and a few stood out but I eventually tried Netlify, and I’m glad I did.

我开始为静态站点寻找最佳平台,其中一些脱颖而出,但是我最终尝试了Netlify,很高兴我做到了。

Netlify Logo

Netlify简介 (Introducing Netlify)

There are a few things that made a great impression to me before trying it.

在尝试之前,有几件事给我留下了深刻的印象。

First, the free plan is very generous for free or commercial projects, with 100GB of free monthly bandwidth, and for a static site with just a few images here and there, it’s a lot of space!

首先, 免费计划对于免费或商业项目来说非常慷慨 ,每月有100GB的免费带宽,而对于一个静态站点,那里到处都是几张图片,空间很大!

They include a global CDN, to make sure speed is not a concern even in continents far away from the central location servers.

它们包括一个全局CDN ,以确保即使在远离中央位置服务器的大洲也不会担心速度。

You can point your DNS nameservers to Netlify and they will handle everything for you with a very nice interface to set up advanced needs.

您可以将DNS名称服务器指向Netlify,它们将通过一个非常好的界面来设置高级需求,为您处理所有事情。

They of course support having a custom domain and HTTPS.

他们当然支持拥有自定义域和HTTPS。

Coming from Firebase, I expected a very programmer friendly way to manage deploys, but I found it even better with regards to handling each Static Site Generator.

我来自Firebase,希望使用一种非常程序员友好的方式来管理部署,但是在处理每个静态站点生成器方面,我发现它甚至更好。

Netlify和雨果 (Netlify and Hugo)

I use Hugo, and locally I run a server by using its built-in tool hugo server, which handles rebuilding all the HTML every time I make a change, and it runs an HTTP server on port 1313 by default.

我使用Hugo,在本地使用其内置工具hugo server ,该hugo server每次进行更改时都会处理所有HTML的重建,默认情况下,该服务器在端口1313上运行HTTP服务器。

To generate the static site, I have to run hugo, and this creates a series of files in the public/ folder.

要生成静态站点,我必须运行hugo ,这将在public/文件夹中创建一系列文件。

I followed this method on Firebase: I ran hugo to create the files, then firebase deploy, configured to push my public/ folder content to the Google servers.

我在Firebase上遵循了这种方法:运行hugo创建文件,然后运行firebase deploy ,配置为将我的public/文件夹内容推送到Google服务器。

In the case of Netlify however, I linked it to my private GitHub repository that hosts the site, and every time I push to the master branch, the one I told Netlify to sync with, Netlify initiates a new deploy, and the changes are live within seconds.

但是,在Netlify的情况下,我将其链接到托管该站点的私有GitHub存储库,并且每次我推送到master分支时(我告诉Netlify与之同步的分支),Netlify都会启动一个新的部署,并且更改是实时的在几秒钟内。

Dashboard

TIP: if you use Hugo on Netlify, make sure you set HUGO_VERSION in netlify.toml to the latest Hugo stable release, as the default version might be old and (at the time of writing) does not support recent features like post bundles. Here’s my netlify.toml configuration file.

提示:如果您在Netlify上使用Hugo,请确保将netlify.toml中的netlify.toml设置为最新的Hugo稳定版本,因为默认版本可能较旧,并且(在撰写本文时)不支持最新功能,例如邮政捆绑包。 这是我的netlify.toml配置文件

If you think this is nothing new, you’re right, since this is not hard to implement on your own server (I do so on other sites not hosted on Netlify), but here’s something new: you can preview any GitHub (or GitLab, or BitBucket) branch / PR on a separate URL, all while your main site is live and running with the “stable” content.

如果您认为这不是什么新鲜事,那么您是对的,因为在您自己的服务器上实施此操作并不困难(我在非Netlify托管的其他站点上也是如此),但这是新的内容:您可以预览任何GitHub(或GitLab) ,或BitBucket)分支/ PR放在单独的URL上,而您的主站点始终处于活动状态且运行时带有“稳定”的内容。

Another cool feature is the ability to perform A/B testing on 2 different Git branches.

另一个很酷的功能是能够在2个不同的Git分支上执行A / B测试。

Netlify为静态站点提供的高级功能 (Advanced functionality offered by Netlify for Static Sites)

Static sites have the obvious limitation of not being able to do any server-side operation, like the ones you’d expect from a traditional CMS for example.

静态站点的明显局限性是无法执行任何服务器端操作,例如您希望从传统CMS中进行的操作。

This is an advantage (less security issues to care about) but also a limitation in the functionality you can implement.

这是一个优点(不必担心较少的安全问题),但是也限制了您可以实现的功能。

A blog is nothing complex, maybe you want to add comments and they can be done using services like Disqus or others.

博客并不复杂,也许您想添加评论,可以使用Disqus或其他服务完成评论。

Or maybe you want to add a form and you do so by embedding forms generated on 3rd party applications, like Wufoo or Google Forms.

或者,也许您想添加一个表单,并通过嵌入在第三方应用程序(例如Wufoo或Google Forms)上生成的表单来添加。

Netlify provides a suite of tools to handle Forms, authenticate users and even deploy and manage Lambda functions.

Netlify提供了一套工具来处理表单 ,验证用户身份,甚至部署和管理Lambda函数

Need to password protect a site before launching it? ✅

在启动网站之前需要密码保护它吗? ✅

Need to handle CORS? ✅

需要处理CORS吗? ✅

Need to have 301 redirects? ✅

是否需要301重定向? ✅

Need pre-rendering for your SPA? ✅

需要为SPA进行预渲染吗? ✅

I just scratched the surface of the things you can do with Netlify without reaching out to 3rd party services, and I hope I gave you a reason to try it out.

我只是简单介绍了Netlify可以做的事情,而无需接触第三方服务,我希望我给您一个尝试的理由。

预览分支 (Previewing branches)

The GitHub integration works great with Pull Requests.

GitHub集成可很好地与Pull Requests配合使用。

Every time you push a Pull Request, Netlify deploys that branch on a specific URL which you can share with your team, or to anyone that you want.

每次您发出“拉取请求”时,Netlify都会将该分支部署在一个特定的URL上,您可以与您的团队或任何您想要的人共享。

Here I made a Pull Request to preview a blog post, without making it available on my public blog:

在这里,我发出了一个“拉取请求”以预览博客文章,而未在我的公共博客上发布它:

GitHub Pull Request

Netlify immediately picked it up, and automatically deployed it 🎉

Netlify立即将其拾起并自动部署deployed

The deployed preview

Clicking the link points you to the special URL that lets you preview the PR version of the site.

单击链接将您指向特殊的URL,该URL可让您预览站点的PR版本。

翻译自: https://flaviocopes.com/netlify/

静态网站托管

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值