Custom Home Page


Ghost offers you the ability to have a custom home page that is different when pagination is used. An example of this is if on your home page you have your 5 latests posts, when someone clicks "More Posts" or whatever you have it say, it will take you to a different style page than what they are currently on.

An example of why you would want this is if your blog has a large cover image, or a blog description at the top. When someone wants to see more posts, they don't need to see the description or image again. They just want to see content, not all the home page details.

We are going to be modifying the current Casper theme to create a custom home page with a different style for pagination. Now this is going to be very basic, but you should get the idea:

In the Casper theme, the index.hbs houses all the information. Here is what it currently looks like:

Custom Home Page

And here is the code for the header:

What we are going to do is shrink the header and remove the blog description. So, first, copy all of the code, and create a new file called home.hbs and save all the code in there.

The home.hbs file is now your main home page. So, open back up your index.hbs file as that is where we will be making the changes (because we are leaving the home page the same, but making subsequent pages different).

In index.hbs, remove the blog description by deleting the line that looks like this:

<h2 class="page-description">{{@blog.description}}</h2>

Now, in this line:

<header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">

We are going to just add some custom styling to shrink it (if you were really doing this, you would make these changes in the actual css with custom classes, but in order to not overly complicate everything, I am going to do inline styling). So, add some custom styling to this line to make it smaller:

So, at the very end of the line we added style="height:auto; min-height:0" to shrink the header. Save the index.hbs file and restart or re-upload your theme.

Now when you go to your home page, you will see that it still looks the same, but when you click on Older Posts, your new header will look like this:

Custom Home Page

This is because the home.hbs is for the home page only, and the index.hbs is now for all paginated pages beyond the home page. Obviously you can get way more complicated than we just did, but that should show you how you can create a custom home page and custom pagination pages. Good luck!

What we are going to do is shrink the header and remove the blog description. So, first, copy all of the code, and create a new file called `home.hbs` and save all the code in there. The `home.hbs` file is now your main home page. So, open back up your `index.hbs` file as that is where we will be making the changes (because we are leaving the home page the same, but making subsequent pages different). In `index.hbs`, remove the blog description by deleting the line that looks like this:

{{@blog.description}}

Now, in this line:
We are going to just add some custom styling to shrink it (if you were really doing this, you would make these changes in the actual css with custom classes, but in order to not overly complicate everything, I am going to do inline styling). So, add some custom styling to this line to make it smaller: So, at the very end of the line we added `style="height:auto; min-height:0"` to shrink the header. Save the `index.hbs` file and restart or re-upload your theme. Now when you go to your home page, you will see that it still looks the same, but when you click on `Older Posts`, your new header will look like this: {<2>}![Custom Home Page](/content/images/2015/03/Custom-Home-Page-2.jpg) This is because the `home.hbs` is for the home page only, and the `index.hbs` is now for all paginated pages beyond the home page. Obviously you can get way more complicated than we just did, but that should show you how you can create a custom home page and custom pagination pages. Good luck!