ssg  
Where to Discuss?

Local Group

Preface

Feeding Data in Hugo, and Process in a Loop with Go html/template.

Again, consider continue have a look at templating engine that we never use before. We are going to use go html/template example, using SSG (static site generator), called hugo.

Official Documentation

Source Examples

You can obtain source examples here:


Go html/template Case

The Go html/template case is the same, with the one utilizing grunt in previous article with a few differences.

  • hugo configuration

  • Using data to provide hyperlink in both navbar and sidebar.

Directory Structure

Consider an hugo structure with Go html/template views.

❯ tree
.
├── config.toml
├── content
│   ├── css.md
│   ├── html.md
│   ├── _index.md
│   ├── javascript.md
│   └── php.md
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
│   ├── css
│   │   └── w3.css
│   ├── favicon.ico
│   └── js
│       └── script.js
└── themes
    └── tutor
        ├── archetypes
        │   └── default.md
        ├── layouts
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   └── partials
        │       ├── head.html
        │       ├── navbar.html
        │       └── sidebar.html
        ├── LICENSE
        └── theme.toml

14 directories, 19 files

.

Hugo: Example: Tree

config.toml

You also need to a write a configuration in _config.yml.

# An example of Hugo site using Bulma for personal learning purpose.

baseURL      = "http://example/"
languageCode = "en-us"
title        = "Yet Another Example."
theme        = "tutor"

Global configuration is a must have in SSG world.

In hugo, data can be express in yaml, toml or json.

To provide hyperlink in both navbar and sidebar, we need to setup the data in pages.yml as below:

# Helper for related links

- link : "/"
  short: "Home"
  long : "Home"

- link : "/html.html"
  short: "HTML"
  long : "HTML Link"

- link : "/css.html"
  short: "CSS"
  long : "CSS Link"

- link : "/php.html"
  short: "PHP"
  long : "PHP Link"

- link : "/javascript.html"
  short: "Javascript"
  long : "Javascript Link"

The sidebar will use long text, and the navbar will use short one.

Router

Set automatically with SSG

Layout

<!DOCTYPE html>
<html lang="en">

<head>
  {{- partial "head.html" . -}}
</head>
<body>
  {{- partial "sidebar.html" . -}}

  <div id="main">
    {{- partial "navbar.html" . -}}

    <div class="w3-container">
    {{ .Content }}
    </div>
  </div>

</body>
</html>

As shown in order we have three partial artefacts.

  • partial head.html,
  • partial sidebar.html,
  • partial navbar.html,

And one eleventy specific tag content.

    <div class="w3-container">
    {{ .Content }}
    </div>

Nunjucks: ViM NERDTree Panes

It is a little bit different with the original head.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{{ .Page.Title | default "Link Example - Default" }}</title>

  <link rel="stylesheet" type="text/css"
        href="{{ "css/w3.css" | relURL }}">
  <script src="{{ "js/script.js" | relURL }}"></script>

Here we put the default title if we cannot find title variable.

<title>{{ .Page.Title | default "Link Example - Default" }}</title>

Loop in Template

Very similar with previous example

This time, consider alter a bit, both the sidebar and the navbar, so we can render each data in loop.

  <div class="w3-sidebar w3-bar-block w3-card w3-animate-left" 
       style="display:none" id="mySidebar">
    <button class="w3-bar-item w3-button w3-large"
       id="closeNav" >Close &times;</button>
    {{ range .Site.Data.pages }}
      <a class="w3-bar-item w3-button"
         href="{{ .link }}">{{ .long }}</a>
    {{ end }}
  </div>
    <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge"
              id="openNav">&#9776;</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
    </div>

    <div class="w3-bar w3-black">
    {{ range .Site.Data.pages }}
      <a class="w3-bar-item w3-button"
         href="{{ .link }}">{{ .short }}</a>
    {{ end }}
    </div>

All you need to know is these lines:

    {{ range .Site.Data.pages }}
      <a class="w3-bar-item w3-button"
         href="{{ .link }}">{{ .short }}</a>
    {{ end }}

Hugo: Loop in Go html/template

This will render a hyperlink, with result about the same with previous example.

Running Hugo

Running hugo is as easy as this command below.

$ hugo server

HTML: Hyperlink Example

hugo server --disableFastRender

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  3  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 22 ms
Watching for changes in /home/epsi/Documents/html-preprocessor/04-hugo/{content,data,static,themes}
Watching for config changes in /home/epsi/Documents/html-preprocessor/04-hugo/config.toml
Environment: "development"
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Hugo: hugo server

You are ready to run a website, with hugo SSG, using Go html/template.


What’s Next?

To be concluded, not anytime soon.