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.
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
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
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.
- Let’s Encrypt Wildcard set SSL to Full (Strict)
- Let’s Encrypt non-Wildcard set SSL to Full, if issue arise then use 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|
|WebSockets||On (Unsure w/ LE SSl, any comments?)|
|Email Address Obfuscation||On|
Page RulesAdd 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.
((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.
(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.
Statically FREE Image & GIF CDN Plugin (Optional)
Replace example with your domain and add www if needed.
< https://cdn.statically.io/img/example.com >
< .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.
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.
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.
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.
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.