Using CakePHP, Alpine JS, with Cloudflare for cheap but robust web hosting

Caching through Cloudflare can reduce your server load to essentially be zero enabling you to serve a massive amount of requests very cheap and near instant. You don't have to worry about traffic surges, bots, bandwidth usage, or exhausting some hosting resource. This approach works best if your entire website can be cached but that is often not possible. The next best thing is to combine caching with dynamically serving user specific content.

CakePHP templating engine

The templating engine with cakePHP is super fast and easy to use. You can use regular php code directly in your template, no need to learn some specialized syntax like twig. It's easy to set up and can be served cheaply from a php hosting service. No need for a VPS as Cloudflare will handle the traffic for us. You can find a shared PHP hosting service for less than $5 per month these days and when combine with CloudFlare, your website will be able to handle a very large number of requests.

Here is an example of CakePHP View so you can see how easy it is to set up.

Think of cakephp as your static page generator. Any content that will not change can be created through the templating engine, be it single pages like an about us page or dynamic pages generated from a database like product pages. The difference is that the pages will not need to be pre built like with a static site generator, they can served on demand and then cached by CloudFlare so it makes the deployment much easier while getting the same benefits.

Alpine JS for dynamic content

Some parts of the website you may want to be user specific. Like on an e-commerce website, the cart, favorites, recently viewed products. These parts can be fetched dynamically so instead of generating the entire page with just small bits changing, only the data for the dynamic parts needs to be served greatly reducing the load on the server. You can use AlpineJS to fetch content from an API and populate the dynamic parts.

Here is an example of Fetching data with Alpine JS.

CakePHP can have an API route set up easily. This can be set up to be excluded from being cached by CloudFlare and used to serve the dynamic parts efficiently.

CloudFlare rules

Set up your domain to be proxied by CloudFlare. The service tries to bring in all rules you may have set on your domain already so generally it's a pretty straight forward process to get your domain set up.

Here is some documentation on Adding a domain on CloudFlare.

Set up a Cache Rule to match the url structure of your site and set it as "Eligible for cache" and set "Ignore cache-control header and use TTL" to how long you want the static content to be cached. This should be set to how often the content may change, you could set it as high as a year.

Next, create a second rule for an API path and set it to "Bypass cache". This will make sure that the dynamic content does not get cached.

Summary

By following this simple setup, you can leverage the free tier of CloudFlare to handle a very large amount of traffic to your website using a very cheap hosting plan. In addition to caching, you also get the many benefits of CloudFlare like bot protection.