ssg  
Table of Content

The Document

This article contain all article slides. Slide by slide, so anyone can copy desired slide, without the need to open the Impress slide, or the PDF version.

Teaser Preview: Concept SSG

I believe, a ready to use slide, is useful to help people in the group discussion.

Original Presentation

I usually draft a presentation in a simple text based, that I can write down in any text editor.

Then I show in web based for a few moment (actually months). This give time to append any additional material freely, create necessary figure, and also correct any typo, or even dead links.

You can watch the presentation here:

This text based presentation is the most authentic version, with all the links required provided.

Impress

This presentation is made in LibreOffice Impress, using candyclone template.

You can download the Impress document from a page in here:

With this downloadable document, you can use the style of this presentation, for use with your own presentation works, either for school material, office works, homeworks, or anything else.

PDF

You can also download the exported pdf from a page in here:

The pdf version cannot contain animation. So the content might be little different, compared with the original Impress document.

Inkscape

The Impress pages also utilize diagram illustration made in Inkscape. I also provide the source image in SVG format, that you can download from a page in here:

Here is the preview.

Inkscape Illustration: Concept SSG

Or better, you can get it all from candyclone illustration:

I intentionally share the source SVG image, so you can alter the content for your own personal use. I know there are already so many stock images for presentation, I just need to share, what I have, with tutorial. This way, anyone can make pretty presentation easier. Of course you still have to learn Inkscape, to suit the illustration for your own use.

Template

What is this candyclone rubbish?

Candyclone is an Impress template that I have made for LibreOffice contest.

There are also other free templates as well in lumbung repository.

This candyclone is just an example template that you can use freely. With this candyclone example you can also learn how to make your own template. Your very own template to suit your ecosystem.

Disagreement

What if I do not agree?

The source is available, so you can freely make your own slide. Feel free to express your thoughts, either with text, or illustration.


The Slides

Here I represent all the slides.

Slide 01: Cover

Slide - Cover

Static Site Generator

Introduction to SSG for beginner

Slide 02: About The Author

Slide - About Author

I have my own blog.

Slide 03: About This Material

Slide - About 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.

Slide 04: Chapter Break

Slide - Preface

Slide 05: What is Static Site Generator?

Slide - Preface: What is SSG?

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.

Slide 06: What is SSG good for?

Slide - Preface: What is SSG Good for?

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.

Slide 07: Blog Preview

Slide - Preface: Blog Preview

Slide 08: What case is not?

Slide - Preface: What Case is Not SSG

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.

Slide 09: Which Generator?

Slide - Which Generator?

Which Generator?

  • Conventional (regular site)

    • Jekyll, Hugo, Hexo, 11ty, Pelican
  • Modern (web app)

    • Gatsby, Next, Nuxt

More Reference: CSS Tricks: Comparing Static Site Generator Build Times

Slide 10: Chapter Break

Slide - Preface: Break Why SSG?

Slide 11: Why Static Sites?

Slide - Preface: Why Static Sites

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.

Slide 12: Tech Savvy

Slide - Preface: Tech Savvy

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

Slide 13: Other Technical Performance

Slide - Preface: Other Technical Performance

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.

Slide 14: Chapter Break

Slide - User Tasks

Slide 15: Simplified User Tasks

Slide - User Tasks: Simplified User Tasks

User Tasks: Only consist of this two tasks:

  • Design Theme and Layout
  • Writing Content, then Deploy

No complex backend setting.

It means, more focus on the content. Especially, with 3rd party theme.

Slide 16: SSG Caveat

Slide - User Tasks: Caveat

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

Slide 17: Install SSG

Slide - User Tasks: Install

Install

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

Depend on the choice of SSG.

Slide 18: Own Your Own Site

Slide - User Tasks: 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.

Slide 19: Chapter Break

Slide - Theming

Slide 20: Split HTML Task

Slide - Theming: Split HTML Task

Split HTML Task:

  • Theme:

    • Structure (Layout, and Skeleton)
  • Markdown Engine:

    • Formatting

In short: clear division between these two tasks.

Slide 21: Theme Making

Slide - Theming: Theme Making

Theme Making 🦋

  • Template Engine:

    • Block and Basic Coding
  • HTML Skeleton:

    • Layout Structure
  • Stylesheet:

    • Presenting Nice Looks

Slide 22: Template Engine

Slide - Theming: Template Engine

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

Slide 23: Stylesheet Presentation

Slide - Theming: Stylesheet

Yet Another Presentation:

You might also need to understand CSS Tools.

Slide 24: Main Configuration

Slide - Theming: Main Configuration

Main Configuration: Contain: Global Stuff.

Slide 25: Inside a Page

Slide - Theming: Page

Inside a Page

  • Frontmatter:

    • Per-page configuration
  • Content:

    • Markdown or HTML

Slide 26: Chapter Break

Slide - Free Tutorials

Slide 27: Step by Step Examples?

Slide - Tutorial: Step by Step Examples

Free Tutorials!

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

Slide 28: Chapter Break

Slide - Markdown

Slide 29: Why Markdown?

Slide - Markdown: Why Markdown

More on Writing Content 🤠!

Slide 30: Issue with HTML Content

Slide - Markdown: Issue with HTML 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.

Slide 31: Markdown Content

Slide - Markdown: Content

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.

Slide 32: Markdown Engine

Slide - Markdown: Engine

Implementation may vary

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

Slide 33: HTML Content

Slide - Markdown: HTML Content

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.

Slide 34: Chapter Break

Slide - Repository

Slide 35: Track Changes

Slide - Repository: Track Changes

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

Slide 36: Chapter Break

Slide - Deploy

Slide 37: Deploying Choices

Slide - Deploy: Deploying Options

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

Slide 38: Configuration Examples

Slide - Deploy: Configuration Examples

Link:

Configuration Examples

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

Slide 39: Repositories

Slide - Deploy: Repositories

Slide 40: Chapter Break

Slide - Issues

Slide 41: Issues with Static Site?

Slide - Issue with Static Site

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.

Slide 42: Chapter Break

Slide - Free Tutorials Again

Slide 43: Again, Free Tutorials?

Slide - Repository: Step by Step Examples

Step by Step Examples

Slide 44: In Need of a Technical Material?

Slide - Technical Materials

Technical Materials

Slide 45: Chapter Break

Slide - Summary

Slide 46: Summary

Slide - Summary: Along with Local Communities

Summary: Along with Local Communities

  • Static Site Generator

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

Slide 47: Looking for the right tools?

Slide - Summary: Blog Development Cycle

Link:

Learning The Hard Way.

Slide 48: What’s Next?

Slide - What’s Next

Leverage to JAM stack!

Slide 49: Questions

Slide - Questions

Don’t be shy!

Slide 50: Thank You

Slide - Thank You

Thank you for your time.