ssg  
Where to Discuss?

Local Group

Table of Content

Preface

Goal: Feeding Data in Hexo, and Process in a Loop with EJS.

Consider continue with EJS example. This time using SSG (static site generator), called hexo.

Official Documentation

Source Examples

You can obtain source examples here:


EJS Case

The EJS case is the same, with the one utilizing grunt in previous article with a few differences.

  • hexo configuration

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

Directory Structure

Consider an hexo structure with EJS views.

❯ tree
.
├── _config.yml
├── package.json
├── package-lock.json
├── source
│   ├── css.md
│   ├── _data
│   │   └── pages.yml
│   ├── html.md
│   ├── index.md
│   ├── javascript.md
│   └── php.md
└── themes
    └── tutor
        ├── layout
        │   ├── layout.ejs
        │   ├── page.ejs
        │   └── site
        │       ├── head.ejs
        │       ├── navbar.ejs
        │       └── sidebar.ejs
        └── source
            ├── css
            │   └── w3.css
            ├── favicon.ico
            └── js
                └── script.js

9 directories, 17 files

.

Eleventy: Example: Tree

The views structure is similar to previous case with grunt. I suggest that you have fast reading for this article first.

package.json

All you need to know is the devDependencies.

  "dependencies": {
    "hexo": "^3.9.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-server": "^0.3.3"
  }

To begin with hexo, you need to run npm install first.

_config.yml

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

# Site
title         : Yet Another Example
language      : en
timezone      : Asia/Jakarta

# Extensions
## Themes: https://hexo.io/themes/
theme: tutor
# theme: landscape

# URL
url           : http://example/
# root: /child/
root          : /


# Directory
source_dir    : source
public_dir    : public

Global configuration is a must have in SSG world.

In hexo, data can be express in yaml.

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>
  <%- include('site/head') %>
</head>
<body>
  <%- include('site/sidebar') %>

  <div id="main">
    <%- include('site/navbar') %>

    <div class="w3-container">
      <%- body %>
    </div>
  </div>

</body>
</html>

As shown in order we have three include artefacts.

  • include head.njk,
  • include sidebar.njk,
  • include navbar.njk,

And one eleventy specific tag content.

    <div class="w3-container">
      <%- body %>
    </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 || "Link Example - Default" %></title>

  <%- css('/css/w3.css') %>
  <%- js('/js/script.js') %>

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

<title><%= page.title || "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>
    <% site.data.pages.forEach(function(page){ %>
      <a class="w3-bar-item w3-button"
         href="<%= page.link %>"><%= page.long %></a>
    <% }) %>
  </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">
    <% site.data.pages.forEach(function(page){ %>
      <a class="w3-bar-item w3-button"
         href="<%= page.link %>"><%= page.short %></a>
    <% }) %>
    </div>

All you need to know is these lines:

    <% site.data.pages.forEach(function(page){ %>
      <a class="w3-bar-item w3-button"
         href="<%= page.link %>"><%= page.short %></a>
    <% }) %>

Hexo: Loop in EJS

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

Running Hexo

Running hexo is as easy as this command below.

❯ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

HTML: Hyperlink Example

Hexo: hexo server

You are ready to run a website, with hexo SSG, using EJS.


What’s Next?

Consider continue reading [ Template - Hugo - Template ].