Hugo Static Page Like About Page

Sep 10, 2017

Create static about page

Create a about page.

hugo new about.md

Edit the page's configuration to give it a static type.

---
title: "About"
date: 2017-07-29T19:57:50+08:00
type: static
---

My about page.

Create a layout template for static type at layouts/static/single.html.

{{ define "main" }}
  <article>
      <header>
        <h1>
          {{ .Title }}
        </h1>
      </header>

      {{ .Content }}
    </div>
  </article>
{{ end }}

Add about page to menu

Edit config.toml to add about page menu configuration.

[[menu.main]]
    name = "About"
    weight = 1
    url = "/about/"
    identifier = "about"

Make sure your layouts/_default/baseof.html is including some partials templates (layouts/partials/*) which render the menu.

Below is a sample menu rendering template which utilize Bootstrap 4 classes.

{{ if .Site.Menus.main }}
<ul class="navbar-nav">
  {{ range .Site.Menus.main }}
  <li class="nav-item {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
      <a class="nav-link" href="{{ .URL }}">
        {{ .Name }}
      </a>
  <li class="nav-item"> 
  {{ end }}
</ul>         
{{ end }}

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.