Have a Static Home Page with Ghost


Post cover image

If you are looking to have a static home page with Ghost for either a business site, or whatever else, there are currently 3 ways you can do this (with a 4th coming soon).

Tags

The easiest way to have a static home page is to use a specific tag for all of your blog posts.

  1. Create a home.hbs file in your theme if you don't already have one. This will be your static home page, so edit it and make it look how you want.
  2. In each of your blog posts, add a specific tag (ex. blog).
  3. Now your blog will live at yoursite.com/tag/blog with the root url being your static home page.

This is the easiest way because there is no complications. You just create the home.hbs file and add the tags and the rest is done for you! You can see an example of this over on How to Ghost.

Get Helper

With the Get helper, you can grab information from your Ghost database from anywhere. This allows you to add posts wherever you want.

  1. Make sure the Public API is enabled
  2. Create a home.hbs file in your theme. This will be your home page, so make it look the way you want.
  3. Create another hbs file called page-[yoururl].hbs (replace [yoururl] with the url you want. Ex page-blog.hbs).
  4. In Ghost, create a new static page that has the same url as you just used above. The static page must exist for the .hbs file to be used. Feel free to leave the page blank as it will be overwritten by the .hbs file.
  5. Usually it is easiest to copy over your index.hbs file into your new page-blog.hbs and then wrap the {{foreach 'posts'}} method in the {{get}} helper.

    Here is an example of what the get helper could look like in your page-blog.hbs file:

    <main id="content" class="content" role="main">
        {{#get "posts" limit="5" include="tags,author"}}
            {{#foreach posts}}
            <article class="{{post_class}}">
                <header class="post-header">
                    <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
                </header>
                <section class="post-excerpt">
                    <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
                </section>
                <footer class="post-meta">
                    {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}}
                    {{author}}
                    {{tags prefix=" on "}}
                    <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
                </footer>
            </article>
            {{/foreach}}
            {{pagination}}
            {{! Adding in script here so the link to the next set of posts works }}
            <script>
                var olderPost = document.getElementsByClassName('older-posts');
                var url = '/page/2';
                if (olderPost[0].getAttribute('href') === '') {
                    olderPost[0].setAttribute('href', url);
                }
            </script>
        {{/get}}
    </main>
    

    Essentially that is the default Casper theme's main loop just with the {{get}} helper grabbing all the posts on the blog for it to loop through. Note the script at the end which changes the url for the next set of posts. Without that script when the visitor hits next, nothing will happen. This sends them to /page/2 as thats where they need to end up.

    After making those changes though, you do have to edit the way pagination works, because it will be broken if you paginate to /page/2 then try and come back. So, we need to add another script inside the pagination to make sure you end up at /blog rather than the root of the domain when coming back.

    So, either create a pagination.hbs or edit yours. If you are editing the default one or creating a new one, your pagination would need to look something like this:

    <nav class="pagination" role="navigation">
        {{#if prev}}
          <a class="newer-posts" href="{{page_url prev}}"><i class="ionicons ion-ios-arrow-back"></i></a>
        {{/if}}
        <span class="page-number">{{page}} of {{pages}}</span>
        {{#if next}}
           <a class="older-posts" href="{{page_url next}}"><i class="ionicons ion-ios-arrow-forward"></i></a>
        {{/if}}
    </nav>
    
    
    <script>
        var newerPost = document.getElementsByClassName('newer-posts');
        var url = '/blog';
        for (i = 0; i < newerPost.length; i++) { 
            if (newerPost[i].getAttribute('href') === '/') {
                newerPost[i].setAttribute('href', url);
            }
        }
    </script>
    

    Note the script at the end making sure that if the url is trying to redirect you back to the root of the domain (/), to change it to /blog. That is the only difference from the default pagination.hbs code.

  6. Save the file, restart Ghost, and then you will have your posts located at the url you chose.

Static File with Nginx/Apache Redirect

The two ways above create static files in terms of the content, but this way you can create a truly static file that is just an HTML file that isn't served by anything. The biggest benefit of this is speed when loading the home page. Here is how you can do that:

  1. Create a new HTML file that has all the code you want for your home page and place it on your server. I am going to put mine in /var/www and call it homepage.html.
  2. Edit the config.js in Ghost to have the correct url you are going to use for the blog section (ex. yoursite.com/blog).
  3. Restart Ghost and make sure it is working when you go to the blog url.
  4. Setup your Apache/Nginx configs to match the new setup

    • Nginx Example - Change the root to point to the file and then have /blog (or whatever you want) pointing to Ghost:

      server {
          listen 80 default_server;
          listen [::]:80 default_server ipv6only=on;
          server_name my-ghost-blog.com; # Replace with your domain
          root /usr/share/nginx/html;
          index index.html index.htm;
          client_max_body_size 10G;
          #this sends the root to the homepage.html
          location / {
              root /var/www;
              index homepage.html;
          }
          #this sends everything with /blog to Ghost
          location /blog {
              proxy_pass http://localhost:2368;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header Host $http_host;
              proxy_set_header X-Forwarded-Proto $scheme;
              proxy_buffering off;
          }
      }
      
    • Apache Example - Same as above, create the root url to point to the static file you made, and /blog to point to Ghost:

      <VirtualHost *:80>
          ServerName your-url.com
          ServerAlias your-url.com
          DocumentRoot /var/www
          DirectoryIndex homepage.html
          ProxyPass /blog http://127.0.0.1:2368/blog/
          ProxyPassReverse /blog http:/127.0.0.1:2368/blog/
      </VirtualHost>
      

This will allow you to have a truly static html home page. It is more tricky to setup, but if that is what your looking for, it is definitely possible.

Channels (coming soon)

Channels is an upcoming feature that will allow you to create streams of data based on the criteria you want. For example, if you want to create a page for all posts about sports, you could use channels to grab all posts with the tags baseball, basketball, football, etc and put it all in one place. (More info on channels)

There are channels that already exist on your blog (tags, author, and index (all your posts)), but they are hardcoded. What this change will allow you to do is to create more of these with your own filters.

So the way to have a static home page would be to create that home page in a template, then create a new channel called blog which grabs all the posts. Then, you would create a new blog.hbs file to loop through and show all the posts like what your index.hbs already does.

The way this works is still being created, so this may change, and we will update as it comes out, but once it is out, it will be the easiest way to have a static home page with the blog living elsewhere. If you need something now though, check out one of the other 3 ways.


Good luck and let us know if you have any questions or run into any problems!

{{/get}}
Essentially that is the default [Casper theme's](https://github.com/TryGhost/Casper) main loop just with the `{{get}}` helper grabbing all the posts on the blog for it to loop through. Note the script at the end which changes the url for the next set of posts. Without that script when the visitor hits next, nothing will happen. This sends them to `/page/2` as thats where they need to end up. After making those changes though, you do have to edit the way pagination works, because it will be broken if you paginate to `/page/2` then try and come back. So, we need to add another script inside the pagination to make sure you end up at `/blog` rather than the root of the domain when coming back. So, either create a `pagination.hbs` or edit yours. If you are editing the default one or creating a new one, your pagination would need to look something like this: Note the script at the end making sure that if the url is trying to redirect you back to the root of the domain (`/`), to change it to `/blog`. That is the only difference from the default `pagination.hbs` code. 6. Save the file, restart Ghost, and then you will have your posts located at the url you chose.

Static File with Nginx/Apache Redirect

The two ways above create static files in terms of the content, but this way you can create a truly static file that is just an HTML file that isn't served by anything. The biggest benefit of this is speed when loading the home page. Here is how you can do that: 1. Create a new HTML file that has all the code you want for your home page and place it on your server. I am going to put mine in `/var/www` and call it `homepage.html`. 2. Edit the `config.js` in Ghost to have the correct url you are going to use for the blog section (ex. `yoursite.com/blog`). 3. Restart Ghost and make sure it is working when you go to the blog url. 4. Setup your Apache/Nginx configs to match the new setup * **Nginx Example** - Change the root to point to the file and then have `/blog` (or whatever you want) pointing to Ghost: server { listen 80 default_server; listen [::]:80 default_server ipv6only=on; server_name my-ghost-blog.com; # Replace with your domain root /usr/share/nginx/html; index index.html index.htm; client_max_body_size 10G; #this sends the root to the homepage.html location / { root /var/www; index homepage.html; } #this sends everything with /blog to Ghost location /blog { proxy_pass http://localhost:2368; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Forwarded-Proto $scheme; proxy_buffering off; } } * **Apache Example** - Same as above, create the root url to point to the static file you made, and `/blog` to point to Ghost: ServerName your-url.com ServerAlias your-url.com DocumentRoot /var/www DirectoryIndex homepage.html ProxyPass /blog http://127.0.0.1:2368/blog/ ProxyPassReverse /blog http:/127.0.0.1:2368/blog/ This will allow you to have a truly static html home page. It is more tricky to setup, but if that is what your looking for, it is definitely possible.

Channels (coming soon)

Channels is an upcoming feature that will allow you to create streams of data based on the criteria you want. For example, if you want to create a page for all posts about sports, you could use channels to grab all posts with the tags baseball, basketball, football, etc and put it all in one place. ([More info on channels](https://github.com/TryGhost/Ghost/wiki/Channels-101)) There are channels that already exist on your blog (tags, author, and index (all your posts)), but they are hardcoded. What this change will allow you to do is to create more of these with your own filters. So the way to have a static home page would be to create that home page in a template, then create a new channel called `blog` which grabs all the posts. Then, you would create a new `blog.hbs` file to loop through and show all the posts like what your `index.hbs` already does. The way this works is still being created, so this may change, and we will update as it comes out, but once it is out, it will be the easiest way to have a static home page with the blog living elsewhere. If you need something now though, check out one of the other 3 ways.
Good luck and let us know if you have any questions or run into any problems!