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

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, ejs, nunjucks, jinja2, etc...

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

Stylesheet

You might also need to understand CSS Tools 🙈:

[CSS Frameworks and CSS Tools]
Yet Another Presentation.

Main Configuration

Contain:
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 🤠

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

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

Deploy

Configuration Examples
CI/CD - Deploy Overview

  • Netlify, Zeit Now (Vercel)
  • Manual Git: Refspec, Worktree
  • Travis+Github
  • CircleCI: Github, Bitbucket
  • Github Workflows (Actions)

Both github.io, and gitlab.io,
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.

Summary

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!

staticgen.com

@JAMstackID

Questions 🤔?

Don't be shy 🙋🏻‍♂️!

The End

🙇🏻

Thank You for Your Time.