Setting up your website with Cloudflare - Full tutorial

Getting-Started

#1

PART 1: Creating a Cloudflare account, adding a domain, changing nameservers and checking imported DNS records.

Go to cloudflare.com and click 'Sign Up’
image

Enter your Email and create a password, read the terms and notices and click ‘Create Account’
image

Enter your website
image

Click ‘Add Site’
image

Click ‘Next’
image

Select your plan. I recommend starting with Free
image

Read and confirm that you agree with the statement
image

Check that these DNS records match those listed at your domain registrar / web host and add any that are needed
image

Click any orange clouds (:orange:) to turn them grey (:grey: ) and click ‘Continue’
image

Copy the nameservers required by Cloudflare
image

Log in to your Domain registrar and edit the nameservers to the ones provided by Cloudflare
image

Once you have changed them, click ‘Continue’ at Cloudflare
image

Click ‘Re-check now’
image

The changes may take some time to propagate but you should see this message once it is complete
image

Visit your website and check that it is functioning correctly
image


PART 2: Crypto Settings 1

The settings covered here can all be found by visiting cloudflare.com 1, logging in, selecting the domain and choosing:
image

There are explanations of the settings, at the bottom of each I will cover which you should choose!

SSL Modes
image

Off
The connection between your visitor and Cloudflare and Cloudflare and your server do not use SSL and are not secure. Visitors can only view your site over HTTP.

Flexible
The connection between your visitor and Cloudflare is secured, but the connection between Cloudflare and your server is not. You will not need a certificate on your server for this mode. This option is NOT RECOMMENDED if you have any sensitive data processed through your site.

Full
The connection is secured between your visitor and Cloudflare and Cloudflare and your server. Your server will need to be configured to accept HTTPS connections and have a certificate (It does not need to be valid and is not verified)

Full (Strict)
The connection is secured between your visitor and Cloudflare and Cloudflare and your server. Your server will need to have a VALID certificate from a trusted authority installed to use this mode.

For SSL Mode, you should choose Full or Full (Strict), NOT flexible! Flexible makes your site partially secure - it encrypts the connection between the visitor and Cloudflare - this means they see the :ssl: in their browser and makes them think it is fully secure. It is not! The connection between Cloudflare and your origin server is unencrypted and traffic can be intercepted there.
To enable Full, you need to have any SSL certificate installed on your server, this can be a self-signed or expired certificate. Ideally, you would enable Full (strict) which requires a valid SSL certificate to be installed on your server. This can be a paid for one, a free Let’s Encrypt one or a free Cloudflare origin certificate:

Cloudflare Origin Certificates
image

A Cloudflare origin certificate can be installed on your server so you can use Full or Full (Strict) SSL Modes.

If you click ‘Create Certificate’, use the default options unless you have a reason to change them, and click ‘Next’, a certificate will be generated.

How you install this certificate will depend on your server / host. When you go through this process, Cloudflare will give you a list of support guides for different servers. If you have any problems installing it, you should contact your web host for guidance.


PART 3: Enabling :orange:
What does :orange: do?
•The orange cloud means that traffic to that hostname is running through Cloudflare
•This includes
-Masking your IP
-Caching
-SSL (if enabled)

What records can you enable :orange: for?
A, AAAA and CNAME are the only records that can have enabled, but not all of them should be set to

When should you leave records :grey:?
•If the record is anything other than A, AAAA or CNAME
•If you are trying to validate a service with a record
•For non web traffic, including Mail, FTP etc.

How to change records to :orange: or :grey:
Login to Cloudflare
Select the domain
Go to the DNS tab
Click the cloud icon to toggle between :orange: and :grey:


PART 4: Checking your site
At this point, your site should be accessible over HTTPS, you should visit https://yoursite.tld and check it out.
If you do not see the site as secure or you don’t see the Cloudflare certificate, try clearing your cache / using a different device on another network.

Your site may be working perfectly now over HTTPS, if it is, skip to Part 5 of this guide. If not, read on!

One of the most common errors you may see is due to mixed content. This is addressed below. If you get a different error, I recommend searching the Cloudflare community (community.cloudflare.com) and Cloudflare Support (support.cloudflare.com)

What is mixed content?
Mixed content is when your site is loading over HTTPS, however some images / scripts / resources are being loaded insecurely over HTTP.
Your browser may give a notofication about it when visiting the site, such as:
image
or
image

If you see this error, you should enable:
image
in the image tab of your Cloudflare dashboard which can help with some issues.
If you still have some mixed content on your site, you will need to edit the resources to load over HTTPS. If you can edit the source code, you can simply change http:// to https://. If you use a CMS such as WordPress, have a look at their support articles for more info on fixing this error. There are many plugins etc. available that can do this.


PART 5: Crypto Settings 2

Always Use HTTPS

image

in the image tab of your Cloudflare dashboard

This setting will redirect visitors from the HTTP version of your site to the secure HTTPS version. This means that all visitors connections will be secured.



This is a Community Tutorial, most are wiki posts, so can be contributed to by Regulars and MVPs here, you can view all the community tutorials here. If there is a tutorial you would like to see, you can request one here.

Other great resources on this community include the Community Tips . These address best practices when configuring Cloudflare, how to fix issues you may see, and tools to troubleshoot. Also you can view Expert Tips, great posts on the community that can help users with a similar issue.

We encourage users to check out these great resources and the Cloudflare Support Centre before posting


DNS Switching
Developer left us
Cloudflare produces wrong A record and is pointing to a wrong IP address