Use PHP to build static pages

Using a framework like CakePHP, Wordpress or Laravel, you can build out your blog, e-commerce website, or anything else. Running LAMP websites can be done very cheaply these days and you will have a large choice of hosting companies. Working with PHP is easy and thanks to a large community, there is a composer library for just about anything you can think of.

One down side of PHP can be the way is uses sessions and the way it gets served through Apache. It is pretty efficient these days with Op code caching and services like Redis but some of these options may not be available on all hosts. A great alternative approach will be outlined in this article.

Cloudflare to the rescue

Cloudflare offers caching not just for your assets like images, js and css but you can use it to cache your entire website! When set up properly, you can reduce your server load to a fraction and server a huge amount of users for free.

1. Create a free account with cloudflare
2. Ad your domain and let Cloudflare import all your settings
3. Set your root domain and www to be proxied by Cloudflare
4. Now head over to the Caching or the Rules section and set up Cache rules
5. Use the Cache Default File Extensions Template to set all static files to be cached, make sure the eligible for cache option is selected
6. Now create a new rule and use the URI full to specify all the urls of your static pages using the wild cards, set these to be eligible. Edit the Edge TTL to define how long you want the page to be cached. You could set it to a month or a year even.
7. In case of Wordpress for example, you can set up another rule to exclude wp-admin from the cache, set this to bypass
8. Make sure the bypass rules come after the eligible rule. This way your backed will not get cached.

These rules take effect pretty much immediately so you can use the Chrome developer tools to check your progress. Under the Network tab, check the Headers section to see the Cf-cache-status show HIT. This tells you that the page was loaded from cache and it should load very fast.

Adding dynamic content back

If you are using a framework like CakePHP, you can easily add back dynamic content with just a little Javascript. Use something like JQuery to dynamically load elements from an API url that you excluded from the cache. This will off set the load of building parts of the website to be on the users browser and PHP is just interacting with your database and serving JSON. Much more efficient. For example in an e-commerce site, the product pages are static and your favorites and cart data can be loaded dynamically.

You can take this a step further and make your JQuery smarter where it leverages Local Storage to only update when there is a change to the users cart for example. We don't need to re load the cart on each page load.

Serving static content from an S3 bucket

It may be a good idea to keep your assets like your images in an S3 bucket. These files don't need to live on the same server as your PHP and often cheaper VPS hosts don't provide a whole lot of storage. If your website is image heavy, you can store all assets cheap on the Amazon infrastructure. To serve the images under your same domain name, you can use Cloudflare. This will also cache your images further reducing your S3 costs.

1. Create an S3 bucked with cdn.yourdomain.com this naming convention is important to follow.
2. If you already have a bucket, you can move your files over with a sync operation or the move action in the S3 interface.
3. Now set up the Permissions as shown below. The IP's are what Cloudflare uses. This way only Cloudflare can access them to make sure security can be enforced and you don't have unwanted bots driving up your costs. Make sure you also turn off the block all public access so the rules can work properly. You may also need to change your Object Ownership to ACLs Enabled depending on what you use to upload your files to S3.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cdn.kovifabrics.com/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": [
                        "2400:cb00::/32",
                        "2405:8100::/32",
                        "2405:b500::/32",
                        "2606:4700::/32",
                        "2803:f800::/32",
                        "2a06:98c0::/29",
                        "2c0f:f248::/32",
                        "103.21.244.0/22",
                        "103.22.200.0/22",
                        "103.31.4.0/22",
                        "104.16.0.0/13",
                        "104.24.0.0/14",
                        "108.162.192.0/18",
                        "131.0.72.0/22",
                        "141.101.64.0/18",
                        "162.158.0.0/15",
                        "172.64.0.0/13",
                        "173.245.48.0/20",
                        "188.114.96.0/20",
                        "190.93.240.0/20",
                        "197.234.240.0/22",
                        "198.41.128.0/17"
                    ]
                }
            }
        }
    ]
}

4. Now in Cloudflare, create a CNAME and just point it to your S3 buckets url. It will be something like cdn.yourdomain.com.s3.amazonaws.com. And that is all!
5. Now if you use WordPress or CakePHP, you can change your setting to use the cdn.yourdomain.com prefix for all images and other assets you choose to upload.

Thank you!

Hope you found this guide helpful and please feel free to contact us with any questions or comments!