Setting up WordPress Behind Cloudflare

Hi there, my name is Liam Crowter. I'm one of the technical support engineers here for Cloudflare. I work in the London office. It's great to be able to present to you just some examples of some of the ways that you can use Cloudflare with your WordPress platform. One of the things for me, before I started working at Cloudflare, when I started learning about web development and just seeing how you can create websites and make the most of the tools that you have at your disposal in this day and age, was really to start playing around with WordPress and just get a bit of an idea of how exactly Cloudflare can benefit your site. It's been very much a learning experience and I'm hoping to share just some of the things which you can do on your site to help give your WordPress site a bit of a boost. I hope that it's not necessarily going to be an absolutely exhaustive look at everything to do with WordPress and everything to do with Cloudflare, but certainly some of the features that I'm going to show you should be beneficial. We'll go through actually getting a site set up just so you have a good idea of how exactly things fit together. We've got a bit of a list just down the side here, so we have just an example of just some of the steps that you would go through. I'm going to be using DigitalOcean here and I believe I've been joined by Christy as well. Sorry, Christy, have I missed you? Are you here? Hi there, sorry, I just got in a I'm joined by Christy Draper who's one of my colleagues in the customer support team in the Austin office. How are you doing, Christy? Pretty good. Hopefully I'm not too late and I haven't missed anything. No, you haven't missed anything. I've just given a bit of an overview of what exactly we're going to be going through. It's good that you're here because have you had a lot of experience with WordPress sites in the past? Yes, I just set up a site for my personal domain and that's why I was interested in doing this because I know I had a lot of things that like I ran into even as a support agent, but I wanted to make sure we cover those. Cool, yeah, so we'll go through a few different things. I mean, what we're going to do in order to sort of expedite things a bit is just showing you some of the ways which you can speed up the process of actually putting a site together and just getting it live and using Cloudflare as well. So, I'm hoping that this will prove useful to some people and as ever, there's a whole bunch of different ways that you can go about doing this. There's no one right way, but one of the great things about what we have now is we can actually build up a server, create a server, delete it if we need to. So, we have a lot of flexibility and some of the ideas you can put towards a production environment or it may give you an idea of something that you want to pursue or put into in place on your own website. So, just to start off here, so the recommended requirements are you need one gig of disk space, one gigabyte. You can use Apache or Nginx. In this example, we're going to be using Apache. For the database, you can use MySQL or MariaDB. Half a gig of RAM at a minimum. PHP, you want to have the most recent version of PHP available. So, 7.3 or greater and one gigahertz plus processor. So, really not anything particularly strenuous. So, I mean, the options that you have here with DigitalOcean, even the lower end virtual machines here are going to be able to cope with having a WordPress site set up on them. So, we'll just go and get this set up here and just put it in London. And, of course, with Cloudflare, once you have your site set up on Cloudflare, we will serve that. We will serve the site from all the data centers that we have. So, in terms of if you go to your site via if it goes to your site in London, so you'll go to the website through our data center in the UK, and then what will happen is and the static resources will be cached. We don't actually host your website, but we will cache the static resources there and then serve them back dependent on the cache settings that you have set up. So, got some additional options here. Of course, we do support for IPv6. For the purposes of expedience, I'm not going to enable that, but DigitalOcean gives you some options in terms of configuring IPv6 support and monitoring. So, you can set up an SSH key so that you can SSH into your server. Again, for the purposes of expedience, we're not going to set that up just now because we've only got half an hour, but in this case, we're just going to set up a password. So, I'm not going to use that one. And then just a few final bits. So, you have host name and some various other bits here, and then we just create that. So, what I've actually done, it'd take a little bit of time to fill up, but we have actually already got a WordPress server set up. So, what I'm going to do now is I'm going to go into the dashboard. So, we can see here we have this droplet which has already been configured. So, this is just a test droplet as an example that we're using, nothing particularly much on here. So, we're going to remove the IPv6 ones because you don't have IPv6 on this site, but this is proxied at the moment, which means if I go to this website, if I dig the DNS records, we can see that we're getting Cloudflare IPs, and that's a good indicator that this site is on Cloudflare, and if I wanted to just resolve to the website, I would grey cloud this, and there's a few reasons we might want to do that. If it's for troubleshooting purposes, for mail delivery because we don't proxy mail traffic, you can grey cloud for mail records. There's a lot of really good sources of information at our knowledge base. So, you can go to the help centre, and it gives you a whole ton of different information. So, you have stuff like subdomains, for example, and it gives you the examples of subdomains which are going to be compatible with Cloudflare, which you can proxy through us, and we have like Spectrum, for example, with these DNS records, you can only proxy HTTP and HTTPS, but Spectrum can expand that depending on the plan that you're on. So, what we're going to do here, we've already got these DNS records configured for this site. So, we're already logged in here. So, what I'm going to do is I'm just going to show you, so we set up the DNS records in Cloudflare. One of the important things to do is to make sure that, say, for example, we have someone who wants to send a DDoS attack or something like that, we want to basically ensure that their traffic is going through Cloudflare so that we can mitigate that attack and we can block any attackers if they go through our network. So, what we're going to do here is, depending on the server that you're using or where you have your system set up, you can set up your firewall to actually restrict access to Cloudflare IPs. So, in this example here, I can find where, where did I put it? Networking. So, in here, what we have is we just set up a firewall which actually restricts access via port 80 and port 443, which is HTTP and HTTPS. What this does is it restricts it down to our Cloudflare IPv4 and IPv6 addresses. So, if we go to Cloudflare IPs, you can see here that we have, we have Cloudflare's IPs here, and when there's traffic going through our network, you will see one of our IPs instead of, instead of the client IP that it's coming from if it was going direct to the web server. So, this is really important to prevent, instead of going direct to the IP address, to say we take, if I take this one here, and I just try to go for this, and you see it won't let me go to it. So, I'm not actually, I'm not actually able to go to the IP address, and that actually restricts it down to just Cloudflare IPs. So, any traffic that goes through the website has to go through Cloudflare, and that ensures that the origin is not exposed to attack. So, the next thing we're going to do is we got a WordPress plugin. So, I'm just going to go to, where have we got this here? So, I've already set this, already set this up, but what you can do is you can just go into your plugins in WordPress, and just add a new plugin, and you can search for our Cloudflare plugin there, and this gives you a whole bunch of different ways to set up your site through Cloudflare, and it just gives you a nice button where you can apply this, and it will basically optimize your setup, and again, we give you a link to a help article, and it just describes some of the settings that we apply. So, stuff like security level, which essentially, when the client comes into your website, depending on, we give it a threat score, and then depending on the threat score, if it is above or below a certain threshold, we will actually challenge the traffic to make sure that it's coming from a legitimate client, and then stuff like caching level. So, by default, we cache only static resources. So, HTML, for example, is not a static resource. It's dynamic, and we don't necessarily want to cache that, because with a CMS such as WordPress, we obviously don't want to necessarily cache HTML, which is specific to a certain user. So, I'm rushing along here. Have you got any questions at this point, Christy? I just wanted to add to that that the WordPress plugin is great for overall site settings like that, but if you want to get into specific URLs or more granulated settings, then you would need to go into the Cloudflare dashboard. The WordPress plugin doesn't have everything in there, but it's great for at-a-glance changes or updates to your site. Yeah, absolutely, yeah. It's not the be-all and end-all, but it does give you a good way to just get things at a glance, and then if you need to do specific changes or stuff, you can do that in the dashboard, and you've got a few settings in here, like the automatic cache management. They basically just purge the cache. So, if there have been changes on the website, it will actually purge it for you when it detects that there's been changes made. Okay, great. So, one of the things I just mentioned was about HTML caching. So, one of the great things you can do on a business plan is you can actually add business plans, enterprise plans. You can actually cache the static HTML on the site. So, there's another good article about this which covers this, and it's essentially bypass cache on cookie. What that does is when it detects that a cookie is present in the request from a client that's made, what it will do is it will actually bypass the cached file that we have and actually request that from the server. So, just going to create a page rule. The thing about page rules is they work based off of precedence from top to bottom. So, say, for example, I have a page rule for a redirect, and I prioritise that for a specific string, and I have another one which does the same thing, I need to make sure that if I wanted one to take priority over another, that that is higher in the order. So, just set this up to cover the… Hey, Liam, I'm not sure if you're able to share your screen without showing any sensitive information, but I don't think we or the other viewers can see it. Oh, you can't see? Oh, okay. Let me zoom in a bit. Is that a little bit easier? Oh, no, I'm just only seeing your face. I'm not seeing your screen at all. Oh, okay. I'm sorry about that. Let me just share my screen here. I figured it wasn't too important in the beginning because we were just getting logged in and stuff, but now that you're clicking on specific things, we might be able to see that. Yeah, cool. So, you can see some stuff on the screen here now. Is that right? Cool. Great. Okay. That's a rookie. You can tell I don't do this often with the streaming. So, what we've got here is we've got a page rule here. So, this is pretty standard. So, we want to set up a page rule to just set up static HTML caching. So, we have a KB article which covers this, but specifically for WordPress, you've got these cookies here. So, we'll just set up bypass cache and cookie, and we'll enter those there, and then we'll do cache level, cache everything. So, what this does is it will cache everything on the site, but if we see these cookies, then it will actually go to the server to retrieve them rather than returning them from the cache. So, just pick a setting and do the edge cache TTL, and it's very much dependent on how long you want to cache the resource at the edge. So, we'll set this just to a month, and then we'll save and deploy that, and that's a really good way of one of the things with dynamic sites is you want to be able to cache HTML to be able to return this faster to the client, but if you have a dynamic site like a WordPress site with a CMS, then that is obviously quite important there. So, you can apply this rule, and that essentially allows you to cache the resources without serving any authenticated stuff or anything like that to the client. So, that's really useful. We've got another really great feature, which is access and Cloudflare for Teams. So, you can see here as well. So, I've just gone into access here, and I've created an application. So, it's just for the WP-admin, which is the admin console. So, if you want to lock this down and prevent this from being accessed to only certain people, then you can do that. It's quite easy to just go into Cloudflare for Teams, and you set up an application, and you just use that against the WP-admin, and you can set up a rule. So, in this instance, I've just set up a basic rule to allow Gmail addresses, and I've got an example address that we can use. So, we'll just test that in a sec, but just to show you through the rest of the application setup. So, we have some setup advanced settings for cause headers here. If you need to set up your cross-origin stuff in here in Teams, you can do that. And then authentication, you can set up a whole bunch of different identity providers, and in this instance, we're just using one -time ping, because we just want to allow some quick access here. Just test it against an email address, just to make sure it's working. So, just add that there, and one of the other things you need to do if you're setting this up with the WP-admin console is you just need to set up a bypass for the admin-ajax.php path, as that's used for some APIs, and you don't necessarily want to block that path off with access. So, now that we've set that up, what we can do is we can go back to… …we'll just go here, and what you see now is we get a prompt to actually get onto the admin console. So, this is basically a good way of, instead of necessarily having to use a rate limit, so in the dash, you could set up a viable rate limit for the WP-admin console instead what you can do is you can actually restrict this to certain domains, and dependent on the policies that you configure in Cloudflare for Teams, you could use that. You can still use a rate limit if you wish, but this is just another way of restricting access to areas that you only want certain people to have access to. So, that's a really useful feature there. So, just to add to that, kind of to jump back to the page rules, one thing that I did run into is I had trouble when I was trying to edit things in my admin panel, so we definitely recommend creating a page rule to bypass caching and security on the actual admin site so that you don't run into like timeouts or other errors when you're trying to edit there. You don't want to be caching things in the admin, because then when you try to save, it gets mixed information, and you can throw errors there, and we do have a really great support article, so I won't take up too much time in here, but I just wanted to mention it, that if you are new on WordPress and Cloudflare, definitely look up the article. I always just search for WP-admin, and there's a great instruction there on how to bypass caching and security in the admin panel so that you don't run into those errors, and I think, yeah, Liam's pulling it up now. Yeah, you're quite right. I just missed that one, so the nerves are getting to me slightly. I'm here. Yeah, no, absolutely. So, the WordPress admin console, this is actually why I touched on the page rule precedence, actually, because if you've got this set prior to the bypass cache on cookie one, obviously, you can set this up to we go back here, and we go to set up WP-admin, and then we just set this up, so it's actually bypassing the cache level, and then we disable the performance, and the, well, disabling the security, that's an interesting one, because that's basically sometimes what you do is if you're submitting certain things, it may trigger certain features like the WAF, but if you're restricting access to the admin console anyway, you may not necessarily want to do that, because you know that it should just be authenticated users getting to that part of the system anyway. So, we'll just set that up now. So, yeah, so there you go. So, in here, you would just have this would trigger first for the admin console, and then we would cache the HTML if it triggers against the second page rule. So, yeah, so we covered a few different things here. Let me just see if we've got any specific questions. I think I don't have any questions that I can see here, but did you have anything you wanted us made to explore, Christy? Sorry, I'm clicking the wrong buttons here. So, some of the issues that I ran into were regarding like the SSL. I kept getting SSL errors even though I was seeing it was issued on Cloudflare's side, and I had to kind of like, you know, tweak around with some settings to get it right. I think primarily was since I was using just like a generic template from WordPress, there were a lot of elements on the page that were throwing like mixed content errors because they weren't secure HTTPS hardcoded. So, one thing that I actually had to do was go in and set the always use HTTPS setting in the Cloudflare dashboard to kind of force all of those hardcoded elements to be HTTPS, and that resolved a lot of my SSL errors, but that was one of the things that gave me a little trouble even being able to see like both ends because I just simply didn't know the code because I was using a generic template. Yeah, so one of the things that you like to say there is that the actual URIs on the page will not be rewritten necessarily in certain cases if you're using like a template. So, this URI here, it actually defines what the power links are throughout the site. So, if you want to make sure that your WordPress site is using HTTPS, you can actually just rename the site here. Now, the important thing to remember is that WordPress is Cloudflare and WordPress, your WordPress server. So, Cloudflare is essentially sitting in the middle of the connection and your web server dependent on whether or not it's returning responses to HTTPS connections, whether or not it's returning responses to HTTP. You need to make sure that your SSL level is set correctly so that if we have a number of different SSL modes are flexible, what that will do is that will actually, the client will connect to Cloudflare via HTTPS and then we will connect from Cloudflare to the origin via HTTP. So, that allows you to serve an SSL certificate to the client if you don't necessarily serve HTTPS at the origin. In this instance, you can see as part of the process for setting your site up through Digital Ocean, you can actually generate a let's encrypt certificate at the origin and you can use that with full strict or alternatively, you can use a origin CA certificate which is issued by Cloudflare for connections between Cloudflare and the origin and that is the only connection that it permits. That essentially acts as a self-signed certificate if I'm going directly to the origin. Another thing which I'm going to cover is just a little bit about HSTS. HSTS is something which it is dangerous to do without sort of planning for it but inherently, it's sort of quite simple in its purpose. It essentially just upgrades HTTP connections to HTTPS and it prevents you from going to the site if it's on an HTTP connection and you can see here when we actually try to enable this through Cloudflare, it will give you guidance in terms of what exactly HSTS does and it allows you to actually enable a whole bunch of different options with regards to HSTS. So rather than having to configure the header at your origin, you can actually set up HSTS through Cloudflare and configure these options here and then even stuff like preload so you can submit to the preload list and have your site be accessed that way. So we provide a lot of really great options with regards to getting your site ready for SSL connections and especially for WordPress where that sort of thing, there's a lot of plugins which sort of do that stuff within WordPress but a lot of the stuff you can sort of handle through this dashboard and maybe there's a few tweaks at the origin you may need to do but there's a lot of flexibility here so we're running low on time. Yeah Liam, I was going to say we have about two minutes left here. There's a few other things I wanted to cover but I'm sure maybe we can run through some more stuff another time. Yeah part two. Yes, yeah maybe but I hope this did shed some light on maybe some of the stuff you can do with Cloudflare integrating this with your WordPress site. The best thing to do is explore, just experiment with some of the stuff on your site and it's good. The best way to learn is just to experiment so that's great. And also just you'll notice that those help links are under almost every module that we have in the dashboard so click those if you're not sure what something is and there will be a pretty good description there and usually a link to a support article as well. Absolutely, cool. Well great, it was nice speaking to you Christy and we'll see you all very soon. you