When you first spin up an instance of Ghost, your home page renders the publication's content on the root domain. If this doesn't suit your needs, it is entirely possible to create a static custom home page instead 🎉
There really is no limit to what you can put on a static home page. Whether you need to explain what your publication is all about, or provide a hub with quick links to different sections of your site. It's totally up to you!
Setting up a custom home page involves configuring the routes in your
routes.yaml file, as well as creating a custom template in your theme. The end result is a unique static page on your
/ root domain.
This tutorial walks you through the entire setup process for setting up custom static pages using the Ghost theme layer and dynamic routing.
Single route template configuration
A single route can be defined in the flexible dynamic routing layer. In the Labs page in Ghost admin, download your
routes.yaml file and open it in any code editor.
This file is split into three sections, and for this tutorial you'll be using the "routes" section - read more about dynamic routing.
Single routes are mapped to a template, for example:
routes: /: home
If you have more than one custom static page, then you can replicate the process and list all single routes and respective templates on a new line:
routes: /: home /about/: about /subscribe/: subscribe
This configuration allows you to create unique content and templates for each single route using the Ghost theme layer.
Create a template for each static URL
To render unique content on your static pages, create different templates for each page. In the
routes example above, the outcome would be to render the specified template:
- https://yoursite.com/ 👉
- https://yoursite.com/about/ 👉
- https://yoursite.com/subscribe/ 👉
If the template is not found then the fallback template is used instead, for example
Create new templates for your new home page or static pages. If you need further help creating a custom template, visit the theme documentation to find out more!
This method of creating content on a static URL allows you to completely render your content and design from the handlebars template and CSS files, without using posts or the Ghost editor. Check out the custom template tutorial to find out how to fetch dynamic content from Ghost and render it on a static URL.
Using the data attribute
routes: /: data: page.home template: home /about/careers/: data: page.careers template: careers /about/team/: data: page.team template: team
Since each static page that you create is unique, it's important to ensure you build in some site navigation to your new templates for each static page. The navigation for Ghost content and collections can be edited in the Design menu in Ghost admin.
Implement your routes and templates
Once you have finished editing the
routes.yaml file, created your new handlebars templates and made any necessary adjustments to your CSS files, it's time to get your new custom home page or static pages live on your site.
- Upload your edited
routes.yamlfile in Ghost admin
- Upload your new theme
.zipcontaining new templates and CSS in Ghost admin
- Visit your site and ensure your new static pages render correctly
Nice work! You've figured out how to create a custom static home page for your Ghost publication, where you can render any content and design required from your theme. This same process can be repeated to create multiple static pages to suit your needs.