HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

  • Homepage Template Lookup Order
  • Add Content and Front Matter to the Homepage
  • Example Homepage Template
TEMPLATES

Homepage Template

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.

Homepage is a Page and therefore has all the page variables and site variables available for use.

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.

Homepage Template Lookup Order

See Template Lookup.

Add Content and Front Matter to the Homepage

The homepage, similar to other list pages in Hugo, 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.

See the homepage template below or Content Organization for more information on the role of _index.md in adding content and front matter to list pages.

Example Homepage Template

The following is an example of a homepage template that uses partial, base templates, and a content file at content/_index.md to populate the {{.Title}} and {{.Content}} page variables.

layouts/index.html
{{ define "main" }}
    <main aria-role="main">
      <header class="homepage-header">
        <h1>{{.Title}}</h1>
        {{ with .Params.subtitle }}
        <span class="subtitle">{{.}}</span>
        {{ end }}
      </header>
      <div class="homepage-content">
        <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
        {{.Content}}
      </div>
      <div>
        {{ range first 10 .Site.RegularPages }}
            {{ .Render "summary"}}
        {{ end }}
      </div>
    </main>
{{ end }}
  • About Hugo
    • Overview
    • Hugo's Security Model
    • Hugo and GDPR
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Installation
    • Installation overview
    • macOS
    • Linux
    • Windows
    • BSD
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Basic usage
    • Directory Structure
    • Configuration
    • External Learning Resources
  • Hugo Modules
    • Hugo Modules Overview
    • Configure Modules
    • Use Hugo Modules
    • Theme Components
  • Content Management
    • Content Management Overview
    • Organization
    • Page Bundles
    • Content Formats
    • Diagrams
    • Front Matter
    • Build Options
    • Page Resources
    • Image Processing
    • Shortcodes
    • Related Content
    • Sections
    • Content Types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and Cross References
    • URL Management
    • Menus
    • Static Files
    • Table of Contents
    • Comments
    • Multilingual
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Templating
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • Render Hooks
    • List Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Templates
    • Robots.txt
    • Internal Templates
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • .AddDate
    • .Format
    • .Get
    • .GetPage
    • .HasMenuCurrent
    • .IsMenuCurrent
    • .Param
    • .Render
    • .RenderString
    • .Scratch
    • .Unix
    • absLangURL
    • absURL
    • after
    • anchorize
    • append
    • apply
    • base64
    • chomp
    • complement
    • cond
    • countrunes
    • countwords
    • crypto.FNV32a
    • default
    • delimit
    • dict
    • duration
    • echoParam
    • emojify
    • eq
    • errorf and warnf
    • fileExists
    • findRE
    • first
    • float
    • ge
    • getenv
    • group
    • gt
    • hasPrefix
    • highlight
    • hmac
    • htmlEscape
    • htmlUnescape
    • hugo
    • humanize
    • i18n
    • Image Filters
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang
    • lang.Merge
    • last
    • le
    • len
    • lower
    • lt
    • markdownify
    • Math
    • md5
    • merge
    • ne
    • now
    • os.Stat
    • partialCached
    • path.Base
    • path.BaseName
    • path.Clean
    • path.Dir
    • path.Ext
    • path.Join
    • path.Split
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • reflect.IsMap
    • reflect.IsSlice
    • relLangURL
    • relref
    • relURL
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • site
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.Contains
    • strings.ContainsAny
    • strings.Count
    • strings.FirstUpper
    • strings.HasSuffix
    • strings.Repeat
    • strings.RuneCount
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • symdiff
    • templates.Exists
    • time
    • time.Format
    • time.ParseDuration
    • title
    • transform.Unmarshal
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urlquery
    • urls.Parse
    • where
    • with
  • Variables
    • Variables Overview
    • Site Variables
    • Page Variables
    • Shortcode Variables
    • Pages Methods
    • Taxonomy Variables
    • File Variables
    • Menu Entry Properties
    • Git Variables
    • Sitemap Variables
  • Hugo Pipes
    • Hugo Pipes Overview
    • Hugo Pipes
    • Sass / SCSS
    • PostProcess
    • PostCSS
    • JavaScript Building
    • Babel
    • Asset minification
    • Asset bundling
    • Fingerprinting and SRI
    • Resource from Template
    • Resource from String
  • CLI
  • Troubleshooting
    • Troubleshoot
    • FAQ
    • Build Performance
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Hugo Deploy
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Netlify
    • Host on Render
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Host on KeyCDN
    • Host on Cloudflare Pages
    • Deployment with Rsync
    • Deployment with Rclone
    • Hosting on Azure Static Web Apps
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
Last updated: December 18, 2022: Remove redundant markdown and fix a few typos (#1936) (ce207e141)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 

Hugo Sponsors

Logo for Linode
Logo for ButterCMS
Logo for BEP Consulting
 

The Hugo logos are copyright © Steve Francia 2013–2023.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Installation
  • Getting Started
  • Hugo Modules
  • Content Management
  • Templates
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
  • Maintenance