In December, we announced the beta of Cloudflare Pages: a fast, secure, and free way for frontend developers to build, host, and collaborate on Jamstack sites.

It's been incredible to see what happens when you put a powerful tool in developers' hands. In just a few months of beta, thousands of developers have deployed over ten thousand projects, reaching millions of people around the world.

Today, we're excited to announce that Cloudflare Pages is now available for anyone and ready for your production needs. We're also excited to show off some of the new features we've been working on over the course of the beta, including: web analytics, built in redirects, protected previews, live previews, and optimized images (oh, my!). Lastly, we'll give you a sneak peek into what we'll be working on next to make Cloudflare Pages your go-to platform for deploying not just static sites, but full-stack applications.

What is Cloudflare Pages?

Cloudflare Pages radically simplifies the process of developing and deploying sites by taking care of all the tedious parts of web development. Now, developers can focus on the fun and creative parts instead.

Seamless builds for developers

Getting started with Cloudflare Pages is as easy as connecting your repository and selecting your framework and build commands.

Once you're set up, the only magic words you'll need are `git commit` and `git push`. We'll take care of building and deploying your sites for you, so you won't ever have to leave your current workflow.

Instant feedback for teams

With every change, Cloudflare Pages generates a new preview link and posts it to the associated pull request. The preview link makes sharing your work with others easy, whether they're reviewing the code or the content for each change.

Bullet-proof security and scale for enterprises

Every site developed with Cloudflare Pages is deployed to Cloudflare's network of data centers in over 100 countries - the same network we've been building out for the past 10 years with the best performance and security for our customers in mind.

But wait, that's not all

Over the past few months, our developers have been busy too, hardening our offering from beta to general availability, fixing bugs, and working on new features to make building powerful websites even easier.

Here are some of the new and improved features you may have missed.

Integrated experience, every step of the way

With Cloudflare Pages, we set out to make developing and deploying sites easy at every step, and that doesn't stop at production. Launch day is usually when the real work begins.

Built-in, free web analytics
Speaking of launch days, if there's one question that's on my mind on a launch day, it's: how are things going?

As soon as the go-live button is pressed, I want to know: how many views are we getting? Was the effort worth it? Are users running into errors?

The weeks, or months after the launch, I still want to know: is our growth steady? Where is the traffic coming from? Is there anything we can do to improve the user's experience?

With Pages, Cloudflare's privacy-first Web Analytics are available to answer all of these essential questions for successfully running your website at scale. Later this week, you will be able to enable analytics with a single click and start tracking your site's progress and performance, including metrics about your traffic and web core vitals.

_redirects file support
Websites are living projects. As you make updates to your product names, blog post titles, and site layouts, your URLs are bound to change as well. The challenge is not letting those changes leave dead URLs behind for your users to stumble over.

To avoid leaving behind a trail of dead URLs, you should create redirects that automatically lead the user to your content's new home. The challenge with creating redirects is coordinating the code change that changes the URL in tandem with the creation of the redirect.

You can now do both with one swift commit.

By adding a _redirects file to the build output directory for your project, you can easily redirect users to the right URL. Just add the redirects into the file in the following format:

[source] [destination] [http code]

Example:


/home / 301
/contact-me /contact 301
/blog https://www.ghost.org 301

Cloudflare Pages makes it easy to create new redirects and import existing redirects using our new support for _redirects files.

Jam harder

When we started Cloudflare, people believed performance and security were at odds with each other, and tradeoffs had to be made between the two. We set out to show that that was wrong.

Today, we similarly believe that working collaboratively and moving fast are at odds with each other. As the saying goes, 'If you want to go fast, go alone. If you want to go far, go together.'

We previously discussed the ways in which Cloudflare Pages allows developers and their stakeholders to move fast together, and we've built two additional improvements to make it even easier!

Protected previews with Cloudflare Access integration
One of the ways Cloudflare Pages simplifies collaboration is by generating unique preview URLs for each commit. The preview URLs make it easy for anyone on your team to check out your work in progress, take it for a spin, and provide feedback before the changes go live.

While it's great to shop ideas with your coworkers and stakeholders ahead of the big day, the surprise element is what makes the big day, The Big Day.

With our new Cloudflare Access integration, restricting access to your preview deployments is as easy as clicking a button.

Cloudflare Access is a Zero Trust solution - think of it like a bouncer checking each request to your site at the door. By default, we add the members of your Cloudflare organization, so when you send them a new preview link, they're prompted with a one-time PIN that is sent to their email for authentication. However, you can modify the policy to integrate with your preferred SSO provider.

