我从Vercel切换到Cloudflare页面
#javascript #cloudflare #hosting #blog

本文也可用。

CloudFlare推出了其页面产品Cloudflare Pages。它针对jamstack网站和应用程序,加入了许多托管服务,可为这样的简单网站提供简单的部署!

我已经使用vercel了一段时间了,它被称为现在。使用业余爱好,他们的自由层,它的目的很好,老实说,我没有太多理由离开他们。但是,我已经通过Cloudflare管理域,并使用其基本但免费的,尊重分析的隐私,因此我认为我会在页面之前提供页面。

设置轻而易举。如果您在类似服务上设置了网站,则工作流程很熟悉。您可以链接存储库,将其指向分支以监视,添加构建配置和部署。它们具有许多jamstack框架的预设,包括我在本网站上使用的框架11ty (Eleventy)。但是,我确实需要稍微调整构建步骤,以使其配置。这包括如下所示的构建命令和输出目录。

Cloudflare Pages build settings

我使用sass或scss来样式站点,因此在部署过程中应将这些样式表汇编为CSS文件。这样做只是我的npm run build命令的一部分:

{
  ...
  "scripts": {
    ...
    "styles": "sass src/styles/main.scss src/assets/styles.css --style=compressed --no-source-map",
    "build": "npm run styles && eleventy"
  },
  ...
}

我还需要调整404S的重写规则,以便将发现的任何URL重定向到404页。在Vercel中,您可以像这样做到这一点:

{
    ...
    "rewrites": [{ "source": "/(.*)", "destination": "/404/index.html" }]
}

我努力寻找一种直接的方法来使用CloudFlare页面进行操作,但是在浏览一点之后,我发现Cloudflare can resolve 404s自动在您网站的顶层中自动到404.html文件,这意味着我不需要_redirects文件处理这个。因此,在我的404.ndk文件中,我只是更新了front matter以包含permlink。这将其放在顶层,而不是404/index.html

---
title: "404"
layout: base
templateId: not-found
permalink: 404.html
---
<section>
    <h2>404</h2>
    <hr />

    <p>Hmm, we couldn't find what you were looking for...</p>

    <a class="button" href="/" title="Home">Back to Home</a>
</section>

就是这样!我的JamesNewman.dev的名字服务员已经指向Cloudflare,因此DNS只需要更新Cloudflare在单击按钮时就可以做的。它确实很简单。

到目前为止我的想法

在撰写本文时,这些网站仅在页面上几天。但是,CloudFlare Analytics似乎工作得更好,更重要的是,该网站似乎加载了更快!更好的是,它得到了Cloudflare的力量,规模和安全性。

那么您应该切换吗?也许。就像我一开始说的那样,我并没有真正需要切换,您可能不需要。但是考虑到这一点,请查看their sitethe pricing tiers上的功能列表,并评估是否值得。

本文也可用。