Tutorial: Cloudways, Cloudflare, Let's Encrypt Wildcard SSL, and Statically CDN


#1

This tutorial is recommended for users who know how to navigate the backend of Cloudways, Cloudflare, and their respective domain registrar. However, there are links available for beginners at the start of most sections. These links will provide extra information that might be unnecessary when combined with this tutorial.

Questions should be posted in the comments and hopefully a community member will answer it. Although, please Google before commenting, as there is most likely already an answer to your question.

Note: The information comes from other online articles and personal setups. Please comment any outdated or incorrect information. You are responsible for your actions when following this tutorial.


Cloudways Server Settings


Beginner: Cloudways Server Cloudflare WAF Module

From the Server Management area click on Settings and Packages. Then, click on the Advanced tab.

Under WAF Module, select Cloudflare and enable HTTP/2.

Under the Packages tab. Select PHP 7.3 and MariaDB 10.3.

Cloudflare Configuration


Beginner: How to add a domain to Cloudflare

After adding a domain to Cloudflare, log into the Cloudflare backend. Then click on the DNS tab and delete all the A records and CNAME records. Do not delete any other records such as MX records, etc.

Decide whether to use www or non-www for the root domain and choose an option below.

Afterwards, set all the proxy statuses to DNS only (Grey Cloud) and a TTL of Automatic.

Option 1: Domain with www

Option 2: Domain without www

Subdomain (Optional)

To add a subdomain create an extra A Record pointing to the Cloudways Server IP.

Cloudways - Create an Application and add a Domain Name


Beginner: How to add an application to a server
Beginner: How to add domain to Cloudways Application

Log into the Cloudways Platform and add the latest WordPress Appliciation to the server.

From the Application Management area, click on Domain Management.

Add the Primary Domain with or without www depending on the Cloudflare A record used above.

Add any subdomains under Additional Domain section with this format < subdomain.example.com >.

Cloudways Application Let's Encrypt Wildcard SSL


Beginner: How to install Let’s Encrypt on Cloudways Application

From the Application Management area, click on SSL Certificate.

Make sure that the toggle points towards Let’s Encrypt SSL Certificate.

Enter your email address and root domain as < *.example.com > into the Domain Name field.

Check Apply Wildcard. You will see a DNS record that you will need set up a CNAME for in Cloudflare DNS.

From the Cloudflare backend click on DNS tab. Add the CNAME provided with a Proxy Status of DNS Only (Grey Cloud) and TTL of 2 minutes.

Then, head back to the Cloudways SSL Management area. Once the DNS record has been propagated (~5 minutes), click the Verify DNS.

Cloudways Notice: Let’s Encrypt Wildcard SSL certificates only work with a SINGLE domain and are not available for multiple domains. One SSL Wildcard domain per server will only work.

Cloudflare Security and Slight Optimization (No Caching or Minify)


Please verify your website’s DNS and Let’s Encrypt SSL are working before turning on Cloudflare CDN. Also, wait until the Universal SSL Certificate (up to 24 hours) is active under the Crypto tab before changing Cloudflare settings.

From the Cloudflare backend, click DNS tab and activate Proxy Status (Orange Cloud) for all A records and CNAME.

DO NOT activate Proxy Status (Orange Cloud) for _acme-challenge CNAME. Grey cloud only.

Cloudflare Settings

** These setting only work while Cloudflare CDN is turned on.
  1. Let’s Encrypt Wildcard set SSL to Full (Strict)
  2. Let’s Encrypt non-Wildcard set SSL to Full, if issue arise then use strict.
Setting Value
SSL Full (Strict)
Always Use HTTPS On
Authenticated Origin Pulls On
Minimum TLS Version TLS 1.2
TLS 1.3 Enabled+0RTT Enabled+0RTT
Security Level High (Under Firewall --> Settings)
Challenge Passage 30 Minutes
Browser Integrity Check On
Privacy Pass Support On
Brotli On
WebSockets On (Unsure w/ LE SSl, any comments?)
IP Geolocation On
Email Address Obfuscation On
Server-side Excludes On
Hotlink Protection On

Page Rules

Add the following two page rules to futher secure the WordPress Backend.

Cloudflare “I’m Under Attack” causes visitor to receive an interstitial page for about 5 seconds while Cloudflare checks to make sure it is a legitimate human visitor.

Firewall Rules