Cloudflare Access comes with 50 seats included in the free tier - enough to make sure no one leaks your new 'dark mode' feature before you want them to.

Live previews with Cloudflare Tunnel
While preview deployments make it easy to share progress when you're working asynchronously, sometimes a live collaboration session is the best way to crank out those finishing touches and last minute copy changes.

With Cloudflare Tunnel, you can expose your localhost through a secure tunnel to an easily shareable URL, so you can get live feedback from your teammates before you commit (pun intended).

Speed, security & scalability - no really, we got you

Assets, optimized

It's easy to get excited about all the new features you can play with, one of the real killer features of Pages is the performance and reliability.

We got a bit of a head start on performance because we built Pages on the same network we've been optimizing for performance for the past ten years. As a result, we learned a thing or two about accelerating web performance along the way.

One of the best tools for improving your site performance is by serving smaller content, which takes less time to transfer. One way to make your content smaller is via compression. We've recently introduced two types of compression to Pages:

Image compression: Since images represent some of the largest types of content we serve, serving them efficiently can have great impact on performance. To improve efficiency, we now use Polish to compress your images, and serve fewer bytes over the wire. When possible, we'll also serve a WebP version of your image (and AVIF too, coming soon).

Gzip and Brotli: Even smaller assets, such as HTML or JavaScript can benefit from compression. Pages will now serve content compressed with gzip or Brotli, based on the type of compression the client can support.

While we've been offering compression for a long time now (dating all the way back to 2012), this is the first time we're able to pre-process the assets, at the time of the build step, rather than on the fly, resulting in even better compression.

Another way to make content smaller is by literally shrinking it.

Device-based resizing: To make users' experiences even smoother, especially on less reliable mobile devices, we want to make sure we're not sending large images that will only get previewed on a small screen. Our new optimization will appropriately resize the image based on whether the device is mobile or desktop.

If you're interested in more image optimization features, we have some announcements planned for later in the week, so stay tuned.

What's next?

While today's milestone marks Cloudflare Pages as a production-ready product, like I said, that's where our true work begins, not ends.

There are so many features we're excited to support in the future, and we wanted to give you a small glimpse into what it holds:

GitLab / Bitbucket support
We started out by offering direct integration with GitHub to reach as many developers as we possibly could, but we want to continuously grow out the ecosystem we interact with.

Webhooks
If you're managing all of your code and content through source control, it's sufficient to rely on committing your code as a way to trigger a new preview. However, if you're managing your code in one place, but the content in another, such as a CMS, you may still want to preview your content changes before they go live.

To enable you to do so, we'll be providing an endpoint you'll be able to call in order to trigger a brand new deployment via a webhook.

A/B testing
No matter how much local testing you've done, or how many co-workers you've received feedback from, some unexpected behavior (whether a bug or a typo) is eventually bound to slip, only to get caught in production. Your reviewers are human too, after all.

When the inevitable happens, however, you don't want it impacting all of your users at once.

To give you better control of rolling out changes into production, we're looking forward to offering you the ability to roll out your changes to a percentage of your traffic to gain confidence in your changes before you go to 100%.

The future: full stack applications with Cloudflare Workers and Durable Objects

Supporting static sites is just the beginning of the journey for Cloudflare Pages. With redirects support, we're starting to introduce the first bit of dynamic functionality to Pages, but our ambitions extend far beyond.

Our long term goal with Pages is to make full-stack application development as breezy an experience as static site development is today. We want to make Pages the deployment target for your static assets, and the APIs that make them dynamic. With Workers and Durable Objects, we believe we have just the toolset to build upon.

We'll be starting by allowing you to deploy a Worker function by including it in your /api or /functions directory. Over time, we'll be introducing new ways for you to deploy Durable Objects or utilize the KV namespaces in the same way.

Imagine, your entire application - frontend, APIs, storage, data - all deployed with a single commit, easily testable in staging, and a single merge to deploy to production.

Get started

Sign up or check out our docs to get started.

The best part about this is getting to see what you build, so if you're building something cool, make sure to pop into our Discord and tell us all about it.

Attachments

  • Original document
  • Permalink

Disclaimer

CloudFlare Inc. published this content on 12 April 2021 and is solely responsible for the information contained therein. Distributed by Public, unedited and unaltered, on 12 April 2021 13:06:01 UTC.