Backstory
A few months ago I had a genius idea. I could create a personal website with Ruby on Rails and host it on Heroku for free using a Free Plan and a monitor robot to keep the website awake. The only thing I’d have to pay for is a domain name that I could get from Hover with free WhoIs Privacy.
Recently, I got a lot of public attention for a dashboard that I created tracking the Toronto Real Estate Market. This brought more people to my site, but unfortunately caused heroku to decide that my site was disqualified for the free plan and would need to be updated to a hobby developer plan for $7 USD.
Being frugal as always, I started to shop for other options. I knew I’d eventually like to start a blog and although I had a blog on the heroku site, the images were hosted via Amazon S3 and I was paying pennies monthly to keep them up. I’ve had some experience developing custom wordpress sites so I decided to go the shared hosting route with IWFHosting so I could easily install wordpress and have some addon domains/emails for future web development ideas. The total price: $4.91 USD. Guess I couldn’t sustain on the free-99 model forever, but this sure does beat other hosting sites ridiculous monthly pricing.
Problem
So now I have a bunch of static html files of all my individual projects and a wordpress installation that is run on php. I also need a common header nav-bar so that when someone visits my site everything looks fluid. The problem can be broken done into smaller tasks to create my website:
- Add in static html files
- Hide .html extension when accessing static pages
- Make a shared header nav-bar that’s accessible on any webpage of the website
Solution
- Add in static html files
This was pretty easy. I just went into my hosting cPanel File Manager and add in the html files into the root directory (Public_html)
Hide .html extension when accessing static pages
A couple things needed to the change in order for this to work. First I needed to go into the wordpress theme editor and append the following line of code to the functions.php file:
add_filter(‘flush_rewrite_rules_hard’,’__return_false’);
This would stop wordpress from resetting the .htaccess file when I made changes to my theme. Next I needed to add some code into the .htaccess file that was located in the root directory of the File Manager. I was required to make hidden files visible to view the .htaccess. Next I added in the following code so that .html files would be accessible even without a .html extension.
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html
Make a shared header nav-bar that’s accessible on any webpage of the website
This originally seemed like the hardest part. How was I to have a consistent navigation bar using bootstrap between wordpress and non-wordpress pages? This was more of a hack and slash solution (aren’t they all?), but I ultimately decided to first create a menu via my wordpress site and link all the pages I’d like my site header to navigate to. Once that was complete, I dug into the chrome developer tools (press F12 on the keyboard) and copied the line of code that was the navbar. Ta-da! Just like that, I had a copy of the nav-bar that I could put into the static html pages.
I couldn’t just put this snippet of code in each individual html page. That would be super tedious to adjust whenever my site navigation changed. I had to first ensure all the pages were pulling in the bootstrap CSS. Once that was complete, I entered some jquery code that allowed me to pull in a shared header similar to a shared partial in Ruby on Rails.
<script src="bootstrap/js/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("header.html");
});
</script>
<div id="includedContent"></div>
Now I’d only need to adjust one static html page (header.html) whenever I needed to update the site navigation.
There you have it. How to make a Frankenstein of a site using WordPress and static HTML pages!