Ghost Theme Simply Home Page

Home Page

Simply - come with 7 Home page with different layout options

  1. Default index.hbs
  2. Featured godo-template-featured.hbs
  3. Medium godo-template-medium.hbs
  4. Sidebar godo-template-sidebar.hbs
  5. Grid godo-template-grid.hbs
  6. Personal godo-template-personal.hbs
  7. Archive Page godo-template-archive.hbs
  8. Featured with Slider godo-template-featured-slider.hbs
  9. Medium with Sidebar godo-template-medium-sidebar.hbs
  10. Photographer godo-template-photographer.hbs

  • First back up your routes.yml in your ghost settings ​ Dashboard -> Labs -> Routes -> Download current routes.yml
  • Re-download the Route and edit routes.yml line collections -> template
  • After doing the changes, save the file and upload again.
  • If do not observe changes restart ghost
Route on Ghost

The filter option is optional. If you have activated the portfolio and documentation. I think if it is necessary to add the filter.

Default

Default uses the index.hbs template, the stories are arranged in a grid pattern. If you want to use this template you don't need to make any changes.

Simply theme for Ghost - default page

The last featured article will be called up and displayed throughout the length of the screen.

Simply theme for Ghost - featured page

Here if it is necessary to change our routes.yaml in the following way.

## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    limit: 12
    template: godo-template-featured

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

Medium

The template godo-template-medium.hbs has a similarity to Medium

Simply theme for Ghost - Medium page

Our route will need to change

## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    template: godo-template-medium
    limit: 14

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

This template comes with a sidebar with 3 featured articles

Simply theme for Ghost - sidebar home page
## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    limit: 12
    template: godo-template-sidebar

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

Grid

One large featured article will be shown, the rest of the articles will be shown in columns of 3.

Simply theme for Ghost - grid page
## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    limit: 12
    template: godo-template-grid

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

Personal

The personal page has a big title and is centered. It has a small content using the typewriter style.

Simply theme for Ghost - personal home page
  • Create a new page
  • Choose your favorite title
  • Use the URL -> home-personal

In an HTML block in your ghost editor add this code to display the typewriter.

<div class="">
    I’m a
    <span id="typewriter" class="font-medium"></span>
</div>

In this block of HTML add the icons, the icons will be displayed on the right side of the page.

<div class="absolute right-0 bottom-0 mr-8 mb-8 text-white leading-none z-2 flex-col hidden md:flex">
    <a
        class="p-2 inline-block hover:text-facebook"
        title="Facebook ghost"
        aria-label="Facebook ghost"
        href="https://www.facebook.com/ghost"
        target="_blank"
        rel="noopener noreferrer">
        <svg class="icon icon--facebook">
            <use xlink:href="#icon-facebook"></use>
        </svg>
    </a>

    <a
        class="p-2 inline-block hover:text-twitter"
        title="Twitter @ghost"
        aria-label="Twitter @ghost"
        href="https://twitter.com/ghost"
        target="_blank"
        rel="noopener noreferrer">
        <svg class="icon icon--twitter">
            <use xlink:href="#icon-twitter"></use>
        </svg>
    </a>

    <a
        href="https://youtube.com"
        title="Youtube"
        class="hover:text-youtube p-2 inline-block"
        target="_blank"
        rel="noopener noreferrer">
        <svg class="icon icon--youtube">
            <use xlink:href="#icon-youtube"></use>
        </svg>
    </a>

    <a
        href="https://instagram.com"
        title="Instagram"
        class="hover:text-instagram p-2 inline-block"
        target="_blank"
        rel="noopener noreferrer">
        <svg class="icon icon--instagram">
            <use xlink:href="#icon-instagram"></use>
        </svg>
    </a>

    <a
        href="https://github.com/godofredoninja/simply"
        title="GitHub"
        class="hover:text-github p-2 inline-block"
        target="_blank"
        rel="noopener noreferrer">
        <svg class="icon icon--github">
            <use xlink:href="#icon-github"></use>
        </svg>
    </a>

    <a
        href="https://linkeding.com"
        title="Linkedin"
        class="hover:text-linkedin p-2 inline-block"
        target="_blank"
        rel="noopener noreferrer">
        <svg class="icon icon--linkedin">
            <use xlink:href="#icon-linkedin"></use>
        </svg>
    </a>
</div>

To finish, add the typewriter script

<script src="https://unpkg.com/[email protected]/dist/core.js"></script>
<script>
    var app = document.getElementById('typewriter');

    var typewriter = new Typewriter(app, {
        strings: ['Designer', 'Freelancer', 'Developer'],
        loop: true,
        delay: 90,
        autoStart: true,
    });
</script>

Our route will be like this.

## routes.yaml

routes:
  /:
    template: godo-home-personal
    data: page.home-personal

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

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

Archive Page

Simply has a beautiful template for listing articles in a single file.

Simply theme for Ghost - archive page

If you want to change the title that says. The full archive, just edit the file godo-archive.hbs inside the theme.

👉 Archive Route

## routes.yaml

routes:
  /archive/:
    controller: channel
    # filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    limit: 50
    template: godo-archive

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

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

Featured with Slider

Simply theme for Ghost - Featured with Slider

Here if it is necessary to change our routes.yaml in the following way.

## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    limit: 12
    template: godo-template-featured-slider

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

Medium with Sidebar

The template is inspired by the medium home page, you will have the facility to add a title, description and a featured image on the right side.

Simply theme for Ghost - Medium with Sidebar
  • Create a new page
  • Choose your favorite title
  • Use the URL -> medium-with-sidebar
## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    template: godo-template-medium-sidebar
    data:
      post: page.medium-with-sidebar
    limit: 14

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

Photographer

If you are a photographer this template is exclusively for you. It has a slider of the last 3 featured articles, the articles will be ordered in columns of 3.

Simply theme for Ghost - Photographer
## routes.yaml

routes:

collections:
  /:
    permalink: /{slug}/
    ## filter: 'tag:-[hash-portfolio,hash-kusi-doc]'
    limit: 12
    template: godo-template-photographer

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

Edit this page on GitHub