How to get an archive page like this demo?

Developer help
1

Here’s a demo of what I want my own archives page to look like.

I’m on Ghost Pro, hosted by Ghost.

I’ve been playing with this theme for the past day, trying in earnest to get an archive page of all my previous posts to show up on a single page with loops by year.

I’ve read several previous threads here about making archive pages with all posts listed and I’ve got a custom archives.hbs page in my theme zip file that is taken from that template. I’ve set up my routing yaml file to point /archives: archives.

Do I need to create a Page in Ghost too? It keeps giving me a 404.

2

Yes, you need to create the page with that template.

3

Just to make sure I’m clear: I have uploaded archives.hbs in my theme zip to my Ghost Pro site, the code for it is below. I modified my routing as I said in my question, but I still get a 404 on my own /archives/ page

{{!< default}}

{{!-- Site header - partials/site-header.hbs --}}
{{>site-header }}

{{!-- Archive Page --}}
<div class="main-wrapper">
	<div class="container-xxl">
		<div class="row justify-content-lg-center">
			<div class="col-lg-8">
				{{!-- The main content area --}}
				<div class="site-main">
                    <div class="entry-header text-center">
                        <h1 class="global-title mb-3 mt-0">{{t "Archive"}}</h1>
                        <div class="archive__excerpt mb-4">
                            {{#get "posts"}}
                            {{t "Browse the complete archive of {total} posts." total=pagination.total}}
                            {{/get}}
                        </div>
                    </div>

                    <div class="archive js-post-feed">
                        {{#get "posts" limit="all" order="published_at desc"}}
                        <article class="content-wrap">
                            {{#foreach posts visibility="all"}}

                            <div class="archive-post-wrap post-year-{{date format="Y"}} js-post-card"> 
                            <div class="archive-post-label m-t m-b-sm fw-600">{{date format="YYYY"}}</div>
                                <article class="archive-post">
                                    <time datetime="{{date published_at format="YYYY-MM-DD"}}"
                                    class="text-acc-3">{{date published_at format="DD MMM YYYY"}}
                                    </time>

                                    <h2 class="archive-post__title fw-500 m-0 text-acc-2">
                                    <a class="archive-post__link flex-1" href="{{url}}">{{title}}</a>
                                    </h2>
                                </article>
                            </div>
                            {{/foreach}}
                        </article>
                        {{/get}}
                    </div>

				</div>
			</div>
		</div>
	</div>
</div>

my routes.yaml file looks like this:

routes:
/archives/: archives

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
4

You’re missing two spaces in routes.yaml

5

Awesome, finally got it to work, thanks for catching that!

1 Like