ssg  
Where to Discuss?

Local Group

Preface

Goal: Feeding Data in Jekyll, and Process in a Loop with Liquid.

Consider continue have a look at templating engine that we never use before. We are going to use liquid example, using SSG (static site generator), called jekyll.

Official Documentation

Source Examples

You can obtain source examples here:


Liquid Case

The liquid case is very similar with previously nunjucks example.

  • jekyll configuration

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

Directory Structure

Consider an jekyll structure with liquid views.

❯ tree
.
├── assets
│   ├── css
│   │   └── w3.css
│   └── js
│       └── script.js
├── _config.yml
├── _data
│   └── pages.yml
├── favicon.ico
├── Gemfile
├── Gemfile.lock
├── _includes
│   ├── head.html
│   ├── navbar.html
│   └── sidebar.html
├── _layouts
│   └── index.html
├── pages
│   ├── css.md
│   ├── html.md
│   ├── index.md
│   ├── javascript.md
│   └── php.md
└── _posts

8 directories, 16 files

.

Jekyll: Example: Tree

Gemfile

All you need to know is the jeykll version.

source "https://rubygems.org"
gem "jekyll", "~> 3.8.6"

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

_config.yml

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

# Site settings
title: Your mission. Good Luck!

# the subpath of your site, e.g. /blog
baseurl: "" 

# the base hostname & protocol for your site, e.g. http://example.com
url: "http://localhost:4000"

Global configuration is a must have in SSG world.

In jekyll, 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 head.html %}
</head>
<body>
  {% include sidebar.html %}

  <div id="main">
    {% include navbar.html %}

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

</body>
</html>

As shown in order we have three include artefacts.

  • include head.html,
  • include sidebar.html,
  • include navbar.html,

And one jekyll specific tag content.

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

Nunjucks: ViM NERDTree Panes

It is almost the same with the original head.

  • [html-preprocessor/…/_includes/head.html][04-views-sites-head]
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{{ title or "Link Example - Default" }}</title>

  <link rel="stylesheet" href="{{ "/assets/css/w3.css" | url }}">
  <script src="{{ "/assets/js/script.js" | url }}"></script>

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

<title>{{ title or "Link Example - Default" }}</title>

No need to add livereload, since utilized browsersync has internal sync.

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>
    {% for page in site.data.pages %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.long }}</a>
    {% endfor %}
  </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">
    {% for page in site.data.pages %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.short }}</a>
    {% endfor %}
    </div>

All you need to know is these lines:

    {% for page in site.data.pages %}
      <a class="w3-bar-item w3-button"
         href="{{ page.link }}">{{ page.short }}</a>
    {% endfor %}

Jekyll: Loop in Liquid

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

Running Jekyll

Running jekyll is as easy as this command below.

$ jekyll serve

HTML: Hyperlink Example

jekyll serve
Configuration file: /home/epsi/Documents/html-preprocessor/04-jekyll/_config.yml
            Source: /home/epsi/Documents/html-preprocessor/04-jekyll
       Destination: /home/epsi/Documents/html-preprocessor/04-jekyll/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.062 seconds.
 Auto-regeneration: enabled for '/home/epsi/Documents/html-preprocessor/04-jekyll'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Jekyll: jekyll serve

You are ready to run a website, with jekyll SSG, using liquid.


What’s Next?

Consider continue reading [ Template - Hexo - EJS ].