Static Site Generator

Introduction to SSG for beginner.

Click download in: [PDF], [Impress]

All slides in: [slides]

About Me πŸ™‹πŸ»β€β™‚οΈ!

my photo

Yet, another underachiever πŸ‘».

But hey, I have my own blog πŸŽ‰.

About This Material 🀠

After watching this, you will understand:
How SSG can be utilized to
make a fully mature website
without the burden of complicated backend.


This material is not really comprehensive.
I still have so much to learn.

What is SSGπŸ€”?

  • SSG short abbreviation:
    Static Sites Generator
  • Static Sites:
    Just plain HTML + CSS + JS
  • Static:
    No dynamic server (backend)
  • Generated:
    Built once, on every change
    Put on server
    Serve as many request as needed.

What is SSG good forπŸ€”?

  • Company Profile
    or Portfolio.
  • Personal Blog
    Just like mine.
  • Official Site
    Most Linux Distro use SSG.
  • Any Static Sites:
    Such as CSS Tricks.
  • JAM Stack:
    Dynamic sites utilizing javascript.
    Modern Web Era, in contrast with LAMP stack.

What case is notπŸ€”?

  • Non tech savvy end user
    should use blogger, or wordpress instead
  • Startup
    With a lot of infrastructure
  • Dynamic website
    Anything that require login
  • Walk your dog, or feed your cat
    You still have to do it yourself.

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.
  • Cacheable
    Can be reliaby cached, and maybe served as CDN.
  • No scaling issue.
    It is all just static html and assets.

Which Generator πŸ€”?

  • Conventional (regular site):
    Jekyll, Hugo, Hexo, Pelican, Eleventy.
  • Modern (web app):
    Gatsby, Nuxt, Next.

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, 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.

Main Configuration

Global Stuff

Inside a Page

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

Step by Step Examples 🀠?

Free Tutorials!

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

Deploying Choices

  • 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 (Vercel)
  • Manual Git: Refspec, Worktree
  • Travis+Github
  • CircleCI: Github, Bitbucket
  • Github Workflows (Actions)

Both, and,
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 🀠?

Yet Another Presentation.

Summary πŸ€”?

Along with local communities 🀠.

  • Static Site Generator:
    Jekyll, Pelican, Eleventy (11ty), Hugo, Hexo, Gatsby.
  • Text:
    Markdown, reStructured Text.
  • Template Engine:
    Nunjucks, Jinja2, EJS, Liquid, Template,
    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.


Looking for the right tools?
A real world example require complete stack.

Practical Blog Development Cycle

[Practical Blog Development Cycle]
Learning The Hard Way.

What is Next πŸ€”?

Leverage to JAM stack!


Questions πŸ€”?

Don't be shy πŸ™‹πŸ»β€β™‚οΈ!

The End


Thank You for Your Time.