Using WordPress with GitHub Pages

WordPress is an incredibly popular CMS – Content Management System which allows websites to be created quickly and easily while being easy to maintain and expand. WordPress powers over 25% of all the websites on the internet. One downside of WordPress being a dynamic CMS is that scripts have to be run on the computer hosting the website, slowing down response times and requiring more resources than are required to host a static website. In addition, any security problems with the scripts that are run on the host computer can cause major problems such as causing the website(s) hosted on it to be lost or potentially causing the host computer to perform nefarious activities.

In order to prevent this, GitHub pages require that all sites that it serves are static, meaning that they do not use server scripts like WordPress. The official recommended option is to use Jekyll which generates a static site from the markdown provided and a template. While this is a fair option for generating static sites, I still prefer to use WordPress to design my site. So, to get around the fact that scripts cannot run on GitHub pages, I need to convert my dynamically generated web site to a static one. To do this I use the plugin Simply Static which produces a static version of the website that WordPress produces. This can then be uploaded to GitHub pages to get the best of both worlds, an easy to use, popular CMS, with the security, speed and cost benefits of using GitHub pages. It is free for some sites, see here for further details!

When I first uploaded my site to GitHub pages, I had some issues with some aspects of the page not loading and not being formatted correctly. Upon further inspection, I found that the Cascading Style Sheets were not being loaded and that trying to request them manually returned a 404 error. I found the problem to be that GitHub pages does not support underscores, (_) in the URL of any resources hosted on GitHub pages. As the theme that I am using, Cannyon uses a directory named frontend to store all the CSS in, it was this name that was causing the issues with the 404 errors.

To fix the problem I created a simple Python script to remove the _ from all the pages exported by Simply Static. I have included it below.

So, Hopefully, this post has shown you that you can have the best of both worlds with a quick and easy website designer combined with free yet fast and secure hosting.