homepage.md (2684B)
1 ---
2 title: Homepage Template
3 linktitle: Homepage Template
4 description: The homepage of a website is often formatted differently than the other pages. For this reason, Hugo makes it easy for you to define your new site's homepage as a unique template.
5 date: 2017-02-01
6 publishdate: 2017-02-01
7 lastmod: 2017-02-01
8 categories: [templates]
9 keywords: [homepage]
10 menu:
11 docs:
12 parent: "templates"
13 weight: 30
14 weight: 30
15 sections_weight: 30
16 draft: false
17 aliases: [/layout/homepage/,/templates/homepage-template/]
18 toc: true
19 ---
20
21 Homepage is a `Page` and therefore has all the [page variables][pagevars] and [site variables][sitevars] available for use.
22
23 {{% note "The Only Required Template" %}}
24 The homepage template is the *only* required template for building a site and therefore useful when bootstrapping a new site and template. It is also the only required template if you are developing a single-page website.
25 {{% /note %}}
26
27 {{< youtube ut1xtRZ1QOA >}}
28
29 ## Homepage Template Lookup Order
30
31 See [Template Lookup](/templates/lookup-order/).
32
33 ## Add Content and Front Matter to the Homepage
34
35 The homepage, similar to other [list pages in Hugo][lists], accepts content and front matter from an `_index.md` file. This file should live at the root of your `content` folder (i.e., `content/_index.md`). You can then add body copy and metadata to your homepage the way you would any other content file.
36
37 See the homepage template below or [Content Organization][contentorg] for more information on the role of `_index.md` in adding content and front matter to list pages.
38
39 ## Example Homepage Template
40
41 The following is an example of a homepage template that uses [partial][partials], [base][] templates, and a content file at `content/_index.md` to populate the `{{.Title}}` and `{{.Content}}` [page variables][pagevars].
42
43 {{< code file="layouts/index.html" download="index.html" >}}
44 {{ define "main" }}
45 <main aria-role="main">
46 <header class="homepage-header">
47 <h1>{{.Title}}</h1>
48 {{ with .Params.subtitle }}
49 <span class="subtitle">{{.}}</span>
50 {{ end }}
51 </header>
52 <div class="homepage-content">
53 <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
54 {{.Content}}
55 </div>
56 <div>
57 {{ range first 10 .Site.RegularPages }}
58 {{ .Render "summary"}}
59 {{ end }}
60 </div>
61 </main>
62 {{ end }}
63 {{< /code >}}
64
65 [base]: /templates/base/
66 [contentorg]: /content-management/organization/
67 [lists]: /templates/lists/
68 [lookup]: /templates/lookup-order/
69 [pagevars]: /variables/page/
70 [partials]: /templates/partials/
71 [sitevars]: /variables/site/