I just upgraded macintoshhhowto.com to be a secure website. It seems to be the way websites are going. You will now be able to see the little padlock before the website in the address bar (if you use Safari) or the green ‘secure’ sign (if you use Chrome). This means that the link from the web server to your browser is secure and no one can intercept the data.  If you notice any problems with the site in the next week or two please let me know!

If you run a WordPress self-hosted website and you want to know the rough steps involved in making a WordPress website secure, here they are. Some of it was a little over my head but I got there in the end.  There were lots of websites explaining how to do this but they only had 2 or 3 steps. Here are my 10 steps!

1. Get an SSL certificate.

To run a secure website you need to get an SSL certificate. My website Is hosted with blue host and they give one free certificate for each website you own. So I just had to go to the control panel and click on ‘add-ons’ and request a free SSL certificate. (Read about it here)

2. Check it’s working

I typed in https://www.macintoshhowto.com instead of http://macintoshhowto.com, and the website appeared. We are on the right track!

3. Disable cache

I am running a cache on Macintoshhow-to.com which speeds up the site. (W3 Total cache)  I needed to disable the cache while I did the rest of the steps outlined below so that I could see what was happening real-time.

4.Change the WordPress URL settings to https://

I needed to go to WordPress Admin and under Settings: General I needed to change the address to the new secure website (with https:// at the start).

5. Think about whether to run the SSL wordpress plugin

At this point in time all kinds of things started to break. My images stopped working. I panicked and downloaded a plugin called ‘Really Simple SSL’ and ran it. It fixed some of the problems but not all of them.  I also wasn’t sure exactly what it was doing so I decided to uninstall the plug-in and continue manually! If you have a really simple WordPress site, with no cache and no CDN, the plugin might take care of step 4 above and step 6 below.

But I would not suggest running the WordPress plug-in. If you do it all by hand you understand the process.

6. Do a search and replace on the old URL.

A lot of the URL’s  on a webpage exist within the posts themselves.  For example, every picture in a post has a URL to that picture. These URLs have the old unsecure address. (http://macintoshhowto.com)

So you need to do a search and replace in the actual WordPress database.  There is a great plug-in that can do this called ‘Better Search and Replace.’  It’s the same plug-in that you would use if you were moving your website to a new domain.

Here’s the find and replace that I needed to do:

6. Visit whynopadlock or SSL labs to find small bugs

I visited ‘whynopadlock.com’  and typed in the name of my website and it gave quite a thorough check of the new secure site.

There were  a couple of small things I need to fix. For example, there was one image that was hardcoded into the theme itself ( a bad practice I know!)  so I needed to go into the theme file header.php and change that!

7. Re-enable the cache with some changes.

I turned the cache back on, but I needed to change the CDN settings. I was using some domains such as cache.macintoshhowto.com with CNAME entries to point to the Amazon CloudFront CDN.  You cannot use subdomains (eg cache.macintoshhowto.com) without buying extra SSL certificates.

This means I needed to go back to using the actual AWS address in the CDN settings.

In other words, I needed to undo the last step that I described in this article on how to set up a CDN.

8. Change CloudFront behaviour to secure.

I use Amazon CloudFront as my CDN. There was a setting in CloudFront which I changed from HTTP to HTPPS

I’m not sure how important this was but I did it.

9. Organise a 301 redirect!

By now the entire new https:macintoshhowto.com site was working. But my old site http:macintoshhowto.com  was still working as well.  This is a problem because you cannot have two identical sites on the Internet or Google will penalise you for duplicate content. So I  need to ‘remove’ the old website.  My website has a very good Google rating and I wouldn’t want that to disappear.  If I just completely deleted the old website every single link from all of the other websites that link to my website would be broken.  The way around this is to do what Google calls a 301 re-direct. It re-directs old links to the new website. I needed to add some lines to my .htaccess file to do this.  There were a few different versions out there but this one seemed to look okay, and came from a trustworthy source, so I used it and it worked.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

This means if someone tries to visit http:macintoshhowto.com they will be redirected to https:macintoshhowto.com.

10. Update the Google index.

The last step was to log into Google Webmaster tools,  and create a completely new entry for  https:macintoshhowto.com .

I needed to add in the sitemap all over again and tell Google to reindex my site.