The other day, I noticed an offer for cheap SSL certificates through Namecheap, so decided to use this discount to learn how to set up a we use site. As you can see, there's now a lovely green padlock on my site, so here's a quick walkthrough of how I set it up and things to watch out for.

My site is hosted on Webfaction - it's great for Python hosting (which is why I chose it), but also has amazing documentation on pretty much any aspect of website hosting: Here's the section on setting up SSL.

SSL setup steps

  1. Buy certificate
  2. Enter details to create your certificate.. Things to watch out for: my certificate provider would only accept certain email addresses to register - for instance, administrators@domain.com. Unless you already have one of these addresses set up, you'll need to create it before you can complete the process. Also watch out for domains when setting up your certificate: your provider may or may not set up the www domain in your certificate automatically. If you have multiple domains pointing to the same site, you need to get a certificate for each one.
  3. Upload your certificate to your hosting.
  4. Webfaction: switch your site to https.. If you need to serve plain http, set up a redirect site. On Webfaction, you then need to open a support ticket to activate. This makes SSL setup really easy since Webfaction do most of the work :)

Insecure content! Once your certificate is set up and your site is being served over HTTPS, you may notice that instead of a nice green padlock you have a yellow triangle, or that popup messages warning about insecure content are being shown.

These warnings are happening because resources - usually static files like CSS, JS or images, or external fonts or JS - are being loaded over HTTP instead of HTTPS. External resource are often the cause of these warnings since they usually provide only an HTTP link to copy into your site.

You can fix any non-https resources to prevent these types of warnings - simply change each non-https link to a non-protocol link:

Before: href="http://googlefont.com"
After: href="//googlefont.com"

The reason to use a non-protocol link rather than changing to an HTTPS link is so that content can be served over HTTP and HTTPS without having to have two different links. Non-protocol links, or protocol-relative links, simply use whichever protocol is currently being used on the site to load resources.