Static Site Generator

Introduction to SSG for beginner.

About Me 🙋🏻‍♂️!

my photo

Yet, another underachiever 👻.

But hey, I have my own blog 🎉.

Why Static Sites 🤔?

  • Markdown:
    More on Writing Content
  • No complex backend:
    Focus on frontend: Great theme.
  • Local Copy:
    Own Your Own Site
  • Cheap:
    Free Hosting =💲 murah meriah

Tech Savvy

  • Embrace modern technology 🤠:
    SPA, JAM stack, serverless, CI/CD.
  • OS Agnostic (simpler ecosystem)
    No racial issue, between Windows, Mac and Linux/BSD user.
  • Many SSG Choice Options:
    Jekyll, Hugo, Hexo, Pelican, Gatsby, 11ty.
  • Easier to migrate content between generator.
    After all, it is just markdown.
  • Easier to port tailor made custom theme.
    No scary language feature.
  • Way cooler web developer:
    Over traditional CMS

Other Technical Performance 🤠.

  • Fast:
    No server side processing.
  • Less Security Issue:
    SQL Injection and Vulnerablities.
  • Can be cached, and maybe served as CDN.
    Realiaby cacheable
  • No scaling issue.
    It is all just static html and assets.

User Tasks

Only consist of this two tasks

  1. Design Theme and Layout
  2. Writing Content, then Deploy

No complex backend setting.
It means, more focus on the content.
Especially, with 3rd party theme.

Caveat 🙈!

Even with a ready to use theme,
you still need customization to suit your needs.


  • Some are easy to install.
  • Some are harder for non tech-savvy.

Depend on the choice of SSG.

Own Your Own Site 🤠

You can have it all locally.

  • Writing content in your favorite text editor
  • No upload image.
    Edit image directly in your notebook.
  • No need to dump database.

In short:
More control

Split HTML Task

  1. Theme:
    Structure (Layout, and Skeleton)
  2. Markdown Engine:

In short:
clear division between these two tasks.

Theme Making 🦋

  • Template Engine:
    Block and Basic Coding
  • HTML Skeleton:
    Layout Structure
  • Stylesheet:
    Presenting Nice Looks

Template Engine

liquid, chroma, ejs, nunjucks, jinja2, etc...

  • Block Building
  • Basic Language:
    Variable, Loop, Conditional
  • Static Data Files:
    from yaml, or toml, or json
  • Specific Feature:


You might also need to understand CSS Tools 🙈:

[CSS Frameworks and CSS Tools]
Yet Another Presentation.


Global Stuff


  • Frontmatter:
    Per-page configuration
  • Content:
    Markdown or HTML

Step by Step Examples 🤠?

More examples on Repository (11ty, Jekyll, Pelican).

Why Markdown 🤔?

More on Writing Content 🤠!

Issue with HTML Content 🤕

  • Time spent on doing formatting.
    Wasted time = Less creativity.
  • Easily get lost of concentration in writing.
    Dammit, my article is sucks!
  • Reformatting:
    Whenever design changes.
  • Error prone.
    Dad, I forget to close the tag again.

In short:
Markup focus on document formatting.

Markdown Content 🤠

Markdown focus on document structure.

  • Easier to write content.
    Plain Text = Painless Text.
  • HTML formatting taken care by markdown engine.
    Significantly reduce formatting time while writing content.
    Consistent formatting, by not doing manually.
  • Inline Code.
    Parsed, auto format with nice color.
  • Text editor is sufficient.
    No need for sophisticated tools.

Markdown Engine

Implementation may vary
Each static site, have their own markdown engine.
Be aware of slight difference.

HTML Content

When you need special formatting,

  • HTML Page
    Such as landing page content.
  • Embedded Content in Markdown Page
    Such as nice looks table of content.

Track Changes

  • Use Git!
    Friendly neighbourhood backup platform.
  • No weird file naming.
  • Time travelling is possible.
    OMG. I deleted my great idea last month!
  • Multiple branch while making themes enhancement
    branch: Master, development, bootstrapv4, bulma


  • Simple setup for CI/CD
  • Repository and Host:
    Gitlab, Github, Bitbucket
  • CI/CD:
    Travis, Circle-CI, Pipelines, Gitlab-CI
  • Host and CI/CD:
    Netlify, Zeit Now, Firebase


Configuration Examples
CI/CD - Deploy Overview

  • Netlify, Zeit Now
  • Manual Git: Refspec, Worktree
  • Travis+Github
  • CircleCI: Github, Bitbucket
  • Github Workflows (Actions),,,
can directly utilize any SSG.

Issue with Static Site 🙈

  • No commenting system:
    Except embedded.
  • No internal search.
  • Local build time,
    For site with many article,
    Or theme design with poor logic.

Step by Step Examples 🤠?

In Need of a Technical Material 🤠?

[Building Site with Hexo]
Yet Another Presentation.

Summary 🤔?

Along with local communities 🤠.

  • Static Site Generator:
    Jekyll, Pelican, Eleventy (11ty), Hugo, Hexo.
  • Text:
    Markdown, reStructured Text.
  • Template Engine:
    Nunjucks, Jinja2, EJS, Liquid, Chroma,
    Local Community: JAMstackID
  • Deploy:
    CVS: Git, Mercurial: freekelasgithub,
    Repository: Gitlab, Github, Bitbucket,
    CI/CD: Travis, Circle-CI, Pipelines: IDDEvOps,
    Static Host: Netlify, Render, Zeit Now.

What is Next 🤔?

Leverage to JAM stack!


Questions 🤔?

Don't be shy 🙋🏻‍♂️!

The End


Thank You for Your Time.