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 https://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:
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 markup 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. You will be in full control of the HTML, just like you have with any other page on your blog if you change your theme.
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. You can start with as little as a simple HTML page:
<!DOCTYPE html>
<html>
<body>
<h1> Hello world!</h1>
</body>
</html>
My previously mentioned json2xml custom html page can be seen in the following image (page-json2xml.hbs):
In your custom page you can link to another CSS file than your current site or add to that styling.
That is it!
That is it. Quite simple is it not? If you have any problems feel free to ask me in the comments!