2014-05-27 18:32:57 -04:00
---
2014-05-29 18:42:05 -04:00
aliases:
- /layout/homepage/
2016-01-06 17:45:19 -05:00
lastmod: 2015-08-04
2014-05-29 18:42:05 -04:00
date: 2013-07-01
2014-05-27 18:32:57 -04:00
menu:
main:
2014-05-29 18:42:05 -04:00
parent: layout
next: /templates/terms
notoc: true
prev: /templates/list
title: Homepage
weight: 50
2014-05-27 18:32:57 -04:00
---
The home page of a website is often formatted differently than the other
2015-08-04 14:00:08 -04:00
pages. In Hugo you can define your own homepage template.
2014-05-27 18:32:57 -04:00
2016-11-20 17:00:57 -05:00
Homepage is a `Page` and have all the [page
2014-05-27 18:32:57 -04:00
variables](/templates/variables/) and [site
variables](/templates/variables/) available to use in the templates.
*This is the only required template for building a site and useful when
bootstrapping a new site and template. It is also the only required
template when using a single page site.*
2016-11-20 17:00:57 -05:00
In addition to the standard page variables, the homepage has access to
2014-09-03 00:12:26 -04:00
all site content accessible from `.Data.Pages` . Details on how to use the
list of pages can be found in the [Lists Template ](/templates/list/ ).
2014-05-27 18:32:57 -04:00
2016-11-21 07:02:02 -05:00
Note that a home page can also have a content file with frontmatter, see [Source Organization ]({{< relref "overview/source-directory.md#content-for-home-page-and-other-list-pages" >}} ).
2014-05-27 18:32:57 -04:00
## Which Template will be rendered?
Hugo uses a set of rules to figure out which template to use when
rendering a specific page.
2014-09-03 00:12:26 -04:00
Hugo will use the following prioritized list. If a file isn’ t present,
then the next one in the list will be used. This enables you to craft
2014-05-27 18:32:57 -04:00
specific layouts when you want to without creating more templates
2014-09-03 00:12:26 -04:00
than necessary. For most sites, only the \_default file at the end of
2014-05-27 18:32:57 -04:00
the list will be needed.
* /layouts/index.html
* /layouts/\_default/list.html
* /layouts/\_default/single.html
* /themes/`THEME`/layouts/index.html
* /themes/`THEME`/layouts/\_default/list.html
* /themes/`THEME`/layouts/\_default/single.html
2014-09-03 00:12:26 -04:00
## Example index.html
2015-01-27 21:17:09 -05:00
This content template is used for [spf13.com ](http://spf13.com/ ).
2014-05-27 18:32:57 -04:00
2015-01-27 21:17:09 -05:00
It makes use of [partial templates ](/templates/partials/ ) and uses a similar approach as a [List ](/templates/list/ ).
2014-05-27 18:32:57 -04:00
<!DOCTYPE html>
< html class = "no-js" lang = "en-US" prefix = "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#" >
< head >
< meta charset = "utf-8" >
2014-06-06 16:15:19 -04:00
{{ partial "meta.html" . }}
2014-05-27 18:32:57 -04:00
2015-03-18 02:44:12 -04:00
< base href = "{{ .Site.BaseURL }}" >
2014-05-27 18:32:57 -04:00
< title > {{ .Site.Title }}< / title >
< link rel = "canonical" href = "{{ .Permalink }}" >
2016-11-17 02:18:55 -05:00
< link href = "{{ .RSSLink }}" rel = "alternate" type = "application/rss+xml" title = "{{ .Site.Title }}" / >
2014-05-27 18:32:57 -04:00
2014-06-06 16:15:19 -04:00
{{ partial "head_includes.html" . }}
2014-05-27 18:32:57 -04:00
< / head >
< body lang = "en" >
2014-06-06 16:15:19 -04:00
{{ partial "subheader.html" . }}
2014-05-27 18:32:57 -04:00
< section id = "main" >
< div >
{{ range first 10 .Data.Pages }}
{{ .Render "summary"}}
{{ end }}
< / div >
< / section >
2015-01-31 09:27:42 -05:00
{{ partial "footer.html" . }}