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
    Git-able
  • 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 customize to suit your needs.

Install

  • 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:
    Formatting

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

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

Configuration

Contain:
Global Stuff

Page

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

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 🤠

Recipe:
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.
    my-revision-content.rev1.final.revagain.txt
  • Time travelling is possible.
    OMG. I deleted my great idea last month!
  • Multiple branch while making themes enhancement
    branch: Master, development, bootstrapv4, bulma

Deploy

  • Simple setup for CI/CD
  • Choices:
    gitlab, github, bitbucket, netlify, firebase

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.

What is Next 🤔?

Leverage to JAM stack!

Questions 🤔?

Don't be shy 🙋🏻‍♂️!

The End

🙇🏻

Thank You for Your Time.