Buster Redirects and Static Pages

Ghostbusters Lego Buster (the tool I use to generate static pages from my ghost blog that runs on a node.js server so that I can then push it to Github pages where it's hosted for free) has certain issues when it comes to single page generation because of the way it works. Buster basically maps through all the hrefs on the home page and generates static pages from them. This means that single pages may never be reached. This also means that certain custom javascript scripts I may want to write or use work on a case by case basis. So I'm going to explain how I am now able to create single pages and also redirects!

Static Page Creation

For this one, I basically just created new entries with the url slug that I want. I did this for my about page and edited the date so that it's several years ago so people won't see it unless they want to manually click back to the last post. I also added this into the markdown editor so that the date stamp doesn't show up:

<style>  
    .post-meta { display: none; }
</style>  

Just make this the first line in the markdown editor and it should work fine. Now, you have a fully working static page, though a bit hacky it may be!

Redirects

So what did I want to do with javascript? I wanted to create redirects to my github page as well as my linkedin page from specific urls on my ghost blog. So how do I do this?

This is a bit trickier than the static pages but let's give it a go.

Create a post with the url that you want. Then in the markdown editor put this code on top:

<style>  
    html { display: none !important; }
</style>  

This will make sure that as it redirects, nothing will awkwardly show up. It'll just be a one second flash of a blank white page.

Now the Javascript part! Find your main javascript file, it's probably in the path:

/themes/themename/assets/js/index.js"

or something like that...

Open up the file and in the 'ready' function, put this:

$(document).ready(function(){
    switch (window.location.href) {
        case "http://briank.im/github/":
  window.location.replace("https://github.com/briamkin");
            break;
        case "http://briank.im/linkedin/":
 window.location.replace("https://www.linkedin.com/in/brianeujinkim");
            break;
        case "http://briank.im/projects/":
  window.location.replace("http://briank.im/tag/project-write-ups/");
            break;
    }
});

This creates a switchcase that will redirect the user to the intended page if they click a link to that page. Check out what happens when you go to these pages:

briank.im/github
briank.im/linekdin
briank.im/projects

You can change this code with the corresponding domains and urls.
Now there's just one more thing to add...

Open Outbound Links in New Windows

Here is one more piece of code that you can add that will make sure that outbound links will open in new windows and that links that are staying on the page will open in the same window. I added it above the switchcase in the javascript.

$(document).ready(function(){
    $("a[href^='http://'], a[href^='https://']").not(".header-link").not("#blog-logo").attr("target", "_blank");
    switch (window.location.href) {
        case "http://briank.im/github/":
  window.location.replace("https://github.com/briamkin");
            break;
        case "http://briank.im/linkedin/":
 window.location.replace("https://www.linkedin.com/in/brianeujinkim");
            break;
        case "http://briank.im/projects/":
  window.location.replace("http://briank.im/tag/project-write-ups/");
            break;
    }
});

And voila! All should be peaceful in the world...

What I Learned Today:
Decision Tree models are incredibly cool!