((http.request.uri.path contains "/xmlrpc.php") or (http.request.uri.path contains "/wp-login.php") or (http.request.uri.path contains "/wp-admin/" and not http.request.uri.path contains "/wp-admin/admin-ajax.php" and not http.request.uri.path contains " /wp-admin/theme-editor.php")) and ip.geoip.country ne "US"

Firewall rule challenges any visitor outside of the US from accessing wp-admin* and wp-login.php.The action could be set to block instead of challenge (Captcha) any visitor not from the US, if desired. Simply replace US with your country code found here.

Credit: Runcloud

(http.user_agent contains "Yandex") or (http.user_agent contains "muckrack") or (http.user_agent contains "Qwantify") or (http.user_agent contains "Sogou") or (http.user_agent contains "BUbiNG") or (http.user_agent contains "knowledge") or (http.user_agent contains "CFNetwork") or (http.user_agent contains "Scrapy") or (http.user_agent contains "SemrushBot") or (http.user_agent contains "AhrefsBot") or (http.user_agent contains "Baiduspider") or (http.user_agent contains "python-requests") or (http.user_agent contains "crawl" and not cf.client.bot) or (http.user_agent contains "Crawl" and not cf.client.bot) or (http.user_agent contains "bot" and not http.user_agent contains "bingbot" and not http.user_agent contains "Google" and not http.user_agent contains "Twitter" and not cf.client.bot) or (http.user_agent contains "Bot" and not http.user_agent contains "Google" and not cf.client.bot) or (http.user_agent contains "Spider" and not cf.client.bot) or (http.user_agent contains "spider" and not cf.client.bot)

Firewall rule to block all unkown bots. If a bot does not work, it is most likely not on this list of known bots. All you have to do is add it. There are a bunch of GOOD bots missing that will be blocked, please only add this firewall rule if you understand how to add additional bots to the list.

Credit Runcloud

Statically FREE Image & GIF CDN Plugin (Optional)



Replace example with your domain and add www if needed.

CDN URL: < https://cdn.statically.io/img/example.com >

Exclusions: < .php,.js,.css,.woff,.woff2,.ttf,.txt,.xml,.rar,.zip,.apk,.json > - No Spaces

Issue: Blurry Thumbnails

Firstly, WordPress shrinks or crops an image to a specific dimension. Then, Statically CDN compresses that image. The result is a blur thumbnail.

There is a way to disable compression for images server via Statically by using url parameters
< ?quality=100 >, but I haven’t found a way to append it onto the CDN URL as we can only use the root domain. Anyone is welcomed to help in the comments.

Breeze Installation

CDN Enabler

Plugin: https://wordpress.org/plugins/cdn-enabler/

Don’t forget to enable CDN HTTPS

Other Cache Plugins

Most Cache Plugins have a CDN section. You can try the same settings from above at your own risk. To check, upload an image to your website and use it in a post. Right-click and try opening it in a new tab. If the url is statically it works. Remember to include the exclusions.

Final Words


Following this tutorial will give you a head start in optimizing and securing your WordPress website. There is no need to redirect http to https via htacess and there is no Cloudflare redirect issue. Yet, that ultimately depends on what you do to your website afterwards. Also, remember performence depends significantly on the content you decided to add.

This is not a caching guide. There are so many plugins and settings that you will have to read up on. Cloudway’s Varnish Cache may not be compatible with any cache plugins until configured correctly.

https://varvy.com/tools/redirects/
Depending on what you choose (www or non-www), one of them will redirect twice. It should aways redirect to https then www or non-www as per HSTS requirements. HSTS is another topic however.

https://tools.pingdom.com/
https://gtmetrix.com/

Tip: While developing a website disable Cloudflare CDN (Grey Cloud) or turn on development mode. Either way, your settings will be saved. Then, disable caching and minification temporarily.


#2

Why you’re not using Cloudflare to cache? Any reason?


#3

Cloudflare cache is enabled when the Proxy Status is turned on (Orange Cloud). However, that alone does not cache all the resources on the website and optimal caching requires customization. For instance, there are dependencies such as Woocommerce, Varnish, and Minification Plugins that require cache customization / testing. A bit more research is needed.

Cloudflare does cache and deliver images. Statically CDN does the same plus optimization. Images should only be delivered via Statically CDN when Cloudflare Proxy Status is turned off (Grey Cloud) or on pages with Cache level set to bypass.

TL:DR Cloudflare cache is enabled, but not fully setup. Need to do a bit more research.