GhostBlog - Making a static custom page, which doesn't use the same styling as the rest of your blog

I recently moved one of my external sites to my blog, in an effort to consolidate some of my websites. It was a simple one page application which can be found at peterdaugaardrasmussen.com/json2xml/. As you may see it is nothing like the rest of the site. Which is due to it using different html and css. In this post I will tell you how I did it.

Static pages

Ghost supports static pages. These can be added by creating a new story and checking the checkbox "turn this post into a page". The checkbox can be seen below:

Ghostblog - check "turn this post into a page", in order to create a static page

A more detailed guide can be found here

Now what? Well the page will give you a 500 http status code if you try and access it. That is because it does not have any html or css to render. The reason is that this page will use different mark up than your other posts. Which also means that you can leave everything else in the story empty - or use these values as you see fit. As you will be in full control of of the html.

How do I set up the page?

It is quite easy to set up a new page. You simply create the file page-{yourpagename}.hbs in your ghost theme. I have a guide on how to get your current theme here. Your new file - page-{yourpagename}.hbs - gives you full control over the html and css. You set up the page just like you usually would in a theme using handlebars. My previously mentioned json2xml custom html page can be seen in the following image (page-json2xml.hbs):

ghost blog example of static/custom page

In your custom page you can link to another css/js file than your current site or add to that styling.

That's it!

That is it. Quite simple is it not? If you have any problems feel free to ask me in the comments!