In this post, I'll show you how you can add a posts archive view on your Ghost blog. This archive view will list down posts in monthly distribution.

An archive view can be useful when you have lots of posts and you want to give your readers a simpler view where they can discover all of your previous writings.

To add an archive page, we'll be adding a custom template that can be selected from the Templates menu while creating pages.

Open up your theme in a code editor and create a new file custom-posts-archive.hbs. In this file add the following get query. This will render all the posts in descending order (with post title and date). 

{{#get "posts" limit="all" order="published_at desc"}}
{{#foreach posts visibility="all"}}
<article class="archive-post archive-post-date-{{date format="M"}}">
    <p class="archive-post-label">{{date format="MMMM YYYY"}}</p>
    <a class="archive-post-link" href="{{url}}">
        <h2 class="archive-post-title">{{title}}</h2>
    </a>
</article>
{{/foreach}}
{{/get}}

Next, we'll add some styling to style this section.

Currently, post month & year will be shown on each post title. With some clever styling tricks, we can fix this to show only once. 

.archive-post-date-1 + .archive-post-date-1 .archive-post-label,
.archive-post-date-2 + .archive-post-date-2 .archive-post-label,
.archive-post-date-3 + .archive-post-date-3 .archive-post-label,
.archive-post-date-4 + .archive-post-date-4 .archive-post-label,
.archive-post-date-5 + .archive-post-date-5 .archive-post-label,
.archive-post-date-6 + .archive-post-date-6 .archive-post-label,
.archive-post-date-7 + .archive-post-date-7 .archive-post-label,
.archive-post-date-8 + .archive-post-date-8 .archive-post-label,
.archive-post-date-9 + .archive-post-date-9 .archive-post-label,
.archive-post-date-10 + .archive-post-date-10 .archive-post-label,
.archive-post-date-11 + .archive-post-date-11 .archive-post-label,
.archive-post-date-12 + .archive-post-date-12 .archive-post-label {
    display: none;
}
Credits: https://forum.ghost.org/t/monthly-archive-index-pages/12110

Our archive page is ready. We can now log in to our Ghost admin panel, and create a new page, and set the template to "Posts archive" from the templates menu in settings.

Set the template to Posts archive from templates menu

Visit this page's URL to view the archive page.

If you're using the Casper theme, then you can add some of these CSS styling to make it look pretty. 

.archive-post {
    margin: 0 0 24px;
}

.archive-post:first-child .archive-post-label {
    margin-top: 0;
}

.archive-post-label {
    color: var(--color-midgrey);
    margin: 24px 0 16px;
}

.archive-post-link {
    text-decoration: none !important;
    color: var(--color-darkgrey) !important;
}

.archive-post-link:hover {
    color: var(--ghost-accent-color) !important;
}

.archive-post-title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.4;
}

The end result should look like this:

Archive page on Casper theme