How to redirect HTML website to HTTPS?

So I have been fiddling around with my website for quite a while to make it secure, but I can’t seem to be able to redirect my http to https. I have already given it the ability to become https with SSL from Cloudflare.
I’m pretty sure there is something missing and/or I’m doing something wrong.

What I’ve tried so far:

  • added this code to the .htaccess file:
    RewriteEngine OnRewriteCond %{HTTPS} offRewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

  • added this code to my index.html file:
    <meta http-equiv="Refresh" content="0;URL=https://www.example.com"/>
    And yes I replaced the “https://www.example.com” with my website url

None of what I’ve tried have worked. When I added the code to htaccess file my website was broken, displayed error message.

“Application error
An error occurred in the website and your page could not be displayed. If you are the website owner, check your logs for details.”

And when I did the html code it kept refreshing even when it got https, but also it used a very long time to do so. So I’d prefer something that is more instant like the htaccess would’ve been I think.

The website is pure html and css, I don’t use wordpress or anything

Sorry I did some more research and eventually found a tutorial in this forum

Here’s the link if anyone’s wondering: