Before using, u should know that Cloudflare isn't flawless for free, ur site using Cloudflare's CDN on Free Plan or Pro Plan won't be accessible on some old browsers, such as the ones in Windows XP, 'cause the ssl is based on SNI like other CDN. To make ur site on a CDN support all browsers, u'll have to spend a lot more extra money, which is not a must for a personal site.
If u made the decision, check my steps, which might meet the needs of ours(I'm supposing we're personal users):
Save ur money on the things such as VPS if u r only using it for ur personal blog. Try Github Pages (Click on ME) or Gitlab Pages (Click on ME) instead. The former is faster, the latter is easier to use. Choose one to ur liking. I'm currently using Github pages. However, I suggest people who r not familiar with the Git commands use Gitlab Pages. U should note that both of them r used to serve static resources like html, png, css, js.
Find the details about the static generators if u haven't decided: Click Here. It makes the process more automatical.
Generate and publish.
On Gitlab pages it could be done automatically by Shared Runners.
On Github pages u should generate ur site locally and then upload to ur Github repository using Git commands. Check the tutorial of ur chosen generator and do step by step.
Make sure the DNS of ur domain is powered by Cloudflare.
Bind the domain to ur site. On Gitlab pages u could use custom SSL for ur domain (Alternative, u could use CloudFlare's Origin CA, check this step-by-step guide out). On Github pages u could use custom SSL for ur domain too ans the the cert is automatically generated via Let's Encrypt for u.
(For Gitlab, since Github pages implement Fastly CDN itself.) Turn on CDN on the binded domain.
(For Gitlab, Recommended if u want ur site served in https version) Turn the SSL option to Full (Full (Strict) if u have valid cert or CloudFlare CA on the domain applied).
(Recommended) For comments,
Make full use of Page Rules, my Page Rules when I was using Gitlab pages:
1. http://*snorl.ax/* Forwarding URL: (Status Code: 301 - Permanent Redirect, Url: https://$1snorl.ax/$2) 2. https://isso.snorl.ax/* SSL: Strict, Cache Level: Bypass 3. *snorl.ax/* Browser Cache TTL: 8 days, Cache Level: Cache Everything, Edge Cache TTL: a month, automatic_https_rewrites: On
The first one is about http to https redirects on all domains.
The second one is about the SSL option of my comment server.
The third one is a must making ur whole site including .html files cached on CloudFlare Edge servers, thus making ur site faster.
DONE! Enjoy ur personal site! Be sure to "Purge Everything" in the Caching Tab once u update ur site!