Setting up End to End Encryption with Cloudflare

Setting up End to End Encryption with Cloudflare

1) Registrar to Cloudflare with DNSSEC

  • Go to cloudflare.com and either set up a new account or add the new site to the account
  • Under home, add new site domain to the field
  • Choose the plan: Free or Paid
  • MX records and A, AAA, or CNAME records
  • Follow instructions to remove name servers and add offered name servers
  • Set up DNSSEC
  • @ the registrar (domains.google.com) add DNSSEC

Now the Registrar has a secure connection to CloudFlare


2) Point Cloudflare to the Server

On the server, create a directory titled with the same name as the domain. Place a temporary html file to ensure successful connection

  • A Record with the domain as a name and point it to server IP
  • CNAME of www and point that to exmaple.com
  • NS of example.root with server address. Typically there are 3

On the Server: CPANEL > Domains

Create a domain and redirect it to the site directory. A subdomain of example.com may have to be created


Cloudflare: SSL/TLS

  • Overview tab: select Full(strict) is selected
  • Edge Certificates tab toggle on Always Use HTTPS
  • Origin Certificate: Create Certificate
    • Private Key Type: RSA
    • leave the rest alone and click Next
    • Key Format: PEM(Default)
      • Origin Certificate
      • Private Key (copy to clipboard)

Server > CPanel > SSL/TLS > Private Keys (Key)

  • Select: “Generate, view, upload, or delete your private keys”
    • Go to: Upload a New Private Key
    • Paste the Private Key in the box
    • Description is optional: this will be overwritten with the next step

Server > CPanel > SSL/TLS > Certificates (CRT)

Go back to Cloudflare > SSL/TLS > Origin Server > Download & Copy Origin Certificate

  • Select: “Generate, view, upload, or delete SSL certificates”
  • Go to: Upload a New Certificate & paste the Origin Certificate
    • *description should auto populate
    • Save Certificate

Server > CPanel > SSL/TLS > Install and Manage SSL for your site (HTTPS)

  • Select: “Manage SSL sites.”
  • Browse Certificates
    • The Key & CRT together will populate the description
    • Select: The specific certificate that you want
  • Domian:
    • Select: the domain that you want to apply it to
    • *may auto configure
  • Install Certificate
VS CODE with Index.PHP

VS CODE with Index.PHP

Go to VSCode Settings and add this to the JSON file

Then install the FireFox live server web extension and sign in with :5500

CSS Grid at work

CSS Grid at work

A client of mine wanted to display his work in a grid. So, I decided to use CSS grid for this project. I have to say, it works pretty well, even on mobile.