Last Updated on December 28, 2022 by Steve
What’s Cloudflare Pages and Why is it Used?
In case you did not know Cloudflare is an American web infrastructure and website security company that provides content delivery network and DDoS mitigation services. Its services occur between a website’s visitor and the Cloudflare customer’s hosting provider, acting as a reverse proxy for websites.
Cloudflare was created to empower users with the resources to make their sites, apps, and blogs safe and performant. Cloudflare also provides security by protecting Internet properties from malicious activity like DDoS attacks, malicious bots, and other nefarious intrusions. Cloudflare Pages is one of its newest and greatest service offerings.
What’s a Static Site?
Your website is the digital face of your company. Oftentimes, it’s also the first place potential customers engage with your business. Yet many of today’s websites are built with the structure of a traditional database-driven site like WordPress. This type of website can be clunky, slow to load, a hassle for developers to maintain, and vulnerable to hackers. A static site can address many of these issues and may better serve your website needs.
The advantages of static sites
- Much better security
- Faster load speeds
- More flexibility
- Smaller footprint
- Better reliability
- Easier to develop
- More scalable
- Lower costs
I have used Cloudflare for years to speed up and protect my WordPress based websites. It’s a new time though and now static sites are all the rave. However, they are not for every use case, and I am not saying that they are a replacement for WordPress, but they offer benefits for many, depending on your needs.
A static website can easily be used as a front end to WordPress, making it headless. Instead of trying to replace WordPress in this configuration WordPress can benefit from a static site’s capabilities. Cloudflare has stepped into this market and now provides a service called Cloudflare Pages. In this article I will talk about what is Cloudflare Pages, what it can do and why you might use it.
Recently Released Service Cloudflare Pages
Cloudflare Pages is a fast secure, and free way for developers to build, host and collaborate on Jamstack sites. During the few months that this service was in beta thousands of developers deployed over ten thousand projects, reaching millions of people all around the world. Cloudflare Pages is now out of beta and has features available including web analytics, built in redirects, protected previews, live previews, and optimized images. In my next article I will go deeper about Cloudflare’s features that will make it not only the go to platform for deploying static sites but full stack applications as well.
Cloudflare Pages takes care of the tedious parts of web development which radically simplifies the process of developing and deploying sites. Developers can now focus on the creative and fun parts instead.
Seamless Build Process for Developers
To get started with Cloudflare pages simply connect your repository, select your framework, and build commands. This makes life much easier on developers by saving time and these days time equates to money.
Instant Team Feedback
Cloudflare pages generates a new preview link and posts it to the associated pull request with every change. This preview link is a time saver as it makes sharing your work with others easy whether they are reviewing the code or the content for each change.
Top Notch Security and Scale
Cloudflare has a network of data centers in over 100 countries and every site developed with Cloudflare pages is deployed there. Cloudflare has been building this network for over 10 years now offering the best performance and security.
Web Analytics Built in for Free
All developers have the same questions on launch day of an application. For example, how are things going?
Questions that are answered as soon as you press the go live button:
- How many views am I getting?
- Was it worth it?
- Are there any errors for my users?
Questions that are answered weeks or months after your launch:
- Is growth steady for my site or app?
- Where is traffic coming from?
- What can I do to improve user experience?
You can use Cloudflare’s Web Analytics to answer all of these essential questions that will allow you to run your site at scale. Cloudflare’s Web Analytics enables you to start tracking your site’s performance and progress, including metrics about your traffic and web core vitals with a single click.
Redirects Not a Problem
Your URLs are bound to change as you work on your sites and make changes to product names, blog post titles, site layouts etc. It’s a challenge though to not leave dead URLs behind for your users to find. You can create redirects that automatically lead the user to your content’s home. You have to coordinate the code change that changes the URL in tandem with the creation of the redirect.
You can do both now with one commit.
You can easily redirect users to the right URL by adding a _redirects file to the build output directory for your project.
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
You can easily create new redirects or import existing ones using Cloudflare’s support for _redirects files.
Top Notch Security without Sacrificing Performance
Cloudflare made sure when they started their service performance and security were made priorities and improvements are always being made to achieve this. Security can sometimes slow down, impede performance; Cloudflare makes sure this never happens.
Cloudflare Access Integration offers Protected Previews
Cloudflare Pages simplifies collaboration by generating unique preview URLs for each commit you make. Anyone on a team can check work in progress easily with the preview URLs.
Restricting access to preview deployments is easy as a click of a button with Cloudflare Access integration.
Each request is carefully checked, by default members of the Cloudflare organization are automatically added, and when you send them a preview link, they are prompted for a one-time pin, that is sent to their email for authentication. This policy can be modified to integrate SSO provider of your choosing. In the free tier of Cloudflare Pages 50 seats are included.
Cloudflare Tunnel Enables Live Previews
Preview deployments make it easy to share progress but sometimes a live collaboration session is the best way to put the finishing touches on a project or make last minute copy changes.
Cloudflare Tunnel goes beyond preview deployments by exposing your localhost through a secure tunnel to an easily shareable URL. With this capability you can get live feedback from teammates before final commit to source control.
Speed and Scalability
Asset Optimization
As noted before Cloudflare Pages is hosted on the same network that Cloudflare has been using and optimizing for over 10 years. During all this time the folks at Cloudflare have learned a lot about performance and website acceleration.
Smaller content takes less time to transfer thus one of the best ways to improve your site’s performance is by serving smaller content. Compression is one of the ways you can make your content smaller.
Image Compression
Serving images efficiently can have a great effect on performance, which makes sense because images represent some of the largest type of content served by a website. Polish is used to compress images sending fewer bits of data over the network thus improving efficiency, performance. Webp versions of your images can be served instead of jpeg or png.
Brotli and Gzip
Serving smaller files of HTML and JavaScript can also have a profound benefit in performance as well. Cloudflare Pages can serve your content compressed with Gzip or Brotli based on the client making the request. Added benefit of static content is the fact that static files are able to be preprocessed at build time rather than on the fly which results in better compression, significant performance improvements. Literally shrinking content is another great way of making them smaller.
Resizing Based on Device Size
It doesn’t make sense to send oversized images to clients with small screens. For example, a user on a mobile device should not be receiving the same size image as a user on a PC. Cloudflare Pages is optimized to send resized images based on whether the client is a desktop or mobile device.
Git For Version Control
Direct integration with GitHub is provided for developers. This ecosystem will continue to grow to offer more providers like Gitlab, Bitbucket etc.
Webhooks
It is sufficient to rely on committing your code as a way to trigger a new preview if you are managing all of your code and content through source control, but if you are managing your code in one place and the content is in another location, like in a CMS, you may want to preview the changes before they go live.
A/b Testing Provided
It is inevitable that no matter how much local testing you have done and how many friends, co-workers you have received feedback from, some unexpected behavior is bound to go unnoticed. These bugs and or typos only get caught while in production. You do not want this impacting all your users at once.
Cloudflare Pages offers you the ability to roll out your changes to a percentage of your traffic, thus giving you better control of rolling out changes into production. This way you can be confident in your changes before you go 100%.
Full Stack Applications
As you can clearly see from reading this article about Cloudflare Pages it is without a doubt well suited to serve static content. Supporting static content is just the beginning with Cloudflare Pages. The goal is to make full stack application development as easy on this platform as static site development. Application static assets with be deployed to Pages with the use of APIs making them dynamic. Stay tuned for my next post on full stack development with Cloudflare Pages!
Final Thoughts
Static applications, Jamstack sites, are getting to be quite popular and for good reason. They are fast, low maintenance and usually much cheaper than traditional applications. Based on your use case instead of using a CMS like WordPress which is much heavier, costs more and harder to maintain you can try a static site instead; Cloudflare Pages is new to this arena, but you should try to run your static sites on it. Its pretty easy to get started.
I have been using GitHub Pages, Vercel and Netlify to handle my static applications. As you can see Cloudflare Pages is a viable contender. Cloudflare’s performance and pricing can not be beat. In the next coming weeks, I will test this new service thoroughly by launching a few static sites as well as headless WordPress applications and come out with new posts and tutorials based on my findings, stay tuned!
I thank you for reading my article, please feel free to leave some feedback by commenting below.
Author
